componentes
collapse
Timeline é utilizado para demonstrar dados dispostos em ordem.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
open | Show the component; triggers the enter or exit states | false | false | boolean |
timeout | The duration of the transition, in milliseconds. | false | 500 | number |
unmountOnExit | By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting. | false | true | boolean |
children | A function child can be used instead of a React element. This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'), which can be used to apply context specific props to a component. | false | undefined | ReactNode |
*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
| United | Olist Design System |
|---|---|
| children | children |
| in | open |
| timeout | timeout |
| unmountOnExit | unmountOnExit |