heading anchors

heading-anchors

IDを使用して見出しにアンカーリンクを追加するWebコンポーネント。

デモ|スタイリングデモ|さらに読む

例

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

特徴

このWebコンポーネントを使用すると、次のことができます。

• ID属性と値を持つ見出しにアンカーリンクを追加する
• selector属性を使用してアンカーリンクで追加される要素をカスタマイズする
• Anchorリンクがposition属性を使用して追加される場所をカスタマイズします

インストール

いくつかのオプションがあります（これらのいずれかを選択してください）：

1. NPM経由でインストール： npm install @daviddarnes/heading-anchors （JSRのAvaialbeも）
2. GitHubからプロジェクトに手動でソースをダウンロードします。
3. この手順をスキップし、サードパーティのCDNを介してスクリプトを直接使用します（生産の使用にはお勧めしません）

使用法

プロジェクトに<script>を含めることを確認してください（これらのいずれかを選択してください）。

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

selectorとpositionを使用します

デフォルトでは、 heading-anchors 、その中のすべてのh2[id] 、 h3[id] 、およびh4[id]要素を選択して、アンカーリンクを追加します。ただし、 selector属性を使用すると、別のセレクター文字列を渡して選択できます。

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

注： [id]属性セレクターを利用して信頼性を向上させることをお勧めします

デフォルトでは、 heading-anchors insertAdjacentHTML APIを使用して、要素の直後にアンカーリンクを追加します。ただし、 position属性を使用してこれを調整できます。

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

クレジット

次の人々に感謝します：

• このWebコンポーネントのレポンテンプレートを刺激してくれたZach Leatherman
• アクセシビリティフィードバックについては、Curtis Wilcox