Visão geral do componente Angular Stepper

O Ignite UI for Angular Stepper é um componente altamente personalizável que visualiza o conteúdo como um processo e mostra seu progresso dividindo o conteúdo em etapas sucessivas. Ele aparece como uma linha vertical ou horizontal. Fornecido pela biblioteca de componentes Ignite UI para Angular, o componente stepper fornece um fluxo de trabalho semelhante a um assistente e vários recursos como validação de etapas, estilo, orientação e navegação por teclado.

Angular Stepper Example

Neste exemplo Angular Stepper, você pode ver como os usuários têm a oportunidade de personalizar seus cartões de crédito e passam pelo processo em cinco etapas lógicas - selecionando o tipo de cartão, adicionando informações comerciais, preenchendo informações pessoais, fornecendo detalhes de envio e confirmação. Observe que a quarta etapa em nossa demonstração Angular Stepper é habilitada somente se o usuário marcar a caixa de seleção na segunda etapa, significando que seu endereço de correspondência é diferente do endereço físico comercial.

Aqui está um exemplo demonstrando como obter a funcionalidade acima usando Angular Reactive Forms.

Getting Started with Ignite UI for Angular Stepper

Para começar a usar o componente Ignite UI for Angular Stepper, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxStepperModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Como alternativa, a partir da 16.0.0, você pode importar o IgxStepperComponent como uma dependência autônoma ou usar o token IGX_STEPPER_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular';
// 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;
}

Agora que você importou o módulo ou as diretivas Angular Stepper, você pode começar com uma configuração básica do igx-stepper e seus passos. Agora que você importou o módulo ou as diretivas Angular Stepper, você pode começar com uma configuração básica do igx-stepper e seus passos.

Using the Angular Stepper

IgxStepComponent é a representação de cada etapa que pertence ao IgxStepperComponent. As etapas fornecem propriedades isValid, active, optional, disabled e completed, que lhe dão a capacidade de configurar os estados das etapas de acordo com seus requisitos comerciais.

Declaring a Stepper

Agora que importamos o módulo stepper, vamos começar com sua configuração.

As etapas podem ser declaradas usando uma das seguintes abordagens.

Iterando por um conjunto de dados

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

Criando etapas estáticas

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

Para cada etapa, o usuário tem a capacidade de configurar o indicador, título, subtítulo e conteúdo usando as diretivas igxStepIndicator, igxStepTitle, igxStepSubtitle e igxStepContent da seguinte forma:

<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

Você pode personalizar a orientação do stepper por meio da propriedade de orientação exposta. Ela pega um membro do enum IgxStepperOrientation-Horizontal (valor padrão) ou Vertical.

Orientação do Stepper Horizontal

horizontal é o valor padrão para o igx-stepper orientação propriedade. Quando o stepper é orientado horizontalmente, você tem a oportunidade de determinar se o conteúdo dos passos seria exibido acima ou abaixo dos cabeçalhos dos passos. Isso pode ser obtido definindo o Componente IgxStepper conteúdoTopo propriedade booleana, cujo valor padrão é false. Caso esteja habilitado, o conteúdo das etapas será exibido acima dos cabeçalhos das etapas.

Orientação do Stepper Vertical

Você pode alternar facilmente do layout horizontal para o vertical. Para alterar a orientação padrão, você deve definir a propriedade orientation para vertical.

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

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

O exemplo abaixo demonstra como a orientação do stepper e a posição dos títulos podem ser alteradas em tempo de execução.

Step States

O IgxStepperComponent suporta quatro estados de etapas e cada um deles aplica estilos diferentes por padrão:

active- Determina se o passo é o exibido no momento. Por design, se o usuário não definir explicitamente o atributo active de algum passo como true, o passo ativo inicial seria o primeiro passo não desabilitado.
disabled- Determina se o passo é interativo. Por padrão, o atributo disabled de um passo é definido como false.
opcional- Por padrão, o atributo opcional de um passo é definido como false. Se a validade de um passo no linear stepper não for necessária, então o atributo opcional pode ser habilitado para poder avançar independentemente da validade do passo.
concluído- Por padrão, o atributo concluído de uma etapa retorna false. O usuário, no entanto, pode substituir esse comportamento concluído padrão definindo o atributo concluído conforme necessário. Quando a etapa é marcada como concluída, não apenas o estilo do cabeçalho da etapa é alterado por padrão, mas também o estilo da linha de progresso entre a etapa concluída e a próxima. Ambos os estilos podem ser modificados usando as variáveis CSS expostas .

O IgxStepperComponent dá a você a oportunidade de definir a lógica de validação para cada etapa por meio da propriedade bidirecional isValid vinculável. Com base em seu valor, é decidido se o usuário terá a capacidade de avançar no modo linear stepper. Por padrão, a propriedade isValid de uma etapa é definida como true.

Linear Stepper

O igx-stepper dá a você a oportunidade de definir o fluxo de seus passos usando a propriedade linear. Por padrão, linear é definido como false e o usuário é habilitado a selecionar qualquer passo não desabilitado no IgxStepperComponent.

Quando a propriedade linear é definida como true, o stepper exigirá que o passo não opcional atual seja válido antes de prosseguir para o próximo.

Se a etapa não opcional atual não for válida, você não poderá prosseguir para a próxima etapa até validar a atual.

Note

A validade das etapas opcionais não é levada em consideração para avançar.

O exemplo a seguir demonstra como configurar um motor de passo linear:

Step Interactions

IgxStepperComponent fornece os seguintes métodos de API para interações em etapas:

navigateTo– ativa o passo pelo índice fornecido.
próximo- ativa o próximo passo não desabilitado.
prev– ativa a etapa anterior não desabilitada.
reset– redefine o motor de passo para seu estado inicial.

Note

O método reset não limparia o conteúdo do passo. Isso deve ser feito manualmente.

Customizing the Steps

A Ignite UI for Angular Stepper permite que você configure diferentes opções para títulos, indicadores e muito mais.

Isso pode ser alcançado por meio da propriedade stepType do IgxStepperComponent. Ele pega um membro do enum IgxStepType:

Completo (valor padrão)
Indicador
Título

Completo

Se títulos e subtítulos forem definidos, com esta configuração tanto indicadores quanto títulos serão renderizados.

O usuário também teria a capacidade de definir a posição do título para os passos, para que ele pudesse ser colocado antes, depois, acima ou abaixo do indicador de passo. O usuário pode configurar a posição do título usando a propriedade titlePosition. Ambas as propriedades pegam o membro do enum IgxStepperTitlePosition:

fim
começar
fundo
principal

Quando o igx-stepper é orientado horizontalmente, o valor padrão da posição do título é bottom.

Quando a orientação é definida como layout vertical, a posição padrão do título é end.

Note

A propriedade titlePosition é aplicável somente quando a propriedade stepType do stepper está definida como full.

Indicador

Se você quiser exibir apenas indicadores para as etapas, defina a opção stepType como indicator.

O indicador de passo suporta qualquer conteúdo, porém com a restrição de que seu tamanho seria sempre 24 pixels. Tendo isso em mente, recomendamos usar IgxIconComponent ou IgxAvatarComponent como indicadores de passo.

Título

Se você quiser exibir apenas títulos para as etapas, defina a opção stepType como title.

Dessa forma, se forem definidas legendas, elas também serão renderizadas abaixo do título da etapa.

Note

Este contêiner pode ser re-templateado conforme sua necessidade, sem nenhuma restrição de tamanho. Por exemplo, você pode adicionar um indicador com tamanho maior que 24 pixels dentro dele.

O exemplo abaixo demonstra todos os tipos de etapas expostas e como elas podem ser alteradas:

O IgxStepperComponent também permite que você personalize os indicadores renderizados para etapas ativas, inválidas e concluídas. Isso pode ser obtido por meio das diretivas igxStepActiveIndicator, igxStepInvalidIndicator e igxStepCompletedIndicator:

<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

Esses modelos seriam aplicados para todas as etapas com o estado relevante.

Angular Stepper Animations

Angular Stepper Animations fornece aos usuários finais uma bela experiência interagindo com os passos definidos. As opções de animação disponíveis diferem dependendo da orientação do stepper.

Quando o stepper é orientado horizontalmente, ele é configurado para usar a animação slide por padrão. Ele também suporta fade como alternativa. As animações são configuradas por meio da entrada horizontalAnimationType.

Em layout orientado verticalmente, o tipo de animação pode ser definido usando a propriedade verticalAnimationType. Por padrão, seu valor é grow e o usuário tem a capacidade de defini-lo para fade também.

Definir none para ambas as entradas de tipo de animação desabilita as animações de passo.

IgxStepperComponent dá a você a habilidade de configurar a duração da transição entre os passos. Isso pode ser alcançado através da propriedade animationDuration, que recebe um número como argumento e é comum a ambas as orientações.

Angular Stepper fornece uma rica variedade de interações de teclado para o usuário final. Essa funcionalidade é habilitada por padrão e permite que os usuários finais naveguem facilmente pelas etapas. A navegação IgxStepperComponent é compatível com os padrões de acessibilidade W3 e conveniente de usar.

Combinações de teclas

Tab- move o foco para o próximo elemento tabulável
Shift + Tab- move o foco para o elemento tabulável anterior
Seta para baixo- move o foco para o cabeçalho da próxima etapa acessível quando o igx-stepper está orientado verticalmente
Seta para cima- move o foco para o cabeçalho da etapa acessível anterior quando o igx-stepper está orientado verticalmente
Seta para a esquerda- move o foco para o cabeçalho da etapa acessível anterior em ambas as orientações
Seta para a direita- move o foco para o cabeçalho da próxima etapa acessível em ambas as orientações
Home- move o foco para o cabeçalho do PRIMEIRO passo habilitado no igx-stepper
Fim- move o foco para o cabeçalho da ÚLTIMA etapa habilitada no igx-stepper
Enter / Espaço- ativa a etapa atualmente focada

Note

Por design, quando o usuário pressiona a tecla Tab sobre o cabeçalho do passo, o foco se move para o contêiner de conteúdo do passo. Caso o contêiner deva ser pulado, o desenvolvedor deve definir o contêiner de conteúdo [tabIndex]="-1".

O componente Stepper também está disponível no App Builder ™ de baixo código e arrastar e soltar.

Angular Stepper Styling

Usando a Ignite UI for Angular Theming, podemos alterar bastante a aparência igx-stepper.

Primeiro, para usar as funções expostas pelo mecanismo de tema, precisamos importar o arquivo index em nosso arquivo de estilo:

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

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

Seguindo a abordagem mais simples, criamos um novo tema que estende o tema stepper e passamos os parâmetros que gostaríamos de alterar:

$custom-stepper-theme: stepper-theme(
  $indicator-background: #fff,

  $current-indicator-background: #f6cd28,
  $current-indicator-outline: #351e65,

  $current-title-color: #351e65,
  $current-subtitle-color: #5f4691,

  $complete-indicator-background: #351e65,
  $complete-indicator-outline: #351e65,

  $complete-title-color: red,
  $complete-subtitle-color: #5f4691,

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

  $step-separator-color: #f6cd28,
  $complete-step-separator-color: #351e65,
);

A última etapa é incluir o tema do componente.

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

Demo

O exemplo abaixo demonstra um estilo simples aplicado por meio da Ignite UI for Angular.

API Reference

Additional Resources

Nossa comunidade é ativa e sempre acolhe novas ideias.

Visão geral do componente Angular Stepper

Angular Stepper Example

Getting Started with Ignite UI for Angular Stepper

Using the Angular Stepper

Declaring a Stepper

Changing the Stepper Orientation

Step States

Linear Stepper

Note

Step Interactions

Note

Customizing the Steps

Note

Note

Note

Angular Stepper Animations

Keyboard Navigation

Note

Angular Stepper Styling

Demo

API Reference

Additional Resources

Temas