wiki-Steps

Ver en Git

---

Steps

El componente Steps permite mostrar una lista de pasos que pueden representar un flujo o proceso. Cada paso incluye un título, descripción, ícono y estado.

Referencia de la API

Props del Componente Steps

Propiedad	Tipo	Requerido	Valor por defecto	Descripción
current	number	No	0	Índice del paso actual.
items	StepItemProps[]	Sí	N/A	Lista de objetos que representan cada paso.
status	'waiting' | 'active' | 'finished' | 'error'	No	'active'	Estado general de los pasos.
onChange	(current: number) => void	No	N/A	Función que se ejecuta cuando cambia el paso actual.
style	CSSProperties	No	N/A	Estilos CSS en línea para el contenedor principal.
aura-test	string	No	'steps'	Identificador para pruebas automatizadas.

Props de StepItemProps (elementos en items)

Propiedad	Tipo	Requerido	Valor por defecto	Descripción
title	string	No	N/A	Título del paso.
description	string	No	N/A	Descripción del paso.
icon	any	No	N/A	Ícono personalizado para el paso.
status	'waiting' | 'active' | 'finished' | 'error'	No	N/A	Estado específico del paso (sobrescribe el estado general).
id	number	Sí	N/A	Identificador único del paso.

Ejemplo de uso

import { Steps } from '@auravant/ui-kit';

const steps = [
 {
 id: 1,
 title: 'Paso 1',
 },
 {
 id: 2,
 title: 'Paso 2',
 },
 {
 id: 3,
 title: 'Paso 3',
 },
];

const handleStepChange = (current: number) => {
 console.log('Paso actual:', current);
};

<Steps
 items={steps}
 current={1}
 onChange={handleStepChange}
 style={{ maxWidth: '600px', margin: '0 auto' }}
/>;