El componente paso a paso de React proporciona un flujo de trabajo similar al de un asistente y se utiliza para mostrar el progreso a través de pasos numerados. Permite a los desarrolladores dividir un contenido extenso en una secuencia de pasos lógicos, lo que ayuda a los usuarios finales a navegar más fácilmente por todo el proceso. El paso a paso React se muestra como una línea vertical u horizontal. El React Stepper tiene múltiples funciones como la validación de pasos, el estilo, la orientación y la navegación con el teclado.
React Ejemplo de Stepper
El siguiente ejemplo de paso a paso de Ignite UI for React muestra el componente en acción. Visualiza el proceso por el que debe pasar un usuario final para configurar los detalles de un pedido, siguiendo varios pasos consecutivos.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con React Stepper
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
A continuación, tendrás que importar el IgrStepper CSS necesario y registrar su módulo, así:
Ahora puede comenzar con una configuración básica del React IgrStepper y sus pasos.
Cómo usar React paso a paso
El IgrStep es la representación de cada paso que pertenece a el IgrStepper. Los pasos proporcionan invalid, active, optional, disabled y complete propiedades, que le permiten configurar los estados de paso según los requisitos de su empresa.
Declarar React paso a paso
Los pasos se pueden declarar utilizando uno de los siguientes enfoques.
Para cada paso, el usuario tiene la capacidad de configurar el indicador, el título y el subtítulo utilizando el botón IgrCarouselIndicator, Title y Subtitle tragamonedas de la siguiente manera:
La ranura IgrStep predeterminada representa el contenido del paso.
<IgrStepper><IgrStep><IgrIconslot="indicator"name="home"collection="material" /><pslot="title">Home</p><pslot="subtitle">Home Sub Title</p><div>
Step Content
...
</div></IgrStep></IgrStepper>tsx
Orientación en React paso a paso
Puede personalizar la orientación del paso a paso a través de la propiedad orientation expuesta. Se puede configurar en horizontal (valor predeterminado) o vertical.
Orientación paso a paso horizontal
horizontal es el valor predeterminado de la IgrStepper propiedad orientation. Cuando el paso a paso de React está orientado horizontalmente, tiene la oportunidad de determinar si el contenido de los pasos se mostrará por encima o por debajo de los encabezados de los pasos. Esto podría lograrse estableciendo el parámetro IgrStepper contentTop booleana, cuyo valor predeterminado es false. En caso de que esté habilitado, el contenido de los pasos se mostrará encima de los encabezados de los pasos.
Orientación vertical del paso a paso
Puede cambiar fácilmente del diseño horizontal al vertical. Para cambiar la orientación predeterminada, debe establecer la propiedad orientation en vertical.
El siguiente ejemplo demuestra cómo se puede cambiar la orientación del paso a paso y la posición de los títulos en tiempo de ejecución.
IgrStepper React admite cinco estados de pasos y cada uno de ellos aplica diferentes estilos de forma predeterminada:
activo: determina si el paso es el que se muestra actualmente. Por diseño, si el usuario no establece explícitamente el atributo activo de algún paso en verdadero, el paso activo inicial sería el primer paso no deshabilitado.
deshabilitado: determina si el paso es intratable. De forma predeterminada, el atributo deshabilitado de un paso se establece en falso.
no válido: determina si el paso es válido. En función de su valor, se decide si el usuario tendrá la capacidad de avanzar en el modo paso a paso lineal. Su valor predeterminado es falso.
Opcional: de forma predeterminada, el atributo opcional de un paso se establece en falso. Si no se requiere la validez de un paso en el paso a paso lineal, entonces se puede habilitar el atributo opcional para poder avanzar independientemente de la validez del paso.
completo: de forma predeterminada, el atributo completo de un paso devuelve falso. Sin embargo, el usuario puede anular este comportamiento completo predeterminado configurando el atributo completo según sea necesario. Cuando el paso se marca como completo, no solo se cambia el estilo del encabezado del paso de forma predeterminada, sino también el estilo de la línea de progreso entre el paso completado y el siguiente.
Paso a paso de React lineal
El React IgrStepper le da la oportunidad de establecer su flujo de pasos mediante la linear propiedad. De forma predeterminada, linear se establece en false y el usuario puede seleccionar cualquier paso no deshabilitado en el IgrStepper.
Cuando la propiedad lineal se establece en true, el paso a paso requerirá que el paso no opcional actual sea válido antes de continuar con el siguiente.
Si el paso no opcional actual no es válido, no podrá avanzar al siguiente paso hasta que valide el actual.
La validez de los pasos opcionales no se tiene en cuenta para seguir adelante.
Interacciones de paso
IgrStepper proporciona los siguientes métodos de API para las interacciones de pasos:
navegar a– activa el paso por índice dado.
siguiente: activa el siguiente paso no deshabilitado.
prev: activa el paso anterior no deshabilitado.
restablecer: restablece el paso a paso a su estado inicial.
El método de reinicio restablecería el paso a paso a su estado inicial, es decir, activa el primer paso. No borraría el contenido del paso. Esto debe hacerse manualmente.
Personalizando los pasos
El Ignite UI for React Stepper te da la posibilidad de configurar diferentes opciones para títulos, indicadores y mucho más.
Esto podría lograrse a través de la stepType propiedad de la IgrStepper. Toma los siguientes valores:
Completo (valor predeterminado)
Indicador
Título
Lleno
Si se definen títulos y subtítulos, con esta configuración se representarán tanto los indicadores como los títulos.
El usuario también tendría la capacidad de definir la posición del título de los pasos, de modo que podría colocarse antes, después, encima o debajo del indicador de paso. El usuario puede configurar la posición del título utilizando la propiedad titlePosition. Toma los siguientes valores:
indefinido (valor predeterminado)
fin
comenzar
abajo
arriba
Cuando el React IgrStepper está orientado horizontalmente y la posición del título no está definida, los títulos se mostrarán debajo de los indicadores.
Cuando la orientación se establece en vertical y la posición del título no está definida, los títulos se mostrarán después de los indicadores.
La propiedad titlePosition solo se aplica cuando la propiedad stepType stepper está configurada como completa.
Indicador
Si desea mostrar solo indicadores para los pasos, configure la opción stepType en indicador.
El indicador de paso admite cualquier contenido, sin embargo, con la restricción de que su tamaño sería siempre de 24 píxeles. Teniendo esto en cuenta, recomendamos usar IgrIcon o IgrAvatar como indicadores de paso.
Título
Si desea mostrar solo títulos para los pasos, configure la opción stepType en título.
De esta manera, si se definen subtítulos, también aparecerán debajo del título del paso.
Este contenedor se puede cambiar de plantilla según sus necesidades sin restricciones de tamaño. Por ejemplo, podría agregar un indicador con un tamaño superior a 24 píxeles en su interior.
El siguiente ejemplo muestra todos los tipos de pasos expuestos y cómo podrían cambiarse:
Las animaciones React IgrStepper brindan a los usuarios finales una hermosa experiencia al interactuar con los pasos definidos. Las opciones de animación disponibles difieren en función de la orientación del paso a paso.
Cuando el paso a paso está orientado horizontalmente, está configurado para usar la slide animación de forma predeterminada. También es compatible fade como alternativa. Las animaciones se configuran a través de la horizontalAnimation entrada.
En un diseño orientado verticalmente, el tipo de animación se puede definir mediante la verticalAnimation propiedad. De forma predeterminada, su valor se establece en grow y el usuario también tiene la capacidad de establecerlo fade.
Establecer none en ambas entradas de tipo de animación deshabilita las animaciones paso a paso.
El IgrStepper componente también le ofrece la posibilidad de configurar la duración de la transición entre los pasos. Esto podría lograrse a través de la animationDuration propiedad, que toma un número como argumento y es común a ambas orientaciones. El valor predeterminado se establece en 320 ms.
El Ignite UI for React Stepper proporciona una gran variedad de interacciones de teclado al usuario final. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios finales navegar fácilmente por los pasos. La navegación React IgrStepper cumple con los estándares de accesibilidad W3 y es cómoda de usar.
Combinaciones de teclas
Tabulador: mueve el foco al siguiente elemento tabulado
Shift + Tab: mueve el foco al elemento tabable anterior
↓: mueve el foco al encabezado del siguiente paso accesible cuando el paso a paso está orientado verticalmente
↑- mueve el foco al encabezado del paso accesible anterior cuando el paso a paso está orientado verticalmente
←: mueve el foco al encabezado del paso accesible anterior en ambas orientaciones
→- mueve el foco al encabezado del siguiente paso accesible en ambas orientaciones
Inicio: mueve el foco al encabezado del PRIMER paso habilitado en el paso a paso.
Fin: mueve el foco al encabezado del ÚLTIMO paso habilitado en el paso a paso.
Intro o Espacio: activa el paso actualmente enfocado
Estilo React paso a paso
Puede cambiar la apariencia de la IgrStep s utilizando algunas de las partes CSS expuestas que se enumeran a continuación:
Nombre de la pieza
Descripción
header-container
Envoltura de la cabecera del paso y sus separadores.
disabled
Indica un estado deshabilitado. Se aplica al contenedor de encabezado.
complete-start
Indica un estado completo del paso actual. Se aplica al contenedor de encabezado.
complete-end
Indica un estado completo del paso anterior. Se aplica al contenedor de encabezado.
optional
Indica un estado opcional. Se aplica al contenedor de encabezado.
invalid
Indica un estado no válido. Se aplica al contenedor de encabezado.
top
Indica que el título debe estar encima del indicador. Se aplica al contenedor de encabezado.
bottom
Indica que el título debe estar debajo del indicador. Se aplica al contenedor de encabezado.
start
Indica que el título debe estar antes del indicador. Se aplica al contenedor de encabezado.
end
Indica que el título debe estar después del indicador. Se aplica al contenedor de encabezado.
header
Envoltorio del indicador y texto del paso.
indicator
El indicador del paso.
text
Envoltorio del título y subtítulo del paso.
empty
Indica que no se ha proporcionado ningún título ni subtítulo al paso. Se aplica al texto.
title
El título del paso.
subtitle
El subtítulo del paso.
body
Envoltorio del contenido del paso.
content
El contenido de los pasos.
Usando estas partes CSS podemos personalizar la apariencia del componente de la IgrStepper siguiente manera: