Copiar página como Markdown para IA
Skip Link
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplo(s)
Desktop (100%)
Tablet - 768px
iPhone (iOS) - 390x844
Android - 360x800
Compartilhar URL
Mudar fundo
Abrir no StackBlitz
Tela cheia
HTML
Controles
JS
CSS
Console
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Formatar código
Resetar código para o estado inicial
Copiar para a área de transferência
Propriedades
customId
| Atributo | custom-id |
|---|---|
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId(). |
| Tipo | string |
| Valor padrão | generateUniqueId() |
open
| Atributo | open |
|---|---|
| Descrição | Controla se o skip link está aberto. |
| Tipo | boolean |
| Valor padrão | false |
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 |
Eventos
| Evento | Descrição | Depreciação | Propagação |
|---|---|---|---|
brDidHide | Use brSkipLinkHide. | true | |
brDidShow | Use brSkipLinkShow. | true | |
brSkipLinkHide | Evento canônico emitido ao ocultar o componente. | --- | true |
brSkipLinkNavigate | Evento canônico emitido quando um destino é ativado. | --- | true |
brSkiplinkNavigation | Use brSkipLinkNavigate. | true | |
brSkipLinkShow | Evento canônico emitido ao exibir o componente. | --- | true |
Métodos
hide
| Descrição | Oculta o componente programaticamente. |
|---|---|
| Assinatura | hide() => Promise<void> |
| Parâmetros | --- |
show
| Descrição | Exibe o componente programaticamente. |
|---|---|
| Assinatura | show() => Promise<void> |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Parte para o contêiner principal do componente skip-link, usada para estilização via ::part(). |
