Pasos
Crea procedimientos numerados paso a paso con el componente steps para guiar a los usuarios en tareas secuenciales, tutoriales y configuraciones.
Usa pasos para mostrar una serie de acciones o eventos secuenciales. Puedes agregar tantos pasos como necesites.
Primer paso
Estas son instrucciones o contenido que solo corresponden al primer paso.
Segundo paso
Estas son instrucciones o contenido que solo corresponden al segundo paso.
Tercer paso
Estas son instrucciones o contenido que solo corresponden al tercer paso.
<Steps>
<Step title="Primer paso">
Estas son instrucciones o contenido que solo corresponden al primer paso.
</Step>
<Step title="Segundo paso">
Estas son instrucciones o contenido que solo corresponden al segundo paso.
</Step>
<Step title="Tercer paso">
Estas son instrucciones o contenido que solo corresponden al tercer paso.
</Step>
</Steps>childrenReactElement<StepProps>[]requiredUna lista de componentes Step.
titleSizestringdefault: pEl tamaño de los títulos de los pasos. Uno de p, h2, h3 y h4.
titlestringrequiredEl título es el texto principal del paso y aparece junto al indicador.
childrenstring | ReactNodeEl contenido de un paso, ya sea texto sin formato o componentes.
iconstringEl ícono que se mostrará.
Opciones:
- Nombre del ícono de Font Awesome, si tienes la propiedad
icons.libraryconfigurada comofontawesomeen tudocs.json - Nombre del ícono de Lucide, si tienes la propiedad
icons.libraryconfigurada comolucideen tudocs.json - Nombre del ícono de Tabler, si tienes la propiedad
icons.libraryconfigurada comotableren tudocs.json - URL de un ícono alojado externamente
- Ruta a un archivo de ícono en tu proyecto
- Código SVG envuelto entre llaves
Para íconos SVG personalizados:
- Convierte tu SVG con el convertidor de SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida de JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
iconTypestringEl estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.
Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
stepNumbernumberEl número del paso.
titleSizestringdefault: pel tamaño de los títulos de los paso. uno de p, h2, h3 y h4.
idstringUn ID personalizado para el paso, usado para enlaces de anclaje y la navegación de la tabla de contenido.
noAnchorbooleandefault: falseSi se debe ocultar el enlace de anclaje del paso.