Item
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Selecionável
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| Tipo | boolean |
| Valor padrão | false |
href
| Atributo | href |
| Descrição | URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link. |
| Tipo | string |
| Valor padrão | --- |
isActive
| Atributo | is-active |
| Descrição | Indica se o item está no estado ativo. Se definido como verdadeiro, o item será exibido como ativo. |
| Tipo | boolean |
| Valor padrão | false |
isButton
| Atributo | is-button |
| Descrição | Quando definido como true, o item será tratado como um botão. |
| Tipo | boolean |
| Valor padrão | false |
isInteractive
| Atributo | is-interactive |
| Descrição | Marca o item como interativo, permitindo que toda a superfície do item seja clicável. |
| Tipo | boolean |
| Valor padrão | false |
isSelected
| Atributo | is-selected |
| Descrição | Indica se o item está no estado selecionado. Se definido como verdadeiro, o item será exibido como selecionado. |
| Tipo | boolean |
| Valor padrão | false |
target
| Atributo | target |
| Descrição | Define o alvo do link quando href está presente. Pode ser:- _blank para abrir em uma nova aba,- _self para abrir na mesma aba,- _parent para abrir na aba pai,- _top para abrir na aba superior. |
| Tipo | "_blank" | "_parent" | "_self" | "_top" |
| Valor padrão | --- |
type
| Atributo | type |
| Descrição | Tipo do botão, aplicável apenas se isButton for true. Pode ser:- 'submit' para enviar um formulário,- 'reset' para redefinir um formulário,- 'button' para um botão padrão. |
| Tipo | "button" | "reset" | "submit" |
| Valor padrão | --- |
value
| Atributo | value |
| Descrição | Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.). |
"end" | Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais. |
"start" | Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidClick | Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (<button>). Pode ser utilizado para ações personalizadas, exceto quando o item está desativado. | true |
brDidSelect | Evento customizado aplicável para todos os tipos de elementos (div, button, a), emitido quando o item é selecionado e desde que a propriedade isInteractive esteja presente. | true |
Métodos
setFocus
| Assinatura | setFocus() => Promise<void> |
| Descrição | Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"item" | Elemento principal do item (botão, link ou div). |
Dependências
Usado por
- br-breadcrumb
- br-footer-category
- br-footer-item
- br-header-function
- br-header-link
- br-notification-item
- br-pagination
- br-skiplink-item
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
active | is-active | Coloca o item como ênfase. | boolean | false |
density | density | Define a densidade. | "large" | "medium" | "small" | 'medium' |
selected | is-selected | Indica se está selecionado. | boolean | false |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
hover | Efeito Hover. | boolean | false |
open | Indica se está aberto/fechado. | boolean | false |
title | Título visível. | string | undefined |
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|---|---|
toggle-open | --- | Disparado quando open é modificada (removido). |
toggle-selected | brDidSelectedChange | Emitido quando selected é modificada. |