Vitral 0.2
Menu

Dock

Uma faixa de ícones grandes que crescem sob o ponteiro, cada um com seu rótulo num tooltip.

Testado com WAI-ARIA

Importação

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

Embaixo

Last opened: —
<script setup lang="ts">import { Dock, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');const apps: MenuItem[] = [    { label: 'Files', icon: 'folder', command: run },    { label: 'Calendar', icon: 'calendar', command: run },    { label: 'Notifications', icon: 'bell', command: run },    { label: 'Settings', icon: 'sliders', command: run },    { label: 'Downloads', icon: 'download', command: run },    { label: 'Trash', icon: 'trash', command: run }];</script> <template>    <div style="display: flex; align-items: flex-end; justify-content: center; height: 10rem; border-radius: 8px; background: linear-gradient(135deg, var(--vt-primary-100), var(--vt-primary-300))">        <Dock :model="apps" aria-label="Apps" style="margin-bottom: 0.75rem" />    </div>    <small style="color: var(--vt-text-muted-color)">Last opened: {{ last }}</small></template>

À esquerda

<script setup lang="ts">import { Dock, type MenuItem } from '@vitral/vue'; const apps: MenuItem[] = [    { label: 'Files', icon: 'folder' },    { label: 'Calendar', icon: 'calendar' },    { label: 'Notifications', icon: 'bell' },    { label: 'Settings', icon: 'sliders' },    { label: 'Downloads', icon: 'download' },    { label: 'Trash', icon: 'trash' }];</script> <template>    <Dock :model="apps" position="left" aria-label="Apps (vertical)" /></template>

API

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

Props

NomeTipoDescrição
modelMenuItem[]Os itens; o `label` de cada item lhe dá nome e aparece como tooltip.
position'bottom' | 'top' | 'left' | 'right'A borda em que fica. O padrão é `'bottom'`.
magnificationbooleanAumenta os itens sob o ponteiro. O padrão é true.
ariaLabelstringDá nome ao dock.
ariaLabelledbystring—

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

Slots

NomeProps do slotDescrição
item(props: { item: MenuItem; index: number })O conteúdo de um item: um ícone ou uma imagem.