step-item

Design System

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Propriedades

active

Atributo	active
Descrição	Propriedade que define se o item Step está com estado ativo.
Tipo	boolean
Valor padrão	false

brIconAria

Atributo	br-icon-aria
Descrição	Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
Tipo	string
Valor padrão	''

brIconName

Atributo	br-icon-name
Descrição	Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
Tipo	string
Valor padrão	''

disabled

Atributo	disabled
Descrição	Propriedade que define se o item Step está com estado desativado..
Tipo	boolean
Valor padrão	false

highlight

Atributo	highlight
Descrição	Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	---

label

Atributo	label
Descrição	Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
Tipo	string
Valor padrão	''

Slots

Nome	Descrição
"label-area"	Slot para conteúdo customizado dentro do botão do item do step.

Eventos

Evento	Descrição	Propagação
brDidRender	Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado. Consulte a documentação do Stencil para mais detalhes.	true
brWillRender	Emite um evento após o componente ter sido carregado pela primeira vez. Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado. Consulte a documentação do Stencil para mais detalhes.	true

Métodos

handleShowTimeLine

Assinatura	handleShowTimeLine(value: boolean, layout: any) => Promise<void>
Descrição	Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
Parâmetros	value: layout:

setContent

Assinatura	setContent(value: string) => Promise<void>
Descrição	Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
Parâmetros	value:

setContentType

Assinatura	setContentType(value: "default" | "br-icon" | "no-content" | "slotted") => Promise<void>
Descrição	Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
Parâmetros	value:

setLabelPosition

Assinatura	setLabelPosition(value: "top" | "right" | "bottom" | "left") => Promise<void>
Descrição	Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
Parâmetros	value:

setMode

Assinatura	setMode(value: "controller" | "step") => Promise<void>
Descrição	Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
Parâmetros	value:

setStepItemPositionStatus

Assinatura	setStepItemPositionStatus(value: "first" | "middle" | "last") => Promise<void>
Descrição	Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente
Parâmetros	value:

Dependências

Componente pai

• br-step

Usado por

• br-wizard

Depende de

• br-icon
• br-button

Gráfico