Componente

Timeline

Uma lista ordenada de eventos unidos por uma linha conectora. Componha cada item a partir de um marcador, conteúdo e um slot oposto opcional; colora e molde os marcadores; disponha-a verticalmente ou horizontalmente; alinhe os itens a um lado ou alterne-os; e torne os itens interativos.

Marcadores, cores e variantes

Taken

Oak leaves photographed in Freiburg.

Edited

Cropped and colour-corrected.

Needs caption

Still waiting for a title.

Archived

Saved to the Herbst album.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import {
  phosphorCheck,
  phosphorLeaf,
  phosphorTag,
  phosphorWarning,
} from '@ng-icons/phosphor-icons/regular';

import { HbTimelineImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-timeline-basic',
  imports: [HbTimelineImports],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorTag, phosphorCheck, phosphorWarning })],
  template: `
    <hb-timeline class="w-full max-w-sm">
      <hb-timeline-item>
        <hb-timeline-marker hbColor="success" hbIcon="phosphorCheck" />
        <hb-timeline-content>
          <p class="font-medium">Taken</p>
          <p class="text-muted-foreground">Oak leaves photographed in Freiburg.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="primary" hbIcon="phosphorLeaf" />
        <hb-timeline-content>
          <p class="font-medium">Edited</p>
          <p class="text-muted-foreground">Cropped and colour-corrected.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="warning" hbVariant="soft" hbIcon="phosphorWarning" />
        <hb-timeline-content>
          <p class="font-medium">Needs caption</p>
          <p class="text-muted-foreground">Still waiting for a title.</p>
        </hb-timeline-content>
      </hb-timeline-item>

      <hb-timeline-item>
        <hb-timeline-marker hbColor="muted" hbVariant="outline" hbIcon="phosphorTag" />
        <hb-timeline-content>
          <p class="font-medium">Archived</p>
          <p class="text-muted-foreground">Saved to the Herbst album.</p>
        </hb-timeline-content>
      </hb-timeline-item>
    </hb-timeline>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTimelineBasicComponent {}

Alternado, oposto e conector

08:00

Set out into the Black Forest.

10:30

Photographed the first oak leaves.

13:00

Stopped for tea in the mist.

16:00

Headed home as the light faded.

Horizontal e interativo

Collect

Press

Mount

Label

Referência de API

hb-timeline

Propriedade	Descrição	Tipo	Padrão
[hbLayout]	Dispõe os itens de cima para baixo ou da esquerda para a direita (a trilha horizontal rola ao transbordar).	'vertical' \| 'horizontal'	'vertical'
[hbAlign]	Lado onde o conteúdo fica. Vertical: left / right / alternate. Horizontal: top / bottom / alternate.	'left' \| 'right' \| 'top' \| 'bottom' \| 'alternate'	'left'

hb-timeline-item

Propriedade	Descrição	Tipo	Padrão
[hbInteractive]	Torna o item um botão focável — adiciona estilo de hover/foco e ativação por teclado.	boolean	false
(hbSelect)	Emite quando um item interativo é clicado ou ativado com Enter/Espaço.	void	—

hb-timeline-marker

Propriedade	Descrição	Tipo	Padrão
[hbColor]	A cor do marcador.	'default' \| 'primary' \| 'success' \| 'warning' \| 'destructive' \| 'muted'	'primary'
[hbVariant]	Estilo de preenchimento: sólido, tingido ou contornado.	'solid' \| 'soft' \| 'outline'	'solid'
[hbIcon]	Nome do ícone a renderizar dentro do marcador; caso contrário usa o conteúdo projetado (ou um ponto simples).	string	''

Slots

Propriedade	Descrição	Tipo	Padrão
hb-timeline-content	O corpo principal do item — título, descrição ou qualquer markup.	component	—
hb-timeline-opposite	Conteúdo secundário do outro lado da linha — tipicamente um horário ou rótulo.	component	—
hb-timeline-connector [class]	Substitui a linha conectora padrão de um item — ex.: para colorir um trecho. O último item oculta seu conector automaticamente.	component	—