Visão geral do React Stepper

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

    React Stepper Example

    O exemplo de Ignite UI for React passo a seguir 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 React Stepper

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você então precisará importar oIgrStepper CSS necessário e o necessário, assim:

    import { IgrStepper, IgrStep } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Agora você pode começar com uma configuração básica do ReactIgrStepper e seus passos.

    How To Use React Stepper

    ÉIgrStep a representação de cada etapa que pertence a.IgrStepper Os passos forneceminvalid​active​optional​disabled ecomplete propriedades, que permitem configurar os estados dos passos de acordo com a necessidade do seu negócio.

    Declaring React Stepper

    As etapas podem ser declaradas usando uma das seguintes abordagens.

    • Iterando por um conjunto de dados
    <IgrStepper>
    {this.StepsData.map(item =>
        <IgrStep key={item.title} disabled={item.disabled}>
            <p slot="title">{item.title}</p>
        </IgrStep>
    }
</IgrStepper>
    • Criando etapas estáticas
    <IgrStepper>
    <IgrStep>
       <p slot="title">Step 1</p>
    </IgrStep>
     <IgrStep>
       <p slot="title">Step 2</p>
    </IgrStep>
</IgrStepper>

    Para cada etapa, o usuário tem a capacidade de configurar indicador, título e legenda usando osIndicator​Title slots andSubtitle da seguinte forma:

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

    <IgrStepper>
    <IgrStep>
        <IgrIcon slot="indicator" name="home" collection="material" />
        <p slot="title">Home</p>
        <p slot="subtitle">Home Sub Title</p>
        <div>
            Step Content
            ...
        </div>
    </IgrStep>
</IgrStepper>
    Passo passo

    Orientation in React Stepper

    Você pode personalizar a orientação do stepper através da propriedade expostaorientation. Pode ser definido como horizontal (valor padrão) ou vertical.

    Orientação do Stepper Horizontal

    horizontal é o valor padrão para aIgrStepper propriedade de orientação. Quando o React 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 oIgrStepper contentTop Propriedade booleana, cujo valor padrão é falso. Caso esteja ativado, o conteúdo dos passos será exibido acima dos cabeçalhos dos passos.

    stepper-contentTop

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

    ReactIgrStepper suporta cinco estados de step 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 como verdadeiro, o passo ativo inicial seria o primeiro passo não desativado.
    • Deficiente- Determina se o passo é intratável. Por padrão, o atributo desabilitado de um passo é definido como falso.
    • inválido- Determina se o passo é válido. Com base no seu valor, decide-se se o usuário terá a capacidade de avançar no modo de passo a passo linear. Seu valor padrão é falso.
    • opcional- Por padrão, o atributo opcional de um passo é definido como falso. 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.
    • complete- Por padrão, o atributo complete de um passo retorna false. O usuário, no entanto, pode substituir esse comportamento padrão de complete definindo o atributo complete conforme necessário. Quando o step é marcado como completo, 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.

    Linear React Stepper

    O ReactIgrStepper te dá a oportunidade de definir o fluxo de passos usando alinear propriedade. Por padrão, linear é definido como falso e o usuário pode selecionar qualquer etapa não desativada noIgrStepper.

    <IgrStepper linear={true}>
    <IgrStep>
       <p slot="title">Step 1</p>
    </IgrStep>
     <IgrStep>
       <p slot="title">Step 2</p>
    </IgrStep>
</IgrStepper>

    Quando a propriedade linear é definida como verdadeira, 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] Optional steps validity is not taken into account in order to move forward.

    Step Interactions

    IgrStepperfornece 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 React Stepper oferece a capacidade de configurar diferentes opções para títulos, indicadores e muito mais.

    Isso pode ser alcançado por meio dastepType propriedade doIgrStepper. Ele recebe os seguintes valores:

    • Full (valor padrão)
    • Indicador
    • Título

    cheio

    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 atitlePosition propriedade. Ele recebe os seguintes valores:

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

    Quando o ReactIgrStepper está orientado horizontalmente e a posição do título não está definida, os títulos são exibidos abaixo dos indicadores.

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

    [!Note] titlePosition property is applicable only when the stepper stepType property is set to full.

    indicador

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

    O indicador de degraus suporta qualquer conteúdo, porém com a restrição de que seu tamanho será sempre de 24 pixels. Tendo isso em mente, recomendamos usarIgrIcon ouIgrAvatar como indicadores de passos.

    Título

    Se quiser mostrar apenas os títulos dos passos, defina a opção stepType como título.

    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 ReactIgrStepper Animations proporcionam aos usuários finais uma experiência linda interagindo com as etapas definidas. As opções de animação disponíveis variam 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 dahorizontalAnimation entrada.

    Em um layout orientado verticalmente, o tipo de animação poderia ser definido usando averticalAnimation propriedade. Por padrão, seu valor é definido comogrow e o usuário também pode configurá-lo parafade isso.

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

    OIgrStepper componente também permite configurar a duração da transição entre as etapas. Isso poderia ser alcançado por meio daanimationDuration propriedade , que toma um número como argumento e é comum a ambas as orientações. O valor padrão está definido para 320ms.

    Keyboard Navigation

    O Ignite UI for React Stepper oferece uma grande variedade de interações com o teclado para o usuário final. Essa funcionalidade é ativada por padrão e permite que os usuários finais naveguem facilmente pelas etapas. A navegação ReactIgrStepper está em conformidade com os padrões de acessibilidade do W3 e é conveniente de usar.

    Combinações de teclas

    • TAB- move o foco para o próximo elemento tabável
    • SHIFT + TAB- move o foco para o elemento tabá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 da PRIMEIRA etapa habilitada no stepper
    • END- move o foco para o cabeçalho da ÚLTIMA etapa habilitada no stepper
    • ENTER ou SPACE- ativa a etapa atualmente focada

    Styling React Stepper

    Você pode mudar a aparênciaIgrStep do usuário usando algumas das partes CSS expostas listadas abaixo:

    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 peças CSS, podemos personalizar a aparência doIgrStepper componente 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);
}

    API References

    Additional Resources