Visão geral Blazor Stepper

O componente Blazor 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 Blazor Stepper é exibido como uma linha vertical ou horizontal. O Blazor Stepper tem vários recursos, como validação de etapas, estilo, orientação e navegação por teclado.

Blazor Stepper Example

O seguinte exemplo de Ignite UI for Blazor Stepper 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 Blazor Stepper

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbStepperModule)
);

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbStepper. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

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

How To Use Blazor Stepper

O IgbStep é a representação de cada passo que pertence ao IgbStepper. Os passos fornecem propriedades Invalid, Active, Optional, Disabled e Complete, que lhe dão a capacidade de configurar os estados dos passos de acordo com seus requisitos de negócios.

Declaring Blazor Stepper

As etapas podem ser declaradas usando uma das seguintes abordagens.

Iterando por um conjunto de dados

<IgbStepper>
    @foreach (var item in this.StepsData)
    {
        <IgbStep Disabled="@item.Disabled">
          <p slot="title">@item.Title</p>
        </IgbStep>
    }
</IgbStepper>

Criando etapas estáticas

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

Para cada etapa, o usuário tem a capacidade de configurar o indicador, título e subtítulo usando os slots IgbCarouselIndicator, Title e Subtitle da seguinte forma:

[!Note] The Default IgbStep slot renders the content of the step.

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

Orientation in Blazor Stepper

Você pode personalizar a orientação do stepper por meio da propriedade Orientation exposta. 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 IgbStepper. Quando o Blazor 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 IgbStepper ContentTop, 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 como 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

Blazor IgbStepper suporta 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 Blazor Stepper

O Blazor IgbStepper 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 pode selecionar qualquer etapa não desabilitada no IgbStepper.

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

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

IgbStepper 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

A Ignite UI for Blazor 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 IgbStepper. 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 Blazor IgbStepper estiver orientado horizontalmente e a posição do título não estiver 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 IgbIcon ou IgbAvatar 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 Blazor IgbStepper Animations 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 IgbStepper 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 Blazor 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 Blazor IgbStepper é 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 Blazor Stepper

You can change the appearance of the IgbStep, 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 IgbStepper 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);
}