Ir para o conteúdo principal

step-item

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​

Atributoactive
DescriçãoPropriedade que define se o item Step está com estado ativo.
Tipoboolean
Valor padrãofalse

ariaLabel​

Atributoaria-label
DescriçãoRó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.
Tipostring
Valor padrão''

brIconAria​

Atributobr-icon-aria
DescriçãoPropriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
Tipostring
Valor padrão''

brIconName​

Atributobr-icon-name
DescriçãoPropriedade 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.
Tipostring
Valor padrão''

controlsId​

Atributocontrols-id
DescriçãoID 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
Tipostring
Valor padrão''

disabled​

Atributodisabled
DescriçãoPropriedade que define se o item Step está com estado desativado.
Tipoboolean
Valor padrãofalse

highlight​

Atributohighlight
DescriçãoPropriedade 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​

Atributolabel
DescriçãoPropriedade que define o conteúdo do texto auxiliar de realce do item de Step.
Tipostring
Valor padrão''

Slots​

NomeDescrição
"content-area"Slot para conteúdo customizado dentro do botão do item do step.

Eventos​

EventoDescriçãoPropagação
brDidRenderEmite 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
brWillRenderEmite 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​

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

setContent​

AssinaturasetContent(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âmetrosvalue:

setContentType​

AssinaturasetContentType(value: StepItemContentType) => 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âmetrosvalue:

setItemRole​

AssinaturasetItemRole(value: StepItemRole) => Promise<void>
DescriçãoDefine 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).
Parâmetrosvalue:

setLabelPosition​

AssinaturasetLabelPosition(value: StepItemLabelPosition) => 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âmetrosvalue:

setMode​

AssinaturasetMode(value: StepItemMode) => 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âmetrosvalue:

setStepItemPositionStatus​

AssinaturasetStepItemPositionStatus(value: StepItemPositionStatus) => 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âmetrosvalue:

CSS Shadow Parts​

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

Dependências​

Componente pai​

Usado por​

Depende de​

Gráfico​