share button

share-button

기본 OS 공유 옵션을 사용하여 웹 페이지를 공유하는 웹 구성 요소.

데모 | 추가 독서

예

일반 사용 예 :

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
</ share-button >

폴백 링크 사용 예 :

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < a
    href =" https://twitter.com/intent/tweet/?url=https://website.com&amp;text=Example&amp;via=DavidDarnes "
  >
    Post to Twitter
  </ a >
  < a href =" https://facebook.com/sharer/sharer.php?u=https://website.com " >
    Post to Facebook
  </ a >
  < a
    href =" https://www.linkedin.com/shareArticle?url=https://website.com&amp;title=Example&amp;source=Title&amp;mini=true "
  >
    Post to LinkedIn
  </ a >
  <!-- Find more sharing links here https://codepen.io/daviddarnes/pen/GRJgoxy -->
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined a {
    display: none;
  }
  share-button:not(:defined) a + a {
    margin-inline-start: 1ch;
  }
</ style >

readonly 입력을 사용하는 예 :

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < label >
    Share this page
    < input
      type =" url "
      readonly
      value =" https://daviddarnes.github.io/share-button/demo.html "
      onclick =" this.select() "
    />
  </ label >
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined label {
    display: none;
  }
</ style > 

특징

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

• 표준 button 요소를 사용하여 현재 웹 페이지를 공유하기 위해 기본 OS 공유 옵션을 표시합니다.

설치

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

1. NPM을 통해 설치 : npm install @daviddarnes/share-button
2. GitHub에서 프로젝트로 수동으로 소스를 다운로드하십시오.
3. 이 단계를 건너 뛰고 제 3 자 CDN을 통해 직접 스크립트를 사용하십시오 (생산 사용에 권장되지 않음).

용법

프로젝트에 <script> 포함 시키십시오 (이 중 하나를 선택하십시오) :

 <!-- Host yourself -->
< script type =" module " src =" share-button.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/share-button.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

신용 거래

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

• 이 웹 구성 요소 Repo 템플릿에 영감을 주신 Zach Leatherman