heading anchors

heading-anchors

Un composant Web pour ajouter des liens d'ancrage aux en-têtes avec IDS.

Démo | Demo de style | Dès la lecture

Exemples

 < 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 > 

Caractéristiques

Ce composant Web vous permet de:

• Ajoutez des liens d'ancrage aux en-têtes qui ont un attribut d'identification et une valeur
• Personnaliser quels éléments seront ajoutés avec un lien d'ancrage à l'aide de l'attribut selector
• Personnaliser où le lien d'ancrage est ajouté à l'aide de l'attribut position

Installation

Vous avez quelques options (choisissez-en une):

1. Installer via NPM: npm install @daviddarnes/heading-anchors (également Avaialbe sur JSR)
2. Téléchargez la source manuellement à partir de GitHub dans votre projet.
3. Ignorez cette étape et utilisez le script directement via un CDN tiers (non recommandé pour une utilisation en production)

Usage

Assurez-vous d'inclure le <script> dans votre projet (choisissez-en un):

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

Utilisation selector et position

Par défaut, heading-anchors sélectionneront tous les éléments h2[id] , h3[id] et h4[id] pour ajouter un lien d'ancrage vers. Cependant, avec l'attribut selector , vous pouvez passer dans une autre chaîne de sélecteur à sélectionner:

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

Remarque: il est recommandé d'utiliser des sélecteurs qui utilisent le sélecteur d'attribut [id] pour une meilleure fiabilité

Par défaut, heading-anchors ajouteront les liens d'ancrage juste après l'élément, en utilisant l'API insertAdjacentHTML . Cependant, vous pouvez ajuster cela à l'aide de l'attribut position :

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

Crédit

Merci aux personnes suivantes:

• Zach Leatherman pour avoir inspiré ce modèle de repo composant Web
• Curtis Wilcox pour la rétroaction d'accessibilité