Skip link
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.
Exemplos
Simple
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Compound
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
position
| Atributo | position |
| Descrição | Define a posição do skip link na tela. - 'top-left': Posicionado no canto superior esquerdo. - 'top-center': Posicionado no centro superior. - 'top-right': Posicionado no canto superior direito. |
| Tipo | "top-center" | "top-left" | "top-right" |
| Valor padrão | 'top-left' |
showItemCount
| Atributo | show-item-count |
| Descrição | Exibe a contagem de itens no formato (1/4), (2/4), etc. Quando true, cada item mostrará sua posição relativa ao total de itens.Por padrão, é true para o modo simple e false para o modo compound. |
| Tipo | boolean |
| Valor padrão | --- |
variant
| Atributo | variant |
| Descrição | Define se o skip link apresenta um ou múltiplos itens visíveis. - 'simple': Exibe apenas um item por vez. - 'compound': Exibe uma lista com múltiplos itens. |
| Tipo | "compound" | "simple" |
| Valor padrão | 'compound' |
zIndex
| Atributo | z-index |
| Descrição | Define o z-index do componente. Controla a ordem de empilhamento do componente na página. |
| Tipo | number |
| Valor padrão | null |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para inserir os itens de navegação rápida (br-skiplink-item). |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidHide | Evento emitido quando o skiplink se torna oculto. | true |
brDidShow | Evento emitido quando o skiplink se torna visível. | true |
brSkiplinkNavigation | Evento emitido quando um item do skiplink é ativado. O evento contém informações sobre o item acionado e o elemento target. | true |
Métodos
hide
| Assinatura | hide() => Promise<void> |
| Descrição | Oculta o componente programaticamente. |
| Parâmetros | --- |
show
| Assinatura | show() => Promise<void> |
| Descrição | Exibe o componente programaticamente. |
| Parâmetros | --- |