Estructura y Layout
Steps
Un componente indicador de pasos para flujos multi-paso con variantes de circulos con texto y simple.
Tests
0%
Uso
El componente SSteps renderiza un indicador de progreso paso a paso. Coloca hijos SStepsItem dentro con status establecido en complete, current o upcoming.
Variantes
Usa la prop variant para alternar entre los estilos circlesWithText (por defecto) y simple.
Arreglo de Pasos
Alternativamente, pasa un arreglo de objetos de pasos mediante la prop steps en lugar de usar hijos SStepsItem.
Props
SSteps
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
variant | 'circlesWithText' | 'simple' | 'circlesWithText' | La variante de estilo visual |
steps | TStepsItemsProps[] | [] | Arreglo de objetos de pasos (alternativa al uso de slots) |
SStepsItem
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
status | 'complete' | 'current' | 'upcoming' | - | El estado actual del paso |
href | string | - | La URL del enlace para el paso |
name | string | - | El texto del titulo del paso |
description | string | - | El texto de descripcion del paso |
last | boolean | false | Marca el ultimo paso (oculta la linea de conexion) |
Slots
SSteps
| Nombre | Descripcion |
|---|---|
default | Componentes SStepsItem que definen cada paso |
SStepsItem
| Nombre | Descripcion |
|---|---|
default | Contenido personalizado del nombre del paso |
description | Contenido personalizado de la descripcion del paso |