Step
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Modo
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Layout Vertical
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
contentType
| Atributo | content-type |
| Descrição | Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step e stepItem |
| Tipo | "br-icon" | "default" | "no-content" | "slotted" |
| Valor padrão | 'default' |
initialStep
| Atributo | initial-step |
| Descrição | define o passo que começará destacado |
| Tipo | string |
| Valor padrão | '0' |
labelPosition
| Atributo | label-position |
| Descrição | Propriedade que define a posição onde o texto de destaque,label, ficará localizado no stepItem |
| Tipo | "bottom" | "left" | "right" | "top" |
| Valor padrão | 'bottom' |
layout
| Atributo | layout |
| Descrição | propriedade responsável por definir a orientação do componente Step |
| Tipo | "horizontal" | "vertical" |
| Valor padrão | 'horizontal' |
mode
| Atributo | mode |
| Descrição | Propriedade que define o tipo de comportamento que o componente Step deverá seguir |
| Tipo | "controller" | "step" |
| Valor padrão | 'step' |
progressionType
| Atributo | progression-type |
| Descrição | Propriedade que define o tipo de progressão de etapas que o step vai executar |
| Tipo | "linear" | "nonlinear" |
| Valor padrão | 'nonlinear' |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para os itens do step (br-step-item), aceitando apenas esse componente. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidLoad | Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado. Consulte a documentação do Stencil para mais detalhes. | true |
brShouldUpdate | Emite um evento para indicar se o componente deve ser atualizado ou não. Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir. Consulte a documentação do Stencil para mais detalhes. | true |
brStepChange | Emite um evento quando o step ativo muda. O evento carrega o índice do novo step ativo (0-based). | true |
brWillLoad | Emite um evento antes do componente ser renderizado pela primeira vez, permitindo a preparação de dados ou inicializações necessárias. Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado. Consulte a documentação do Stencil para mais detalhes. | true |
Métodos
BackToPreviousStep
| Assinatura | BackToPreviousStep() => Promise<void> |
| Descrição | Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep |
| Parâmetros | --- |
GetActiveStep
| Assinatura | GetActiveStep() => Promise<number> |
| Descrição | Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step. |
| Parâmetros | --- |
ProceedToNextStep
| Assinatura | ProceedToNextStep() => Promise<void> |
| Descrição | Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep |
| Parâmetros | --- |
StepValidation
| Assinatura | StepValidation(validationStatus: StepValidationStatus) => Promise<void> |
| Descrição | Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo. |
| Parâmetros | validationStatus: |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part(). |