Vitral 0.2
Menu

TieredMenu

Um menu cujos itens abrem submenus ao lado, em qualquer profundidade, inline ou como popup.

Testado com WAI-ARIA

Importação

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

Inline

Last command: —
<script setup lang="ts">import { TieredMenu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? ''); const items: MenuItem[] = [    {        label: 'File',        icon: 'file',        items: [            { label: 'New', icon: 'plus', items: [{ label: 'Document', command: run }, { label: 'Spreadsheet', command: run }, { label: 'Presentation', command: run }] },            { label: 'Open', icon: 'folderOpen', command: run },            { separator: true },            { label: 'Export', icon: 'download', items: [{ label: 'PDF', command: run }, { label: 'CSV', command: run }] }        ]    },    {        label: 'Edit',        icon: 'pencil',        items: [            { label: 'Copy', icon: 'copy', command: run },            { label: 'Delete', icon: 'trash', command: run, disabled: true }        ]    },    { label: 'Search', icon: 'search', command: run },    { separator: true },    { label: 'Help', icon: 'externalLink', url: '#' }];</script> <template>    <TieredMenu :model="items" aria-label="Workspace" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

API

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

Props

NomeTipoDescrição
modelMenuItem[]Os itens; os `items` de um item abrem como submenu ao lado dele, em qualquer profundidade.
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——
end——
item(props: NestedMenuItemSlotProps)O conteúdo de um item. O elemento menuitem em volta, com seu papel e teclado, permanece.