Pular para o conteúdo
Ajude a traduzir esta página

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

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Select campaign settings
Create an ad groupOptional
Create an ad

Step 1

Linear

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

O assistente (Stepper) pode ser controlado passando o índice da etapa atual (baseado em zero) com a propriedade activeStep. A orientação do asisstente (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

Step 1

Não linear

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

Este exemplo é semelhante ao não linear, porém as etapas não são mais automaticamente definidas 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

Assistente customizado

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
<Stepper activeStep={1} alternativeLabel>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

Não linear

Select campaign settings
Create an ad groupAlert message
Create an ad

Não Linear - Rótulo Alternativo

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

Assistente vertical

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented.

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

Assistente Mobile

Este componente implementa um assistente compacto adequado para um dispositivo mobile. It has more limited functionality than the vertical stepper. Veja mobile steps para essa inspiração.

The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress.

Texto

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

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.

Texto

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

San Francisco – Oakland Bay Bridge, United States

San Francisco – Oakland Bay Bridge, United States

Pontos

Use dots when the number of steps is small.

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

API