heading anchors

heading-anchors

ID가있는 제목에 앵커 링크를 추가하는 웹 구성 요소.

데모 | 스타일링 데모 | 추가 독서

예

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

특징

이 웹 구성 요소는 다음을 수행 할 수 있습니다.

• ID 속성과 값이있는 제목에 앵커 링크 추가
• selector 속성을 사용하여 앵커 링크로 추가 될 요소를 사용자 정의하십시오.
• position 속성을 사용하여 앵커 링크가 추가되는 위치 사용자 정의

설치

몇 가지 옵션이 있습니다 (이 중 하나를 선택하십시오).

1. NPM을 통해 설치 : npm install @daviddarnes/heading-anchors (JSR의 Avaialbe도)
2. GitHub에서 프로젝트로 수동으로 소스를 다운로드하십시오.
3. 이 단계를 건너 뛰고 제 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 > 

신용 거래

다음 사람들에게 감사합니다.

• 이 웹 구성 요소 Repo 템플릿에 영감을 주신 Zach Leatherman
• 접근성 피드백을위한 Curtis Wilcox