Descripción general del paso a paso Web Components

El componente paso a paso Web Components proporciona un flujo de trabajo similar a 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. Web Components Stepper tiene múltiples funciones como validación de pasos, estilo, orientación y navegación con teclado.

Web Components Stepper Example

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.

Getting Started with Web Components Stepper

Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

Antes de utilizar IgcStepperComponent, debe registrarlo de la siguiente manera:

import { defineComponents, IgcStepperComponent } from 'igniteui-webcomponents';

defineComponents(IgcStepperComponent);

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

Ahora puedes comenzar con una configuración básica del Web Components IgcStepperComponent y sus pasos.

How To Use Web Components Stepper

El IgcStepComponent es la representación de cada paso que pertenece a el IgcStepperComponent. 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.

Declaring Web Components Stepper

Los pasos se pueden declarar utilizando uno de los siguientes enfoques.

Iterando a través de un conjunto de datos

<igc-stepper>
    ${stepsData.map((step) => html`
    <igc-step .disabled=${step.disabled}>
        <div slot="indicator">
            <igc-icon .iconName=${step.indicator}></igc-icon>
        </div>

        <p slot="title">${step.title}</p>
    </igc-step>
    `
</igc-stepper>

Creando pasos estáticos

<igc-stepper>
    <igc-step>
       <p slot="title">Step 1</p>
    </igc-step>
    <igc-step>
       <p slot="title">Step 2</p>
    </igc-step>
</igc-stepper>

Para cada paso, el usuario tiene la capacidad de configurar el indicador, el título y el subtítulo utilizando las ranuras Indicator, Title y Subtitle de la siguiente manera:

[!Note] The Default IgcStepComponent slot renders the content of the step.

<igc-stepper>
    <igc-step>
       <igc-icon slot="indicator" iconName="home"></igc-icon>
       <p slot="title">Home</p>
       <p slot="subtitle">Home Sub Title</p>
       <div>
          Step Content
       </div>
    </igc-step>
</igc-stepper>

Orientation in Web Components Stepper

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 para la propiedad de orientación IgcStepperComponent. Cuando el paso a paso Web Components está orientado horizontalmente, tiene la oportunidad de determinar si el contenido de los pasos se mostrará encima o debajo de los encabezados de los pasos. Esto podría lograrse configurando la propiedad booleana contentTop IgcStepperComponent, 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.

Step States

Web Components IgcStepperComponent admiten cinco estados de pasos y cada uno de ellos aplica estilos diferentes 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.

Linear Web Components Stepper

El Web Components IgcStepperComponent le brinda la oportunidad de establecer el flujo de sus pasos utilizando la propiedad linear. De forma predeterminada, lineal se establece en falso y el usuario puede seleccionar cualquier paso no deshabilitado en IgcStepperComponent.

<igc-stepper linear="true">
    <igc-step>
       <p slot="title">Step 1</p>
    </igc-step>
    <igc-step>
       <p slot="title">Step 2</p>
    </igc-step>
</igc-stepper>

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.

[!Note] Optional steps validity is not taken into account in order to move forward.

Step Interactions

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.

[!Note] The reset method would reset the stepper to its initial state, i.e. activates the first step. It would not clear the step`s content. This should be done manually.

Customizing the Steps

La Ignite UI for Web Components paso a paso le brinda la posibilidad de configurar diferentes opciones para títulos, indicadores y más.

Esto podría lograrse mediante la propiedad stepType de IgcStepperComponent. 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 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.

[!Note] titlePosition property is applicable only when the stepper stepType property is set to full.

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.

[!Note] This container could be re-templated as per your requirement without any size restrictions. For example, you could add an indicator with size greater than 24 pixels inside it.

El siguiente ejemplo muestra todos los tipos de pasos expuestos y cómo podrían cambiarse:

Stepper Animations

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 según 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.

La Ignite UI for Web Components paso a paso proporciona una rica variedad de interacciones de teclado para el 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 fácil 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

Styling Web Components Stepper

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:

igc-step::part(title) {
    background: #351e65;
}

igc-step::part(subtitle) {
    background: #5f4691;
}