heading anchors

heading-anchors

Un componente web para agregar enlaces de anclaje a encabezados con IDS.

Demostración | Demo de estilo | Lectura adicional

Ejemplos

 < 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 web le permite:

• Agregar enlaces de anclaje a encabezados que tienen un atributo de identificación y valor
• Personalizar qué elementos se agregarán con un enlace de anclaje utilizando el atributo selector
• Personalizar dónde se adjunta el enlace de anclaje utilizando el atributo position

Instalación

Tiene algunas opciones (elija una de estas):

1. Instalar a través de NPM: npm install @daviddarnes/heading-anchors (también Avaialbe en JSR)
2. Descargue la fuente manualmente de GitHub en su proyecto.
3. Omita este paso y use el script directamente a través de un CDN de terceros (no recomendado para el uso de producción)

Uso

Asegúrese de incluir el <script> en su proyecto (elija uno de estos):

 <!-- 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 y position

De forma predeterminada heading-anchors seleccionará todos los elementos h2[id] , h3[id] y h4[id] dentro de él para agregar un enlace de anclaje. Sin embargo, con el atributo selector puede pasar en una cadena selectora diferente para seleccionar:

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

Nota: Se recomienda que use selectores que utilizan el selector de atributos [id] para una mejor confiabilidad

Por defecto, heading-anchors agregará enlaces de anclaje justo después del elemento, utilizando la API insertAdjacentHTML . Sin embargo, puede ajustar esto usando el atributo position :

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

Crédito

Gracias a las siguientes personas:

• Zach Leatherman por inspirar esta plantilla de repositorio de componentes web
• Curtis Wilcox para la retroalimentación de accesibilidad