Descripción general de Blazor Stepper

    El componente paso a paso de Blazor 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 Blazor se muestra como una línea vertical u horizontal. El Blazor Stepper tiene múltiples funciones como la validación de pasos, el estilo, la orientación y la navegación con el teclado.

    Ejemplo de Blazor Stepper

    El siguiente ejemplo Ignite UI for Blazor Stepper muestra el componente en acción. Visualiza el proceso que debe seguir un usuario final para configurar los detalles de un pedido, siguiendo varios pasos consecutivos.

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Introducción a Blazor Stepper

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
        typeof(IgbStepperModule)
    );
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbStepper componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor

    Ahora puede comenzar con una configuración básica del Blazor IgbStepper y sus pasos.

    Cómo utilizar Blazor Stepper

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

    Declarando Blazor Stepper

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

    • Iterando a través de un conjunto de datos
    <IgbStepper>
        @foreach (var item in this.StepsData)
        {
            <IgbStep Disabled="@item.Disabled">
              <p slot="title">@item.Title</p>
            </IgbStep>
        }
    </IgbStepper>
    razor
    • Creando pasos estáticos
    <IgbStepper>
        <IgbStep>
           <p slot="title">Step 1</p>
        </IgbStep>
         <IgbStep>
           <p slot="title">Step 2</p>
        </IgbStep>
    </IgbStepper>
    razor

    Para cada paso, el usuario tiene la capacidad de configurar el indicador, el título y el subtítulo utilizando el botón IgbCarouselIndicator, Title y Subtitle tragamonedas de la siguiente manera:

    La ranura IgbStep predeterminada representa el contenido del paso.

    <IgbStepper>
        <IgbStep>
           <IgbIcon slot="indicator" IconName="home" Collection="material" />
           <p slot="title">Home</p>
           <p slot="subtitle">Home Sub Title</p>
           <div>
              Step Content
              ...
           </div>
        </IgbStep>
    </IgbStepper>
    razor

    Orientación en Blazor 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 de la IgbStepper propiedad orientation. Cuando el paso a paso de Blazor 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 IgbStepper ​ ​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.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Estados de paso

    IgbStepper Blazor 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.

    Blazor lineal paso a paso

    El Blazor IgbStepper 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 IgbStepper.

    <IgbStepper Linear="true">
        <IgbStep>
           <p slot="title">Step 1</p>
        </IgbStep>
         <IgbStep>
           <p slot="title">Step 2</p>
        </IgbStep>
    </IgbStepper>
    razor

    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

    IgbStepper 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

    La Ignite UI for Blazor Stepper le brinda la posibilidad de configurar diferentes opciones para títulos, indicadores y más.

    Esto podría lograrse mediante la propiedad StepType de IgbStepper. 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 Blazor IgbStepper 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 IgbIcon o IgbAvatar 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:

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Animaciones paso a paso

    Las animaciones Blazor IgbStepper brindan a los usuarios finales una hermosa experiencia de interacción con los pasos definidos. Las opciones de animación disponibles difieren según la orientación del stepper.

    Cuando el paso a paso está orientado horizontalmente, está configurado para usar la slide animación de forma predeterminada. También apoya 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 podría definirse 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 IgbStepper 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.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Navegación por teclado

    El Ignite UI for Blazor 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 Blazor IgbStepper 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 Blazor Stepper

    Puede cambiar la apariencia de los IgbStep 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 IgbStepper de esta manera:

    igc-step::part(title) {
        background: #351e65;
    }
    
    igc-step::part(subtitle) {
        background: #5f4691;
    }
    css

    Referencias de API

    Recursos adicionales