SMenu <s-menu>

Una lista de acciones que se muestra en una superposición y se abre desde un botón. SMenu es el wrapper de Vue 3 tipado del web component <s-menu> de Shopify Polaris.

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

Buenas prácticas

• Usa los menús para acciones secundarias. Mantén visibles en la propia página las acciones principales como "Save". Los menús son adecuados para acciones que los comerciantes usan con menos frecuencia o para acciones destructivas, como "Archive" o "Export data", que no necesitan un espacio permanente.
• Escribe las etiquetas como un verbo más un sustantivo. Etiquetas como "Edit details" o "Export as CSV" dicen exactamente lo que ocurrirá; evita las vagas como "Options", "More" o "Settings".
• Divide los menús largos en secciones. Cuando un menú tenga cuatro elementos o más, agrupa las acciones relacionadas en un SSection con un heading, por ejemplo "Manage" para las acciones habituales y "Danger zone" para las destructivas.
• Añade iconos que refuercen la etiqueta. Iconos como edit para editar, delete para eliminar o download para exportar ayudan a los comerciantes a reconocer una acción, pero deben reforzar el texto, nunca sustituirlo.
• Desactiva solo lo que no está disponible por ahora. Define disabled en un elemento cuando la acción no se aplique en el contexto actual, como reembolsar un pedido que ya está reembolsado. Si una acción nunca se aplica, déjala fuera del menú.

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

Consulta las buenas prácticas de Shopify para <s-menu> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
id	string	Un identificador único para el elemento.

Slots

Slot	Descripción
default	Los elementos que se muestran dentro del menú. Solo acepta componentes button y section. Usa button para acciones individuales del menú y section para agrupar elementos relacionados.