heading anchors

heading-anchors

Eine Webkomponente zum Hinzufügen von Ankerlinks zu Überschriften mit IDs.

Demo | Styling -Demo | Weitere Lesen

Beispiele

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

Merkmale

Mit dieser Webkomponente können Sie:

• Fügen Sie Ankerlinks zu Überschriften hinzu, die ein ID -Attribut und einen Wert haben
• Passen Sie an, welche Elemente mit einem Ankerlink mit dem selector angehängt werden
• Passen Sie an, wo der Ankerlink mit dem position angehängt wird

Installation

Sie haben einige Optionen (wählen Sie eine davon):

1. Installieren Sie über NPM: npm install @daviddarnes/heading-anchors (auch Avaialbe auf JSR)
2. Laden Sie die Quelle manuell von Github in Ihr Projekt herunter.
3. Überspringen Sie diesen Schritt und verwenden Sie das Skript direkt über eine Drittanbieter -CDN (nicht für die Produktionsanwendung empfohlen)

Verwendung

Stellen Sie sicher, dass Sie das <script> in Ihr Projekt aufnehmen (wählen Sie eines davon):

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

Verwenden von selector und position

Standardmäßig wählen die heading-anchors alle Elemente h2[id] , h3[id] und h4[id] aus, um einen Ankerlink anzuhängen. Mit dem selector können Sie jedoch eine andere Selektorzeichenfolge übergeben, um auszuwählen:

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

HINWEIS: Es wird empfohlen, Selektoren zu verwenden, die den [id] Attribut -Selektor für eine bessere Zuverlässigkeit verwenden

Standardmäßig werden Ankerlinks direkt nach dem Element unter Verwendung der insertAdjacentHTML -API heading-anchors . Sie können dies jedoch mit dem position anpassen:

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

Kredit

Dank an die folgenden Leute:

• Zach Leatherman für die Inspiration dieser Webkomponenten -Repo -Vorlage
• Curtis Wilcox für das Feedback der Barrierefreiheit