Timeline

Timelines são componentes utilizados para apresentar informações em ordem cronológica.

---

Quando usar:

• Se há um conjunto de informações que pode ser categorizado por data.

Quando não usar:

• Se precisa de um componente de stepper.
• A ordem das informações que você está apresentando é irrelevante.

Observações:

• O componente Timeline é um wrapper e é utilizado para agrupar uma série de TimelineItems em um mesmo compoente via slots. Para mais informações acesse a documentação do componente.

---

Uso

<CdsTimeline
	:reverse="false"
>
	<CdsTimelineItem variant="blue" loading>
		<template #title>
			Item 1
		</template>
		<template #content>
			Desta maneira, a determinação clara de objetivos estimula
			a padronização das novas proposições.
		</template>
	</CdsTimelineItem> 
	<CdsTimelineItem variant="blue">
		<template #title>
			Item 2
		</template>
		<template #content>
			O que temos que ter sempre em mente é que o consenso sobre
			a necessidade de qualificação assume importantes posições
			no estabelecimento das regras de conduta normativas.
		</template>
	</CdsTimelineItem>
	<CdsTimelineItem variant="blue">
		<template #title>
			Item 3
		</template>
		<template #content>
			A prática cotidiana prova que a complexidade dos estudos
			efetuados estimula a padronização dos paradigmas corporativos.
		</template>
	</CdsTimelineItem>
</CdsTimeline>

---

Preview

Item 1

Desta maneira, a determinação clara de objetivos estimula a padronização das novas proposições.

Item 2

O que temos que ter sempre em mente é que o consenso sobre a necessidade de qualificação assume importantes posições no estabelecimento das regras de conduta normativas.

Item 3

A prática cotidiana prova que a complexidade dos estudos efetuados estimula a padronização dos paradigmas corporativos.

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
reverse	boolean	false	--	Inverte a ordem dos elementos da Timeline.

Slots

Nome	Descrição
#default	Conteúdo a ser colocar na Timeline. Suporta o `TimelineItem` como subcomponente.