Progress Steps
Se utiliza para indicar el progreso a través de un proceso de varios pasos con barras de progreso
Paso 1
Paso 2
Paso 3
Paso 4
Horizontal
Por defecto, los pasos se muestran en orientación horizontal.
Datos personales
Datos de contacto
Información del empleado
Documentos
Vertical
Utiliza la propiedad orientation="vertical" para mostrar los pasos en orientación vertical.
Datos personales
Datos de contacto
Información del empleado
Documentos
Tamaños
Utiliza la propiedad size para cambiar el tamaño de los indicadores de paso.
Paso 1
Paso 2
Paso 3
Paso 1
Paso 2
Paso 3
Paletas de Color
Utiliza la propiedad colorPallete para cambiar el esquema de colores.
Primary
Primary
Primary
Green
Green
Green
Estado Deshabilitado
Utiliza la propiedad disabled en cada Step para deshabilitar un paso.
Paso 1
Paso 2
Paso 3
Contenido Adicional
Puedes agregar contenido adicional a cada paso utilizando la propiedad content, puedes pasar un string o un Nodo de React.
Paso 1
Descripción del paso 1
Paso 2
Descripción del paso 2
Paso 3
Personalización del Label
Puedes personalizar el label de cada paso enviando un Nodo de React para incluir iconos, estilos personalizados u otros componentes.
Estado Completado
Utiliza la propiedad completed en ProgressSteps para marcar todos los pasos como completados.
Paso 1
Paso 2
Paso 3
Controlado
Utiliza las propiedades step y completed para controlar el estado del componente
Paso 1
Paso 1 body
Paso 2
Paso 2 body
Paso 3
Paso 3 body
Iconos Personalizados
Puedes personalizar los iconos de cada paso utilizando la propiedad icon. Puedes pasar un icono único o un objeto con iconos diferentes para estados completados y no completados.
Paso 1
Paso 2
Paso 3
Props
ProgressSteps
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
step | number | - | El índice del paso actual activo (basado en 1). |
count | number | - | El número total de pasos. |
orientation | 'horizontal' | 'vertical' | - | La orientación de los pasos. |
size | 'small' | 'medium' | - | El tamaño de los indicadores de paso. |
colorPallete | 'primary' | 'green' | - | La paleta de colores utilizada. |
completed | boolean | - | Indica si todos los pasos están completados. |
classNames | object | - | Clases personalizadas para diferentes partes del componente. |
children | ReactNode | - | Los componentes Step que representan cada paso. |
Step
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
index | number | - | El índice del paso (basado en 1). |
label | string | ReactNode | - | La etiqueta del paso. Puede ser un string o ReactNode. |
content | string | ReactNode | - | El contenido adicional del paso. Puede ser un string o ReactNode. |
icon | ReactNode | { completed?: ReactNode; uncompleted?: ReactNode } | - | El icono del paso. Puede ser un ReactNode único o un objeto con iconos para estados completados y no completados. |
disabled | boolean | - | Indica si el paso está deshabilitado. |
onIndicatorClick | () => void | - | Función que se ejecuta cuando se hace clic en el indicador del paso. |