step-item

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

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.

Propriedades

active

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

ariaLabel

Atributo	aria-label
Descrição	Rótulo acessível explicitamente definido para o botão interno do item. Quando preenchido, substitui o texto gerado automaticamente pelo componente ("passo X ...") em qualquer modo, seguindo o comportamento padrão do atributo HTML aria-label.
Tipo	string
Valor padrão	''

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 Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	br-icon-name
Depreciação	Prefira contentType="slotted" com um SVG, asset ou elemento de ícone controlado pela aplicação.
Descrição	Nome Iconify do ícone exibido como conteúdo do step item quando contentType é br-icon.
Tipo	string
Valor padrão	''

controlsId

Atributo	controls-id
Descrição	ID do elemento controlado por este item, atribuído como aria-controls no botão interno. Vincula semanticamente o controle ao painel ou região que ele gerencia — podendo ser usado em qualquer contexto que exija essa ligação
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
"content-area"	Slot para conteúdo customizado dentro do botão do item do step.
"step-content"	Slot para conteúdo da etapa exibido no layout vertical (texto, formulário, etc.).

Métodos

handleShowTimeLine

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

setContent

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

setContentType

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
Assinatura	setContentType(value: StepItemContentType) => Promise<void>
Parâmetros	value:

setItemRole

Descrição	Define o role ARIA do botão interno. Chamado pelo componente pai quando o contexto semântico exige um role diferente do padrão option (ex.: tab em contexto de tablist).
Assinatura	setItemRole(value: StepItemRole) => Promise<void>
Parâmetros	value:

setLabelPosition

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
Assinatura	setLabelPosition(value: StepItemLabelPosition) => Promise<void>
Parâmetros	value:

setMode

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.
Assinatura	setMode(value: StepItemMode) => Promise<void>
Parâmetros	value:

setStepItemPositionStatus

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
Assinatura	setStepItemPositionStatus(value: StepItemPositionStatus) => Promise<void>
Parâmetros	value:

setVerticalContentPlacement

Descrição	Método que define a posição do conteúdo no layout vertical.
Assinatura	setVerticalContentPlacement(value: StepItemVerticalContentPlacement) => Promise<void>
Parâmetros	value:

CSS Shadow Parts

Nome	Descrição
"label"	Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().

Dependências

Componente pai

• br-step

Usado por

• br-carousel
• br-wizard

Depende de

• br-icon

Gráfico