componentes
progressbar
É o componente utilizado para demonstrar progresso.
índice
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
currentStep | The current step of the progress bar. | true | undefined | number |
totalSteps | The total number of steps in the progress bar. | true | undefined | number |
variation | The variation of the progress bar. | false | primary | primarysuccess |
label | The label to display above the progress bar. | false | undefined | string |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:
uso
A barra de progresso pode ser utilizada para demonstrar o progresso de uma tarefa ou processo.
guia de conteúdo
- Label: deve ser um texto que indique as etapas do progresso (opcional). Exemplo: "Etapa 1 de 5"
estilos
| estilo | utilização |
|---|---|
| primary | Para representar um progresso comum. |
| success | Pode ser utilizado para indicar a conclusão do progresso. |
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).
conteúdo relacionado
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| backgroundColor | ❌ |
| current | currentStep |
| height | ❌ |
| subtitle | label |
| subtitlePosition | ❌ |
| total | totalSteps |
| variation | variation |
| ❌ | href |
| ❌ | target |
Variações Existentes
| United | Olist Design System |
|---|---|
| primary | primary |
| danger | ❌ |
| alternate | success |
| accent | ❌ |
| warning | ❌ |