Vitral 0.2
Menu

Menu

Uma lista de comandos e links, inline ou como popup, com grupos e separadores.

Testado com WAI-ARIA

Importação

main.ts
import { Menu } from '@vitral/vue';

Inline, com grupos

Last command: —
<script setup lang="ts">import { Menu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? ''); const grouped: MenuItem[] = [    {        label: 'Documents',        items: [            { label: 'New', icon: 'plus', command: run },            { label: 'Search', icon: 'search', command: run }        ]    },    {        label: 'Profile',        items: [            { label: 'Settings', icon: 'sliders', command: run },            { label: 'Notifications', icon: 'bell', command: run, disabled: true },            { label: 'Help', icon: 'externalLink', url: '#' }        ]    }];</script> <template>    <Menu :model="grouped" aria-label="Account" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

API

Lido de packages/vue/src/components/Menu/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
modelMenuItem[]—
popupbooleanUm menu popup, aberto por `toggle(event)` / `show(event)` e ancorado no elemento do evento.
appendTostringOnde um popup é renderizado: `'body'` (o padrão), `'self'` para ficar no lugar, ou um seletor.
placementOverlayPlacement—
ariaLabelstringDá nome ao menu. Um popup sem ele é nomeado pelo elemento que o abriu.
ariaLabelledbystring—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
show——
hide——

Slots

NomeProps do slotDescrição
start—Conteúdo antes dos itens.
end—Conteúdo depois dos itens.
item(props: { item: MenuItem; label: string | undefined; focused: boolean; disabled: boolean })O conteúdo de um item: seu ícone e rótulo. O elemento menuitem em volta, com seu papel e teclado, permanece.
submenulabel(props: { item: MenuItem })O título de um grupo.

Usado nestes templates