SMenu <s-menu>

Une liste d'actions affichée dans une superposition, ouverte depuis un bouton. SMenu est le wrapper Vue 3 typé du web component <s-menu> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez les menus pour les actions secondaires. Gardez les actions principales comme "Save" visibles dans la page elle-même. Les menus conviennent aux actions que les marchands utilisent moins souvent ou aux actions destructives, comme "Archive" ou "Export data", qui n'ont pas besoin d'une place permanente.
• Formulez les libellés avec un verbe et un nom. Des libellés comme "Edit details" ou "Export as CSV" disent exactement ce qui va se passer ; évitez les libellés vagues comme "Options", "More" ou "Settings".
• Découpez les menus plus longs en sections. Dès qu'un menu compte quatre éléments ou plus, regroupez les actions liées dans un SSection avec un heading, par exemple "Manage" pour les actions courantes et "Danger zone" pour les actions destructives.
• Ajoutez des icônes qui appuient le libellé. Des icônes comme edit pour modifier, delete pour supprimer ou download pour exporter aident les marchands à reconnaître une action, mais elles doivent renforcer le texte, jamais le remplacer.
• Ne désactivez que ce qui est momentanément indisponible. Définissez disabled sur un élément lorsque l'action ne s'applique pas dans le contexte actuel, comme le remboursement d'une commande déjà remboursée. Si une action ne s'applique jamais, retirez-la du menu.

<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>

Consultez les bonnes pratiques de Shopify pour <s-menu> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à exprimer clairement l'objectif du composant.
id	string	Un identifiant unique pour l'élément.

Slots

Slot	Description
default	Les éléments affichés dans le menu. N'accepte que des composants button et section. Utilisez button pour les actions de menu individuelles et section pour regrouper des éléments liés.