Descripción general del componente paso a paso de Angular

El Ignite UI for Angular Stepper es un componente altamente personalizable que visualiza el contenido como un proceso y muestra su progreso dividiendo el contenido en pasos sucesivos. Aparece como una línea vertical u horizontal. Proporcionado por la biblioteca de componentes de Ignite UI para Angular, el componente paso a paso ofrece un flujo de trabajo similar al de un asistente y múltiples funciones como la validación de pasos, el estilo, la orientación y la navegación con el teclado.

Angular Stepper Example

En este ejemplo de Angular Stepper, puede ver cómo los usuarios tienen la oportunidad de personalizar su tarjeta de crédito y pasan por el proceso en cinco pasos lógicos: seleccionar el tipo de tarjeta, agregar información comercial, completar información personal, proporcionar detalles de envío y confirmación. Tenga en cuenta que el cuarto paso en nuestra demostración de paso a paso Angular se habilita solo si el usuario marca la casilla de verificación en el segundo paso, lo que significa que su dirección postal es diferente de la dirección física de la empresa.

A continuación se muestra un ejemplo que demuestra cómo lograr la funcionalidad anterior utilizando formularios reactivos Angular.

Getting Started with Ignite UI for Angular Stepper

Para comenzar con el componente Ignite UI for Angular Stepper, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxStepperModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxStepperModule } from 'igniteui-angular/stepper';
// import { IgxStepperModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxStepperModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxStepperComponent como una dependencia independiente, o usar elIGX_STEPPER_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
// import { IGX_STEPPER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `<igx-stepper>
        <igx-step> 
            <p igxStepTitle>Step 1</p>
        </igx-step>
        <igx-step> 
            <p igxStepTitle>Step 2</p>
        </igx-step>
    </igx-stepper>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_STEPPER_DIRECTIVES, FormsModule, HammerModule]
    /* or imports: [IgxStepperComponent, FormsModule, HammerModule] */
})
export class HomeComponent {
    public task: Task;
}

Now that you have the Angular Stepper module or directives imported, you can start with a basic configuration of the igx-stepper and its steps. Now that you have the Angular Stepper module or directives imported, you can start with a basic configuration of the igx-stepper and its steps.

Using the Angular Stepper

IgxStepComponent es la representación de cada paso que pertenece al IgxStepperComponent. Los pasos proporcionan propiedades isValid, active, opcional, deshabilitado y completado, que le brindan la posibilidad de configurar los estados de los pasos según los requisitos de su negocio.

Declaring a Stepper

Ahora que hemos importado el módulo paso a paso, comencemos con su configuración.

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

• Iterando a través de un conjunto de datos

<igx-stepper>
    <igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
        <igx-icon igxStepIndicator>
   {{step.indicator}}
        </igx-icon>

        <p igxStepTitle>
   {{step.title}}
        </p>
    </igx-step>
</igx-stepper>

• Creando pasos estáticos

<igx-stepper>
    <igx-step> 
       <p igxStepTitle>Step 1</p>
    </igx-step>
    <igx-step> 
       <p igxStepTitle>Step 2</p>
    </igx-step>
</igx-stepper>

For each step the user has the ability to configure indicator, title, subtitle and content using the igxStepIndicator, igxStepTitle, igxStepSubtitle and igxStepContent directives as follows:

<igx-stepper>
    <igx-step>
       <igx-icon igxStepIndicator>home</igx-icon>
       <p igxStepTitle>Home</p>
       <p igxStepSubtitle>Home Sub Title</p>
       <div igxStepContent>
          ...
       </div>
    </igx-step>
</igx-stepper>

Changing the Stepper Orientation

You can customize the stepper orientation through the exposed orientation property. It takes a member of the IgxStepperOrientation enum - Horizontal (default value) or Vertical.

Orientación paso a paso horizontal

horizontal is the default value for the igx-stepper orientation property. When the stepper is horizontally orientated you have the opportunity to determine whether the steps’ content would be displayed above or below the steps’ headers. This could be achieved by setting the IgxStepperComponent contentTop boolean property, which default value is false. In case it is enabled the steps’ content would be displayed above the steps’ headers.

Orientación vertical del paso a paso

You can easily switch from the horizontal to vertical layout. In order to change the default orientation you should set the orientation property to vertical.

<igx-stepper [orientation]="'vertical'">
 <igx-step>    
    …   
 </igx-step>

 <igx-step>    
    …   
 </igx-step>
</igx-stepper>

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

IgxStepperComponent admite cuatro estados de pasos y cada uno de ellos aplica estilos diferentes de forma predeterminada:

• active - Determines whether the step is the currently displayed. By design, if the user does not explicitly set some step’s active attribute to true, the initial active step would be the first non-disabled step.
• disabled - Determines whether the step is interactable. By default, the disabled attribute of a step is set to false.
• optional - By default, the optional attribute of a step is set to false. If validity of a step in linear stepper is not required, then the optional attribute can be enabled in order to be able to move forward independently from the step validity.
• completed - By default, the completed attribute of a step returns false. The user, however, can override this default completed behavior by setting the completed attribute as needed. When step is marked as completed not only that the style of the step header is changed by default, but also the style of the progress line between the completed step and the next one. Both styles could be modified using the exposed CSS variables.

The IgxStepperComponent gives you the opportunity to set validation logic for each step through the two-way bindable isValid property. Based on its value it is decided whether the user will have the ability to move forward in linear stepper mode. By default, the isValid property of a step is set to true.

Linear Stepper

The igx-stepper gives you the opportunity to set its steps flow using the linear property. By default, linear is set to false and the user is enabled to select any non-disabled step in the IgxStepperComponent.

When the linear property is set to true, the stepper will require the current non-optional step to be valid before proceeding to the next one.

Si el paso no opcional actual no es válido, no podrá avanzar al siguiente paso hasta que valide el actual.

Note

La validez de los pasos opcionales no se tiene en cuenta para seguir adelante.

El siguiente ejemplo demuestra cómo configurar un paso a paso lineal:

Step Interactions

IgxStepperComponent 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

El método de reinicio no borrará el contenido del paso. Esto debe hacerse manualmente.

Customizing the Steps

El Ignite UI for Angular Stepper te da la posibilidad de configurar diferentes opciones para títulos, indicadores y mucho más.

This could be achieved through the stepType property of the IgxStepperComponent. It takes a member of the IgxStepType enum:

• 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.

The user would also have the ability to define the position of the title for the steps, so it could be placed before, after, above or below the step indicator. The user can configure the title position using the titlePosition property. Both properties take member of IgxStepperTitlePosition enum:

• fin
• comenzar
• abajo
• arriba

When the igx-stepper is horizontally orientated, the title position default value is bottom.

When the orientation is set to vertical layout the title position by default is end.

Note

titlePosition property is applicable only when the stepper stepType property is set to full.

Indicador

If you want to display only indicators for the steps, set the stepType option to indicator.

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 IgxIconComponent o IgxAvatarComponent como indicadores de pasos.

Título

If you want to display only titles for the steps, set the stepType option to title.

De esta manera, si se definen subtítulos, también aparecerán debajo del título del paso.

Note

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:

The IgxStepperComponent also allows you to customize the rendered indicators for active, invalid and completed steps. This could be achieved through the igxStepActiveIndicator, igxStepInvalidIndicator and igxStepCompletedIndicator directives:

<igx-stepper>
    <ng-template igxStepActiveIndicator>
       <igx-icon>edit</igx-icon>
    </ng-template>

    <ng-template igxStepInvalidIndicator>
       <igx-icon>error</igx-icon>
    </ng-template>

    <ng-template igxStepCompletedIndicator>
       <igx-icon>check</igx-icon>
    </ng-template>
    ...
</igx-stepper>

Note

Estas plantillas se aplicarían para todos los pasos con el estado correspondiente.

Angular Stepper Animations

Angular animaciones paso a paso 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.

When the stepper is horizontally orientated, it is configured to use the slide animation by default. It also supports fade as an alternative. The animations are configured through the horizontalAnimationType input.

In vertically orientated layout, the animation type could be defined using the verticalAnimationType property. By default, its value is grow and the user has the ability to set it to fade as well.

Setting none to the both animation type inputs disables stepper animations.

IgxStepperComponent 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.

Keyboard Navigation

Angular Stepper proporciona una amplia 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 IgxStepperComponent 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
• Arrow Down - moves the focus to the header of the next accessible step when the igx-stepper is vertically orientated
• Arrow Up - moves the focus to the header of the previous accessible step when the igx-stepper is vertically orientated
• Flecha hacia la izquierda: mueve el foco al encabezado del paso accesible anterior en ambas orientaciones.
• Flecha hacia la derecha: mueve el foco al encabezado del siguiente paso accesible en ambas orientaciones.
• Home - moves the focus to the header of the FIRST enabled step in the igx-stepper
• End - moves the focus to the header of the LAST enabled step in the igx-stepper
• Intro/Espacio: activa el paso actualmente enfocado

Note

By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container [tabIndex]="-1".

El componente Stepper también está disponible en el App Builder ™ de low-code, arrastrar y soltar.

Angular Stepper Styling

Stepper Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Propiedad principal	Propiedad dependiente	Descripción
$step antecedentes	$step-hover-background	El trasfondo del encabezado escalonado en el hover
	$step-foco-fondo	El trasfondo del encabezado de paso en el enfoque
	$indicator fondo	El color de fondo del indicador de escalones
	$title-color	El color del título del escalón
	$subtitle color	El color del subtítulo de paso
	$current-trasfondo	El trasfondo del encabezado de paso actual
	$invalid-trasfondo	El trasfondo del encabezado de paso inválido
	$complete-trasfondo	El trasfondo del encabezado de paso completo
	$disabled-indicador-fondo	El fondo indicador del escalón deshabilitado
	$disabled-título-color	El color del título del escalón para discapacitados
	$disabled-subtítulos-color	El color del subtítulo del escalón para desactivados
	$step-separador-color	El color del borde del separador entre pasos
$indicator fondo	$indicator esquema	El color del contorno del indicador de escalones
	$indicator color	El color del texto del indicador de pasos
$current-trasfondo	$current-paso-paso-hover-fondo	El trasfondo del encabezado de paso actual en el vuelo intermedio
	$current-paso-foco-fondo	El trasfondo del encabezado actual de pasos en el enfoque
	$current-indicador-fondo	El color de fondo del indicador de escalones actual
	$current-color del título	El color del título actual del escalón
	$current-subtítulo-color	El color del subtítulo actual del paso
$invalid-indicador-fondo	$invalid-esquema indicador	El color del contorno del indicador de paso inválido
	$invalid-color-indicador	El color del indicador de paso inválido
	$invalid-título-color	El color del título de escalón inválido
	$invalid-subtítulos-color	El color del subtítulo de paso inválido
	$invalid-título-hover-color	El color del título de paso inválido al pasar el cursor
	$invalid-subtítulos-hover-color	El color del subtítulo step inválido al pasar el cursor
	$invalid-título-enfoque-color	El color del título de paso inválido en el enfoque
	$invalid-subtítulos-enfoque-color	El color del subtítulo de paso inválido sobre el enfoque
$complete-trasfondo	$complete-paso-flotador-fondo	El trasfondo del encabezado step completo en el paso flotante
	$complete-paso-foco-fondo	El contexto del encabezado completo de pasos sobre el enfoque
	$complete-indicador-fondo	El color de fondo del indicador de escalones completos
	$complete-color-indicador	El color del indicador de pasos completado
	$complete-título-color	El color del título completo del paso
	$complete-subtítulos-color	El color del subtítulo completo del paso
	$complete-título-hover-color	El color del título completo del paso en el paso flotante
	$complete-subtítulos-hover-color	El color del subtítulo completo del paso al pasar el cursor
	$complete-título-foco-color	El color del título completo del paso sobre el enfoque
	$complete-subtítulos-enfoque-color	El color del subtítulo completo del paso sobre el enfoque

Using the Ignite UI for Angular Theming, we can greatly alter the igx-stepper appearance.

First, in order to use the functions exposed by the theme engine, we need to import the index file in our style file:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el tema paso a paso y proporciona solo algunos parámetros básicos. El tema generará automáticamente todos los estilos requeridos, incluidos los colores específicos del estado y los primeros planos contrastantes accesibles. También puede anular cualquiera de los parámetros disponibles si desea tener más control sobre la apariencia.

$stepper-theme: stepper-theme(
  $step-background: #351e65,
  $current-indicator-background: #f6cd28,

  $border-radius-step-header: 16px,
  $border-radius-indicator: 10px 4px 10px 4px,
);

El último paso es incluir el tema del componente.

@include css-vars($custom-stepper-theme);

Demo

En el ejemplo siguiente se muestra un estilo sencillo aplicado a través de la Ignite UI for Angular Tema.

Styling with Tailwind

Puedes diseñar el stepper usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

• Usalight-* clases para el tema ligero.
• Usadark-* clases para el tema oscuro.
• Añadir el nombre del componente después del prefijo, por ejemplo, ,light-stepper,dark-stepper.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de paso a paso. La sintaxis es la siguiente:

<igx-stepper
  class="!light-stepper ![--step-background:#7B9E89] ![--border-radius-step-header:6px]">
  ...
</igx-stepper>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tu motor paso a paso debería verse así:

API Reference

• Componente IgxStepper
• ComponenteIgxStep

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub