heading anchors

heading-anchors

Um componente da Web para adicionar links de âncora aos títulos com IDs.

Demo | Demonstração de estilo | Leitura adicional

Exemplos

 < script type =" module " src =" heading-anchors.js " > </ script >

< heading-anchors >
  < h2 id =" heading-level-2 " > Heading level 2 </ h2 >
  < p > Lorem ipsum dolor sit amet consectetur adipisicing elit. </ p >

  < h3 id =" heading-level-3 " > Heading level 3 </ h3 >
  < p >
    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis
    dolorem porro cupiditate quam eaque voluptates.
  </ p >
</ heading-anchors > 

Características

Este componente da web permite:

• Adicione links de âncora aos títulos que têm um atributo de identificação e valor
• Personalize quais elementos serão anexados com um link de âncora usando o atributo selector
• Personalize onde o link âncora é anexado usando o atributo position

Instalação

Você tem algumas opções (escolha uma delas):

1. Instale via NPM: npm install @daviddarnes/heading-anchors (também AVAIALBE no JSR)
2. Faça o download da fonte manualmente do GitHub em seu projeto.
3. Pule esta etapa e use o script diretamente por meio de um CDN de terceiros (não recomendado para uso da produção)

Uso

Certifique -se de incluir o <script> em seu projeto (escolha um deles):

 <!-- Host yourself -->
< script type =" module " src =" heading-anchors.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/heading-anchors.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

Usando selector e position

Por padrão, heading-anchors selecionará todos os elementos h2[id] , h3[id] e h4[id] para anexar um link âncora. No entanto, com o atributo selector , você pode passar em uma seleção diferente para selecionar:

 < heading-anchors selector =" h2[id] " >
  <!-- ... -->
</ heading-anchors >

Nota: É recomendável que você use seletores que utilizem o seletor de atributos [id] para melhor confiabilidade

Por padrão, heading-anchors anexará links âncora logo após o elemento, usando a API insertAdjacentHTML . No entanto, você pode ajustar isso usando o atributo position :

 < heading-anchors position =" beforeend " >
  <!-- ... -->
</ heading-anchors > 

Crédito

Com agradecimento às seguintes pessoas:

• Zach Leatherman para inspirar este modelo de repo componente da web
• Curtis Wilcox para o feedback de acessibilidade