StepsCircle

El componente StepsCircle presenta una serie de pasos circulares que se pueden recorrer, proporcionando opciones de personalización y control de pasos.

Ejemplo

Importación

Para importar el componente StepsCircle, se puede hacer desde fenextjs

import { StepsCircle } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
className	string	no	""	Clase CSS para el contenedor del componente.
items	StepsCircleItemProps[]	no	[]	Lista de elementos de paso con contenido y funciones de click opcionales.
defaultStep	number	no	undefined	El paso que se mostrará inicialmente.
valueStep	number	no	undefined	Paso actual cuando se controla externamente.
disabled	boolean	no	false	Deshabilita la interacción con el componente.

StepsCircleItemProps

Los items de step tienen su propios parametros:

Parametro	Tipo	Descripción
children	ReactNode	Contenido del elemento.
onClick	function	Funcion al hacer click en el elemento.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Ejemplo básico

<StepsCircle
  items={[{ children: <div>Paso 1</div> }, { children: <div>Paso 2</div> }]}
/>

Con paso predeterminado

<StepsCircle
  items={[{ children: <div>Inicio</div> }, { children: <div>Fin</div> }]}
  defaultStep={0}
/>

Ejemplo con deshabilitación

<StepsCircle
  disabled={true}
  items={[{ children: <div>Paso deshabilitado</div> }]}
/>

Steps Tab