SMenu <s-menu>

Uma lista de ações exibida em uma sobreposição, aberta a partir de um botão. SMenu é o wrapper de Vue 3 tipado do web component <s-menu> do Shopify Polaris.

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

Boas práticas

• Use menus para ações secundárias. Mantenha ações principais como "Salvar" visíveis na própria página. Menus são adequados para ações que os lojistas usam com menos frequência ou para as destrutivas, como "Arquivar" ou "Exportar dados", que não precisam de espaço permanente.
• Escreva os rótulos como verbo mais substantivo. Rótulos como "Editar detalhes" ou "Exportar como CSV" dizem exatamente o que acontece; evite rótulos vagos como "Opções", "Mais" ou "Configurações".
• Divida menus longos em seções. Quando um menu tiver quatro ou mais itens, agrupe as ações relacionadas em um SSection com um heading, por exemplo "Gerenciar" para ações do dia a dia e "Zona de perigo" para as destrutivas.
• Adicione ícones que reforcem o rótulo. Ícones como edit para editar, delete para excluir ou download para exportar ajudam os lojistas a reconhecer uma ação, mas devem reforçar o texto, nunca substituí-lo.
• Desative apenas o que está indisponível no momento. Defina disabled em um item quando a ação não se aplicar ao contexto atual, como reembolsar um pedido que já foi reembolsado. Se uma ação nunca se aplica, deixe-a fora do 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>

Veja as boas práticas da Shopify para <s-menu> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
id	string	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	Os itens exibidos dentro do menu. Aceita apenas componentes de botão e de seção. Use botão para ações individuais do menu e seção para agrupar itens relacionados.