Vitral 0.2
Menu

PanelMenu

Seções de navegação que se expandem no lugar, cada uma uma árvore dos seus itens, para uma barra lateral.

Testado com WAI-ARIA

Importação

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

Básico

Last command: —
<script setup lang="ts">import { PanelMenu, 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: 'Files',        icon: 'folder',        items: [            { label: 'Documents', icon: 'folderOpen', items: [{ label: 'Invoices', icon: 'file', command: run }, { label: 'Contracts', icon: 'file', command: run }] },            { label: 'Images', icon: 'folderOpen', command: run },            { label: 'Shared', icon: 'externalLink', url: '#' }        ]    },    { label: 'Cloud', icon: 'upload', items: [{ label: 'Upload', icon: 'upload', command: run }, { label: 'Download', icon: 'download', command: run }, { label: 'Sync', icon: 'refresh', command: run }] },    { label: 'Account', icon: 'user', items: [{ label: 'Settings', icon: 'sliders', command: run }, { label: 'Privacy', command: run, disabled: true }] },    { label: 'Sign out', icon: 'arrowRight', command: run }];const expanded = ref<Record<string, boolean>>({ '0': true });</script> <template>    <PanelMenu v-model:expanded-keys="expanded" :model="items" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

Várias abertas

<script setup lang="ts">import { PanelMenu, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    {        label: 'Files',        icon: 'folder',        items: [            { label: 'Documents', icon: 'folderOpen', items: [{ label: 'Invoices', icon: 'file' }, { label: 'Contracts', icon: 'file' }] },            { label: 'Images', icon: 'folderOpen' },            { label: 'Shared', icon: 'externalLink', url: '#' }        ]    },    { label: 'Cloud', icon: 'upload', items: [{ label: 'Upload', icon: 'upload' }, { label: 'Download', icon: 'download' }, { label: 'Sync', icon: 'refresh' }] },    { label: 'Account', icon: 'user', items: [{ label: 'Settings', icon: 'sliders' }, { label: 'Privacy', disabled: true }] },    { label: 'Sign out', icon: 'arrowRight' }];</script> <template>    <PanelMenu :model="items" multiple /></template>

API

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

Props

NomeTipoDescrição
modelMenuItem[]As seções; os `items` de cada seção formam sua árvore, em qualquer profundidade.
multiplebooleanPermite várias seções abertas ao mesmo tempo.

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

Emits

EventoPayloadDescrição
panel-openevent: { originalEvent: Event; item: MenuItem }—
panel-closeevent: { originalEvent: Event; item: MenuItem }—

Slots

NomeProps do slotDescrição
item(props: { item: MenuItem; root: boolean; expanded: boolean; hasSubmenu: boolean })O conteúdo do cabeçalho de uma seção ou de um item.
headericon(props: { item: MenuItem; expanded: boolean })—
submenuicon(props: { item: MenuItem; expanded: boolean })—