Stepper
Steppers são componentes que controlam e exibem tarefas divididas em etapas.
Quando usar:
- For necessário mostrar, de forma visual, o estado e a etapa atual de um stepper.
- Houver um modal com várias etapas.
- Houver uma série de entradas ou ações que desejam mostrar o progresso do seu preenchimento, não importando data e hora dos estados.
Quando não usar:
- Se precisa da cronologia (data, hora) dos steps. Para isso, utilize componente Timeline.
- A ordem das etapas, eventos ou ações não são relevantes.
Uso
js
<CdsStepper
:steps="steps"
:value="4"
/>Preview
Dados da operadora
Bandeira 2
Bandeira 3
4
Bandeira 4
5
Bandeira 5
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* steps (required) | array | [] | -- | Um array com objetos com as propriedades 'label', 'inProcessing', 'error' e 'completed'. A 'label' é o texto que descreve o passo, e as demais props são booleanas e representam o status do passo. |
vertical | boolean | false | -- | Define direção do stepper como vertical, por padrão a direção é horizontal (vertical = false). |
* value (required) | number | 1 | -- | Controla qual step está ativo variando de 1 até o número de steps. |
disableOnClick | boolean | false | -- | Desabilita navegação pelos steps quando setado como `true`. |
Eventos
Nome | Descrição |
|---|---|
@input |