ProgressBar
ProgressBars são componentes utilizados para indicar o status e progresso de algo aos usuários.
Quando usar:
- For necessário transmitir a ideia do progresso de algo.
- For necessário transmitir a ideia do status de algo.
- Se deseja chamar a atenção do usuário para uma informação específica de maneira gráfica.
Quando não usar:
- For necessário criar loaders.
- For necessária muita precisão ao mostrar os números ou progresso.
- For necessário criar steppers.
Uso
js
<CdsProgressBar
showText
:value="0.5"
/>Preview
45%
⚡Nenhum evento foi disparado
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'green' | -- | |
* value (required) | number | 0 | -- | Define o indicador de progresso da ProgressBar. |
showText | boolean | false | -- | Define se a porcentagem vai ser mostrada. |
textAside | boolean | false | -- | Quando true, dispõe o texto à direita. |
textLeft | boolean | false | -- | Quando true, dispõe o texto à esquerda. |
shadeSteps | number | 1 | -- | Ativa shades na progressBar que mudam com o value. Aceita valores de 1 a 5, indicando a quantidade de gradações (shades) aplicadas |
Slots
Nome | Descrição |
|---|---|
#default | Slot padrão da progressBar. Pode ser utilizado para sobrescrever o valor de progresso. |