El componente paso a paso de Web Components 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 Web Components se muestra como una línea vertical u horizontal. El Web Components Stepper tiene múltiples funciones como la validación de pasos, el estilo, la orientación y la navegación con el teclado.
Web Components Ejemplo de Stepper
El siguiente ejemplo de paso a paso de Ignite UI for Web Components 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.
<html><head><title>Stepper Linear Example</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-switch>Linear</igc-switch><br /><igc-stepperid="stepper"><igc-stepinvalid><spanslot="title">Personal Info</span><form><igc-inputrequiredlabel="Full Name"type="text"name="fullName"></igc-input><igc-inputrequiredlabel="Email"type="email"name="email"></igc-input><br /><igc-buttonclass="next"onclick="stepper.next()">NEXT</igc-button></form></igc-step><igc-stepinvalid><spanslot="title">Delivery address</span><form><igc-inputrequiredlabel="City"type="text"name="city"></igc-input><igc-inputrequiredlabel="Street"type="text"name="street"></igc-input><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttonclass="next"onclick="stepper.next()">NEXT</igc-button></form></igc-step><igc-stepoptional><spanslot="title">Billing address</span><spanslot="subtitle">(optional)</span><form><igc-inputlabel="City"type="text"name="bill-city"></igc-input><igc-inputlabel="Street"type="text"name="bill-city"></igc-input><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttononclick="stepper.next()">NEXT</igc-button></form></igc-step><igc-stepinvalid><spanslot="title">Payment</span><form><igc-radio-group><igc-radioname="payment"required>PayPal (n@mail.com; 18/02/2021)</igc-radio><igc-radioname="payment"required>Visa (**** **** **** 1234; 12/23)</igc-radio><igc-radioname="payment"required>MasterCard (**** **** **** 5678; 12/24)</igc-radio></igc-radio-group><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttonclass="next"onclick="stepper.next()">SUBMIT</igc-button></form></igc-step><igc-step><spanslot="title">Delivery status</span><p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttononclick="stepper.reset()">RESET</igc-button></igc-step></igc-stepper></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
igc-switch {
margin-left: 0.5rem;
}css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Web Components Stepper
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
Antes de utilizar IgcStepperComponent, debe registrarlo de la siguiente manera:
Para cada paso, el usuario tiene la capacidad de configurar el indicador, el título y el subtítulo utilizando el botón IgcCarouselIndicatorComponent, Title y Subtitle tragamonedas de la siguiente manera:
La ranura Default IgcStepComponent representa el contenido del paso.
<igc-stepper><igc-step><igc-iconslot="indicator"iconName="home"></igc-icon><pslot="title">Home</p><pslot="subtitle">Home Sub Title</p><div>
Step Content
</div></igc-step></igc-stepper>html
Orientación en Web Components 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 IgcStepperComponent propiedad orientation. Cuando el paso a paso de Web Components 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 IgcStepperComponent 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.
<html><head><title>Stepper Title Position And Orientation Example</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="radio-groups"><divclass="radio-group"><label>Title position</label><divclass="radio-group-container"><igc-radio-groupid="titlePosition"alignment="horizontal"><igc-radioname="position"value="top">Top</igc-radio><igc-radioname="position"value="bottom">Bottom</igc-radio><igc-radioname="position"value="start">Start</igc-radio><igc-radioname="position"value="end">End</igc-radio><igc-radioname="position"value=""checked>Default</igc-radio></igc-radio-group></div></div><divclass="radio-group"><label>Orientation</label><divclass="radio-group-container"><igc-radio-groupid="orientation"alignment="horizontal"><igc-radioname="orientation"value="horizontal"checked>Horizontal</igc-radio><igc-radioname="orientation"value="vertical">Vertical</igc-radio></igc-radio-group></div></div></div><igc-stepperid="stepper"><igc-step><spanslot="title">Order</span></br><igc-buttononclick="stepper.next()">NEXT</igc-button></igc-step><igc-step><spanslot="title">Payment</span></br><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttononclick="stepper.next()">NEXT</igc-button></igc-step><igc-step><spanslot="title">Confirmation</span></br><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttononclick="stepper.reset()">RESET</igc-button></igc-step></igc-stepper></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
IgcStepperComponent Web Components 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 Web Components lineal
El Web Components IgcStepperComponent 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 IgcStepperComponent.
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
IgcStepperComponent proporciona los siguientes métodos API para 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 Web Components Stepper te da la posibilidad de configurar diferentes opciones para títulos, indicadores y mucho más.
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 Web Components IgcStepperComponent 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 pasos admite cualquier contenido, pero con la restricción de que su tamaño será siempre de 24 píxeles. Teniendo esto en cuenta, recomendamos utilizar IgcIconComponent o IgcAvatarComponent 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:
<html><head><title>Stepper Step Type Example</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><label>Step type</label><divclass="radio-group-container"><igc-radio-groupid="titlePosition"alignment="horizontal"><igc-radioname="position"value="indicator">Indicator</igc-radio><igc-radioname="position"value="title">Title</igc-radio><igc-radioname="position"value="full"checked>Full</igc-radio></igc-radio-group></div><igc-stepperid="stepper"><igc-step><spanslot="title">Pricing Plan</span></igc-step><igc-step><spanslot="title">Car Details</span></igc-step><igc-step><spanslot="title">Payment</span></igc-step></igc-stepper></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Las animaciones Web Components IgcStepperComponent 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 componente IgcStepperComponent también le brinda la posibilidad de configurar la duración de la transición entre los pasos. Esto podría lograrse mediante la propiedad animationDuration, que toma un número como argumento y es común para ambas orientaciones. El valor predeterminado está establecido en 320 ms.
<html><head><title>Stepper Animations Example</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><section><divid="root"><sectionclass="container sample"><articleclass="settings"><igc-selectid="orientation"label="Orienation"><igc-select-itemvalue="horizontal"selected>Horizontal</igc-select-item><igc-select-itemvalue="vertical">Vertical</igc-select-item></igc-select><igc-selectid="vanimation"label="Vertical Animation"><igc-select-itemvalue="grow"selected>Grow</igc-select-item><igc-select-itemvalue="fade">Fade</igc-select-item><igc-select-itemvalue="none">None</igc-select-item></igc-select><igc-selectid="hanimation"label="Horizontal Animation"><igc-select-itemvalue="slide"selected>Slide</igc-select-item><igc-select-itemvalue="fade">Fade</igc-select-item><igc-select-itemvalue="none">None</igc-select-item></igc-select><igc-inputid="duration"type="number"value="320"label="Duration"><spanslot="suffix">ms</span></igc-input></article><igc-stepperid="stepper"><igc-step><spanslot="title">Personal Info</span><form><igc-inputlabel="Full Name"type="text"name="fullName"></igc-input><igc-inputlabel="Email"type="email"name="email"></igc-input><br /><igc-buttonclass="next"onclick="stepper.next()">NEXT</igc-button></form></igc-step><igc-step><spanslot="title">Delivery address</span><form><igc-inputlabel="City"type="text"name="city"></igc-input><igc-inputlabel="Street"type="text"name="street"></igc-input><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttonclass="next"onclick="stepper.next()">NEXT</igc-button></form></igc-step><igc-step><spanslot="title">Payment</span><form><igc-radio-group><igc-radioname="payment"checked>PayPal (n@mail.com; 18/02/2021)</igc-radio><igc-radioname="payment">Visa (**** **** **** 1234; 12/23)</igc-radio><igc-radioname="payment">MasterCard (**** **** **** 5678; 12/24)</igc-radio></igc-radio-group><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttonclass="next"onclick="stepper.next()">SUBMIT</igc-button></form></igc-step><igc-step><spanslot="title">Delivery status</span><p>Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p><br /><igc-buttononclick="stepper.prev()">PREVIOUS</igc-button><igc-buttononclick="stepper.reset()">RESET</igc-button></igc-step></igc-stepper></div></section><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Navegación por teclado
El Ignite UI for Web Components 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 Web Components IgcStepperComponent 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 Web Components paso a paso
Puede cambiar la apariencia de los IgcStepComponent 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 IgcStepperComponent de esta manera: