SMenu <s-menu>

Eine Liste von Aktionen in einem Overlay, die über einen Button geöffnet wird. SMenu ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-menu>.

import { SMenu } from 'polaris-vue-elements'

Best Practices

• Menüs für sekundäre Aktionen verwenden. Halten Sie primäre Aktionen wie „Save“ direkt auf der Seite sichtbar. Menüs eignen sich für seltener genutzte oder destruktive Aktionen wie „Archive“ oder „Export data“, die keinen festen Platz brauchen.
• Labels als Verb plus Nomen formulieren. Labels wie „Edit details“ oder „Export as CSV“ sagen genau, was passiert; vermeiden Sie vage Labels wie „Options“, „More“ oder „Settings“.
• Längere Menüs in Sections aufteilen. Ab vier Einträgen gruppieren Sie zusammengehörige Aktionen in einer SSection mit heading, zum Beispiel „Manage“ für alltägliche und „Danger zone“ für destruktive Aktionen.
• Icons ergänzen, die das Label unterstützen. Icons wie edit zum Bearbeiten, delete zum Löschen oder download zum Exportieren helfen Händlern, eine Aktion zu erkennen, sollten den Text aber verstärken, nie ersetzen.
• Nur vorübergehend Unverfügbares deaktivieren. Setzen Sie disabled an einem Eintrag, wenn die Aktion im aktuellen Kontext nicht zutrifft, etwa beim Erstatten einer bereits erstatteten Bestellung. Trifft eine Aktion nie zu, lassen Sie sie ganz aus dem Menü weg.

<SButton commandFor="product-actions">Product actions</SButton>
<SMenu id="product-actions" accessibilityLabel="Product actions">
  <SSection heading="Manage">
    <SButton icon="edit">Edit product</SButton>
    <SButton icon="duplicate">Duplicate product</SButton>
  </SSection>
  <SSection heading="Danger zone">
    <SButton icon="archive">Archive product</SButton>
    <SButton icon="delete" tone="critical">Delete product</SButton>
  </SSection>
</SMenu>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-menu> (auf Englisch).

Beispiel

ActionsEditDuplicateDelete

<script setup>
import { SButton, SMenu, SSection } from 'polaris-vue-elements'
</script>

<template>
  <!-- SMenu only accepts Button and Section elements in its default slot; it's
       activated the same way as SPopover, via commandFor/command on a trigger. -->
  <SButton commandFor="example-menu" command="--toggle">Actions</SButton>

  <SMenu id="example-menu" accessibilityLabel="Actions menu">
    <SSection heading="Manage">
      <SButton variant="tertiary">Edit</SButton>
      <SButton variant="tertiary">Duplicate</SButton>
    </SSection>
    <SSection heading="Danger zone">
      <SButton variant="tertiary" tone="critical">Delete</SButton>
    </SSection>
  </SMenu>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
id	string	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Die im Menü angezeigten Einträge. Akzeptiert nur Button- und Section-Komponenten. Verwenden Sie Buttons für einzelne Menüaktionen und Sections, um zusammengehörige Einträge zu gruppieren.