componentes

timeline

Timeline é utilizado para demonstrar dados dispostos em ordem.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

items

List of timeline items. You can check the type structure here

trueundefinedITimelineItem[]

orientation

Timeline orientation

falseverticalhorizontalvertical

*valores gerados automaticamente.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Usa os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

Migração do United para Olist Design System

Propriedades

UnitedOlist Design System
children
orientation
items

Propriedades dos Itens da Timeline

UnitedOlist Design System
dotcustomDot
dotColorvariation
leftbefore
rightafter

Propriedades do DoubleDot

UnitedOlist Design System
colorvariation

Variações Existentes

UnitedOlist Design System
primary
danger
success
info
notice
neutral