Visão geral Web Components Stepper

O componente Web Components Stepper fornece um fluxo de trabalho semelhante a um assistente e é usado para mostrar o progresso por meio de etapas numeradas. Ele permite que os desenvolvedores dividam um conteúdo longo em uma sequência de etapas lógicas, ajudando os usuários finais a navegar mais facilmente por todo o processo. O Web Components Stepper é exibido como uma linha vertical ou horizontal. O Web Components Stepper tem vários recursos, como validação de etapas, estilo, orientação e navegação por teclado.

Web Components Stepper Example

O seguinte Exemplo de Stepper Ignite UI for Web Components abaixo mostra o componente em ação. Ele visualiza o processo pelo qual um usuário final deve passar para configurar os detalhes de um pedido, seguindo várias etapas consecutivas.

Getting Started with Web Components Stepper

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Antes de usar o IgcStepperComponent, você precisa registrá-lo da seguinte forma:

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

defineComponents(IgcStepperComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

Agora você pode começar com uma configuração básica do Web Components IgcStepperComponent e suas etapas.

How To Use Web Components Stepper

O IgcStepComponent é a representação de cada etapa que pertence ao IgcStepperComponent. As etapas fornecem propriedades invalid, active, optional, disabled e complete, que lhe dão a capacidade de configurar os estados das etapas de acordo com seus requisitos comerciais.

Declaring Web Components Stepper

As etapas podem ser declaradas usando uma das seguintes abordagens.

Iterando por um conjunto de dados

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

Criando etapas estáticas

<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 etapa, o usuário tem a capacidade de configurar o indicador, o título e o subtítulo usando os slots IgcCarouselIndicatorComponent, Title e Subtitle da seguinte forma:

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

Você pode personalizar a orientação do stepper por meio da propriedade exposed orientation. Ela pode ser definida como horizontal (valor padrão) ou vertical.

Orientação do Stepper Horizontal

horizontal é o valor padrão para a propriedade de orientação IgcStepperComponent. Quando o Web Components stepper é orientado horizontalmente, você tem a oportunidade de determinar se o conteúdo das etapas seria exibido acima ou abaixo dos cabeçalhos das etapas. Isso pode ser obtido definindo a propriedade booleana contentTop IgcStepperComponent, cujo valor padrão é false. Caso esteja habilitado, o conteúdo das etapas seria 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.

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

Web Components IgcStepperComponent suportam cinco 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 é intratável. Por padrão, o atributo disabled de um passo é definido como false.
invalid- Determina se o passo é válido. Com base em seu valor, é decidido se o usuário terá a capacidade de avançar no modo linear stepper. Seu valor padrão é 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.
complete- Por padrão, o atributo complete de uma etapa retorna false. O usuário, no entanto, pode substituir esse comportamento complete padrão definindo o atributo complete conforme necessário. Quando uma etapa é marcada como complete, 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.

Linear Web Components Stepper

O Web Components IgcStepperComponent dá a você a oportunidade de definir seu fluxo de etapas usando a propriedade linear. Por padrão, linear é definido como false e o usuário é habilitado a selecionar qualquer etapa não desabilitada no 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>

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] Optional steps validity is not taken into account in order to move forward.

Step Interactions

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

O Ignite UI for Web Components 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 IgcStepperComponent. Ele assume os seguintes valores:

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. Ela assume os seguintes valores:

indefinido (valor padrão)
fim
começar
fundo
principal

Quando o Web Components IgcStepperComponent é orientado horizontalmente e a posição do título não é definida, os títulos serão exibidos abaixo dos indicadores.

Quando a orientação é definida como vertical e a posição do título não é definida, os títulos serão exibidos após os indicadores.

[!Note] titlePosition property is applicable only when the stepper stepType property is set to 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 IgcIconComponent ou IgcAvatarComponent 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] 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.

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

Stepper Animations

As animações Web Components IgcStepperComponent fornecem 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 horizontalAnimation.

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

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

O componente IgcStepperComponent também lhe dá 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 para ambas as orientações. O valor padrão é definido como 320ms.

O Ignite UI for Web Components 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 do Web Components IgcStepperComponent é 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
↓- move o foco para o cabeçalho da próxima etapa acessível quando o stepper está orientado verticalmente
↑- move o foco para o cabeçalho da etapa acessível anterior quando o stepper está orientado verticalmente
←- move o foco para o cabeçalho da etapa acessível anterior em ambas as orientações
→- 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 stepper
Fim- move o foco para o cabeçalho da ÚLTIMA etapa habilitada no stepper
Enter ou Espaço- ativa a etapa atualmente focada

Styling Web Components Stepper

You can change the appearance of the IgcStepComponent, by using some of the exposed CSS parts listed below:

Nome da peça	Descrição
`header-container`	Encapsulador do cabeçalho da etapa e seus separadores.
`disabled`	Indica um estado desabilitado. Aplica-se a header-container.
`complete-start`	Indica um estado completo da etapa atual. Aplica-se a header-container.
`complete-end`	Indica um estado completo da etapa anterior. Aplica-se a header-container.
`optional`	Indica um estado opcional. Aplica-se a header-container.
`invalid`	Indica um estado inválido. Aplica-se a header-container.
`top`	Indica que o título deve estar acima do indicador. Aplica-se a header-container.
`bottom`	Indica que o título deve estar abaixo do indicador. Aplica-se a header-container.
`start`	Indica que o título deve estar antes do indicador. Aplica-se a header-container.
`end`	Indica que o título deve estar depois do indicador. Aplica-se a header-container.
`header`	Encapsulador do indicador e do texto da etapa.
`indicator`	O indicador do passo.
`text`	Encapsulador do título e subtítulo da etapa.
`empty`	Indica que nenhum título e subtítulo foram fornecidos para a etapa. Aplica-se a texto.
`title`	O título da etapa.
`subtitle`	O subtítulo da etapa.
`body`	Encapsulador do conteúdo da etapa.
`content`	O conteúdo dos passos.

Usando essas partes CSS, podemos personalizar a aparência do componente IgcStepperComponent assim:

igc-step::part(title) {
  color: var(--ig-primary-500);
}
igc-step[active]::part(indicator) {
  background-color: var(--ig-primary-500);
}
igc-step::part(indicator) {
  background-color: var(--ig-surface-500);
}