skip-link-item
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
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() |
hideTag
| Atributo | hide-tag |
| Descrição | Controla a visibilidade da tag numérica. Quando true, a tag numérica não será exibida, mesmo que keyNumber esteja definido.O atalho de teclado continua funcionando, apenas a indicação visual é ocultada. |
| Tipo | boolean |
| Valor padrão | false |
keyNumber
| Atributo | key-number |
| Descrição | Número da tecla para acesso rápido. Permite que o usuário ative este item pressionando Alt+[keyNumber]. Aceita valores de 1 a 9. Esta propriedade implementa uma alternativa ao accessKey nativa, fornecendo um atalho de teclado consistente e acessível. |
| Tipo | number |
| Valor padrão | --- |
target
| Atributo | target |
| Descrição | ID do elemento de destino ou seletor CSS. Este é o elemento para o qual o usuário será levado ao ativar este item. (obrigatório) |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para o texto do link de navegação rápida. |
"tag" | Slot para personalizar a tag numérica do atalho de teclado, exibindo o valor de key-number por padrão. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brSkiplinkItemClick | Evento emitido quando o item é clicado/ativado. O evento contém informações sobre o item e o target. | true |
brSkiplinkItemFocus | Evento emitido quando o item recebe foco. | true |
Métodos
itemFocus
| Assinatura | itemFocus() => Promise<void> |
| Descrição | Move o foco para este item. |
| Parâmetros | --- |
navigateToTarget
| Assinatura | navigateToTarget() => Promise<void> |
| Descrição | Navega para o target definido. Move o foco para o elemento alvo e ajusta a rolagem da página se necessário. |
| Parâmetros | --- |