heading anchors

heading-anchors

Komponen web untuk menambahkan tautan jangkar ke judul dengan ID.

Demo | Demo Styling | Bacaan lebih lanjut

Contoh

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

Fitur

Komponen web ini memungkinkan Anda untuk:

• Tambahkan tautan jangkar ke judul yang memiliki atribut dan nilai ID
• Kustomisasi elemen mana yang akan ditambahkan dengan tautan jangkar menggunakan atribut selector
• Kustomisasi di mana tautan jangkar ditambahkan menggunakan atribut position

Instalasi

Anda memiliki beberapa opsi (pilih salah satunya):

1. Instal melalui NPM: npm install @daviddarnes/heading-anchors (juga Avaialbe di JSR)
2. Unduh sumbernya secara manual dari GitHub ke dalam proyek Anda.
3. Lewati langkah ini dan gunakan skrip secara langsung melalui CDN pihak ke -3 (tidak disarankan untuk penggunaan produksi)

Penggunaan

Pastikan Anda memasukkan <script> dalam proyek Anda (pilih salah satunya):

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

Menggunakan selector dan position

Secara default heading-anchors akan memilih semua elemen h2[id] , h3[id] dan h4[id] di dalamnya untuk menambahkan tautan jangkar ke. Namun dengan atribut selector Anda dapat meneruskan string pemilih yang berbeda untuk memilih:

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

Catatan: Disarankan Anda menggunakan pemilih yang menggunakan pemilih atribut [id] untuk keandalan yang lebih baik

Secara default heading-anchors akan menambahkan tautan jangkar tepat setelah elemen, menggunakan API insertAdjacentHTML . Namun Anda dapat menyesuaikan ini menggunakan atribut position :

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

Kredit

Dengan terima kasih kepada orang -orang berikut:

• Zach Leatherman karena menginspirasi Template Repo Komponen Web ini
• Curtis Wilcox untuk umpan balik aksesibilitas