Vitral 0.2
Dados

Timeline

Eventos sobre um eixo, descendo a página ou atravessando-a, com o conteúdo de um lado, do outro ou alternando.

Testado com WAI-ARIA

Importação

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

Conteúdo oposto

  1. 15/10/2026 10:30
    Ordered
  2. 15/10/2026 14:00
    Processing
  3. 16/10/2026 16:15
    Shipped
  4. 18/10/2026 10:00
    Delivered
<script setup lang="ts">import { Timeline } from '@vitral/vue'; const events = [    { status: 'Ordered', date: '15/10/2026 10:30', icon: 'file' },    { status: 'Processing', date: '15/10/2026 14:00', icon: 'refresh' },    { status: 'Shipped', date: '16/10/2026 16:15', icon: 'upload' },    { status: 'Delivered', date: '18/10/2026 10:00', icon: 'check' }];</script> <template>    <Timeline :value="events" aria-label="Order history" style="width: 100%">        <template #opposite="{ item }">            <small style="color: var(--vt-text-muted-color)">{{ (item as { date: string }).date }}</small>        </template>        <template #content="{ item }">{{ (item as { status: string }).status }}</template>    </Timeline></template>

Alternado, com ícones

  1. Ordered
    15/10/2026 10:30
  2. Processing
    15/10/2026 14:00
  3. Shipped
    16/10/2026 16:15
  4. Delivered
    18/10/2026 10:00
<script setup lang="ts">import { Icon, Timeline } from '@vitral/vue'; const events = [    { status: 'Ordered', date: '15/10/2026 10:30', icon: 'file' },    { status: 'Processing', date: '15/10/2026 14:00', icon: 'refresh' },    { status: 'Shipped', date: '16/10/2026 16:15', icon: 'upload' },    { status: 'Delivered', date: '18/10/2026 10:00', icon: 'check' }];</script> <template>    <Timeline :value="events" align="alternate" aria-label="Order history, alternating" style="width: 100%">        <template #marker="{ item }">            <span style="display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--vt-primary-contrast-color); background: var(--vt-primary-color)">                <Icon :icon="(item as { icon: string }).icon" />            </span>        </template>        <template #content="{ item }">            <strong>{{ (item as { status: string }).status }}</strong>            <div style="font-size: 0.75rem; color: var(--vt-text-muted-color)">{{ (item as { date: string }).date }}</div>        </template>    </Timeline></template>

Horizontal

  1. Ordered
  2. Processing
  3. Shipped
  4. Delivered
<script setup lang="ts">import { Timeline } from '@vitral/vue'; const events = [    { status: 'Ordered', date: '15/10/2026 10:30', icon: 'file' },    { status: 'Processing', date: '15/10/2026 14:00', icon: 'refresh' },    { status: 'Shipped', date: '16/10/2026 16:15', icon: 'upload' },    { status: 'Delivered', date: '18/10/2026 10:00', icon: 'check' }];</script> <template>    <Timeline :value="events" layout="horizontal" align="top" aria-label="Order steps" style="width: 100%">        <template #content="{ item }">{{ (item as { status: string }).status }}</template>    </Timeline></template>

API

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

Props

NomeTipoDescrição
valueany[]Os eventos, em ordem.
align'left' | 'right' | 'alternate' | 'top' | 'bottom'De que lado fica o conteúdo: `left`, `right` ou `alternate` na vertical; `top`, `bottom` ou `alternate` na horizontal.
layout'vertical' | 'horizontal'Eventos descendo a página (o padrão) ou atravessando-a.
dataKeystringUm campo que identifica um evento.

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

Slots

NomeProps do slotDescrição
content(props: { item: unknown; index: number })O conteúdo de um evento.
opposite(props: { item: unknown; index: number })O que fica do outro lado do eixo em relação ao conteúdo: uma data, por exemplo.
marker(props: { item: unknown; index: number })Substitui o marcador.
connector(props: { item: unknown; index: number })Substitui a linha até o próximo evento.

Usado nestes templates