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 issoIgxStepperModule 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 {}

Alternativamente,16.0.0 você pode importarIgxStepperComponent como uma dependência independente ou usar oIGX_STEPPER_DIRECTIVES token 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 diretivas do Angular Stepper, pode começar com uma configuração básica doigx-stepper e seus passos. Agora que você importou o módulo ou diretivas do Angular Stepper, pode começar com uma configuração básica doigx-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 indicador, título, legenda e conteúdo usando asigxStepIndicator​igxStepTitle​igxStepSubtitle diretivas eigxStepContent 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 através da propriedade de orientação exposta. Ele toma um membro doIgxStepperOrientation enum -Horizontal (valor padrão) ouVertical.

Orientação do Stepper Horizontal

horizontalé o valor padrão para aigx-stepper propriedade de orientação. Quando o stepper está orientado horizontalmente, você tem a oportunidade de determinar se o conteúdo dos passos será exibido acima ou abaixo dos cabeçalhos dos passos. Isso poderia ser alcançado definindo o IgxStepperComponent contentTop Propriedade booleana, qual valor padrão éfalse. Caso esteja ativado, o conteúdo dos passos será exibido acima dos cabeçalhos dos passos.

Orientação do Stepper Vertical

Você pode facilmente mudar do layout horizontal para o vertical. Para mudar a orientação padrão, você deve definir a propriedade de orientação paravertical.

<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 atualmente exibido. Por design, se o usuário não definir explicitamente o atributo ativo de algum passo paratrue, o passo ativo inicial seria o primeiro passo não desativado.
• desabilitado- Determina se o passo é interativo. Por padrão, o atributo desabilitado de um passo é definido parafalse.
• opcional- Por padrão, o atributo opcional de um passo está definido parafalse. Se a validade de um passo no passo linear não for necessária, então o atributo opcional pode ser ativado para que seja possível avançar independentemente da validade do passo.
• completed- Por padrão, o atributo completed de um passo retornafalse. O usuário, no entanto, pode sobrescrever esse comportamento padrão de concluído definindo o atributo concluído conforme necessário. Quando o step é marcado como concluído, não apenas o estilo do cabeçalho do step é alterado por padrão, mas também o estilo da linha de progresso entre o passo concluído e o próximo. Ambos os estilos podiam ser modificados usando as variáveis CSS expostas.

O IgxStepperComponent oferece a oportunidade de definir a lógica de validação para cada passo através da propriedade bindable bindable isValid. Com base no seu valor, decide-se se o usuário terá a capacidade de avançar no modo de passo a passo linear. Por padrão, a propriedade isValid de um passo é definida paratrue.

Linear Stepper

Eleigx-stepper te dá a oportunidade de definir seu fluxo de passos usando a propriedade linear. Por padrão, linear é definido comofalse e o usuário pode selecionar qualquer passo não desativado no IgxStepperComponent.

Quando a propriedade linear é definida paratrue, o stepper exigirá que o passo atual, não opcional, 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 poderia ser alcançado por meio da propriedade stepType do IgxStepperComponent. Ele requer um membro doIgxStepType enum:

• 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 passos. O usuário pode configurar a posição do título usando a propriedade titlePosition. Ambas as propriedades assumem um membro deIgxStepperTitlePosition enum:

• fim
• começar
• fundo
• principal

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

Quando a orientação está definida para layout vertical, a posição do título por padrão está.end​

Note

A propriedade titlePosition é aplicável apenas quando a propriedade stepType do stepper está definida parafull.

Indicador

Se quiser exibir apenas indicadores para os passos, defina a opção stepType paraindicator.

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 quiser mostrar apenas os títulos dos passos, defina a opção stepType paratitle.

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 personalizar os indicadores renderizados para etapas ativas, inválidas e concluídas. Isso poderia ser alcançado por meio dasigxStepActiveIndicator​igxStepInvalidIndicator diretrizes eigxStepCompletedIndicator:

<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 está orientado horizontalmente, ele é configurado para usar aslide animação por padrão. Também suportafade 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 também tem a capacidade de configurá-lo parafade.

Configurarnone para ambos os tipos de animação desativa as animações do stepper.

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.

Keyboard Navigation

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
• Arrow Down- move o foco para o cabeçalho do próximo passo acessível quando oigx-stepper está orientado verticalmente
• Arrow Up- move o foco para o cabeçalho do passo acessível anterior quando oigx-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 passo habilitado FIRST noigx-stepper
• End- move o foco para o cabeçalho do passo LAST habilitado noigx-stepper
• Enter / Espaço- ativa a etapa atualmente focada

Note

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

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

Angular Stepper Styling

Stepper Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Propriedade primária	Propriedade dependente	Descrição
$step-contexto	$step-hover-background	O fundo do cabeçalho de passo ao passar o mouse
	$step-foco de fundo	O pano de fundo do cabeçalho de degraus no foco
	$indicator-fundo	A cor de fundo do indicador de degraus
	$title cor	A cor do título do degrau
	$subtitle cor	A cor do subtítulo step
	$current-degrau-antecedentes	O contexto do atual cabeçalho de degrau
	Contexto $invalid-degraus	O contexto do cabeçalho de passo inválido
	Contexto $complete-degraus	O contexto do cabeçalho completo do passo
	$disabled-indicador-fundo	O fundo indicador do degrau para desativados
	$disabled-cor-título	A cor do título do degrau para deficientes
	$disabled-legenda-cor	A cor do subtítulo do degrau para desativados
	$step-cor-separador	A cor da borda do separador entre os passos
$indicator-fundo	$indicator esboço	A cor do contorno do indicador de degraus
	$indicator cor	A cor do texto do indicador de passo
$current-degrau-antecedentes	$current-passo-flutuar-fundo	O fundo do cabeçalho de passo atual no hover
	$current-passo-foco-fundo	O contexto do atual cabeçalho de passo sobre foco
	$current-indicador-fundo	A cor de fundo do indicador de degrau atual
	$current-título-cor	A cor do título atual do degrau
	$current-legenda-cor	A cor do subtítulo do passo atual
$invalid-indicador-fundo	$invalid-esboço indicador	A cor do contorno do indicador de passo inválido
	$invalid-indicador-cor	A cor do indicador de passo inválido
	$invalid-título-cor	A cor do título do passo inválido
	$invalid-legenda-cor	A cor do subtítulo de passo inválido
	$invalid-título-hover-color	A cor do título de passo inválido ao passar o mouse
	$invalid-legendas-hover-color	A cor do subtítulo inválido no passo ao passar o mouse
	$invalid-título-foco-cor	A cor do título de passo inválido no foco
	$invalid-legendas-foco-cor	A cor do subtítulo inválido do passo no foco
Contexto $complete-degraus	$complete-passo-passo-flutuar-fundo	O pano de fundo do cabeçalho completo do passo no hover
	$complete-passo-foco-fundo	O contexto do cabeçalho completo do passo no foco
	$complete-indicador-fundo	A cor de fundo do indicador de passo completo
	$complete-indicador-cor	A cor do indicador de passo concluído
	$complete-título-cor	A cor do título completo do degrau
	$complete-legenda-cor	A cor do subtítulo completo do passo
	$complete-título-hover-color	A cor do título completo do passo no passar o mouse
	$complete-legenda-hover-color	A cor do subtítulo completo do passo no hover
	$complete-título-foco-cor	A cor do título completo do passo no foco
	$complete-legendas-foco-cor	A cor do subtítulo completo do passo sobre foco

Usando a Ignite UI for Angular Tema, podemos alterar muito aigx-stepper aparência.

Primeiro, para usar as funções expostas pelo motor de temas, precisamos importar oindex arquivo do 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 stepper-theme e fornece apenas alguns parâmetros básicos. O tema gerará automaticamente todos os estilos necessários, incluindo cores específicas do estado e primeiros planos contrastantes acessíveis. Você também pode substituir qualquer um dos parâmetros disponíveis se quiser mais controle sobre a aparência.

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

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

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.

Styling with Tailwind

Você pode estilizar o stepper usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

• Uselight-* as aulas para o tema da luz.
• Usedark-* classes para o tema sombrio.
• Adicione o nome do componente após o prefixo, por exemplo,light-stepper,dark-stepper.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema do stepper. A sintaxe é a seguinte:

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

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, seu stepper deve ficar assim:

API Reference

• Componente IgxStepper
• Componente IgxStep

Additional Resources

Nossa comunidade é ativa e sempre acolhe novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub