Pular para o conteúdo

🎉 Material UI v5 is out! Head to the migration guide to get started.

Assistente

Assistentes transmitem progresso através de etapas numeradas. Ele fornece um fluxo de trabalho com etapas.

Assistentes exibem o progresso através de uma sequência de etapas lógicas e numeradas. Eles também podem ser usados para navegação. Assistentes podem exibir uma mensagem de feedback transiente depois que uma etapa é salva.

  • Tipos de etapas: Editável, Somente leitura, Mobile, Opcional
  • Tipos de assistentes: Horizontal, Vertical, Linear, Não linear

Nota: Os assistentes não estão mais documentados nas diretrizes do Material Design, mas o Material-UI continuará a suportá-los.

Assistente horizontal

Linear

O componente Stepper pode ser controlado passando o índice da etapa atual (baseado em zero) com a propriedade activeStep. A orientação do Stepper é definida usando a propriedade orientation.

Este exemplo também mostra o uso de uma etapa opcional, colocando a propriedade optional no segundo componente de Step. Observe que cabe a você gerenciar quando uma etapa opcional é ignorada. Depois de determinar isso para uma etapa específica, você deve definir completed={false} para indicar que, embora o índice da etapa ativa tenha ultrapassado a etapa opcional, ele não está realmente concluído.

Select campaign settings
Create an ad groupOptional
Create an ad

Select campaign settings...

Linear - Rótulo Alternativo

Os rótulos podem ser colocados abaixo do ícone da etapa, definindo a propriedade alternativeLabel no componente Stepper.

Select master blaster campaign settings
Create an ad group
Create an ad

Select campaign settings...

Assistente customizado

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

Select campaign settings
Create an ad group
Create an ad
Select campaign settings
Create an ad group
Create an ad
Select campaign settings
Create an ad group
Create an ad

What is an ad group anyways?

Não linear

Os assistentes não lineares permitem que os usuários entrem em um fluxo de várias etapas a qualquer momento.

Este exemplo é semelhante ao horizontal linear, porém as etapas não são mais automaticamente definidas para disabled={true} com base na propriedade activeStep.

O uso do StepButton aqui, demonstra rótulos de etapas clicáveis, além de definir a propriedade sinalizadora completed. No entanto, como as etapas podem ser acessadas de maneira não linear, cabe a sua própria implementação determinar quando todas as etapas são concluídas (ou mesmo se precisam ser concluídas).

Step 1: Select campaign settings...

Não Linear - Rótulo Alternativo

Os rótulos podem ser colocados abaixo do ícone da etapa, definindo a propriedade alternativeLabel no componente Stepper.

Step 1: Select campaign settings...

Não Linear - Etapa de Erro

Select campaign settings
Create an ad groupAlert message
Create an ad

Select campaign settings...

Assistente vertical

Select campaign settings

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.

Create an ad group
Create an ad

Assistente Mobile

Este componente implementa um assistente compacto adequado para um dispositivo mobile. Veja mobile steps para essa inspiração.

Texto

Este é essencialmente um botão de voltar/próximo posicionado corretamente. Você deve implementar a descrição textual por conta própria, no entanto, um exemplo é fornecido abaixo para referência.

San Francisco – Oakland Bay Bridge, United States

San Francisco – Oakland Bay Bridge, United States
1 / 5

Texto com efeito carrossel

Esta demonstração é muito similiar a anterior, a diferença é o uso de react-swipeable-views para fazer a transição de etapas.

San Francisco – Oakland Bay Bridge, United States

San Francisco – Oakland Bay Bridge, United States
1 / 5

Pontos

Use pontos quando o número de etapas não for grande.

Progresso

Use uma barra de progresso quando houver muitas etapas, ou se houver etapas que precisem ser inseridas durante o processo (com base nas respostas de etapas anteriores).