share button

share-button

使用本機OS共享選項共享網頁的Web組件。

演示|進一步閱讀

例子

一般用法示例：

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

特徵

此Web組件允許您：

• 使用標準button元素顯示本機OS共享選項以共享當前網頁

安裝

您有一些選擇（選擇其中之一）：

1. 通過NPM安裝： npm install @daviddarnes/share-button
2. 從Github手動下載源到您的項目。
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 > 

信用

感謝以下人員：

• 扎克·萊瑟曼（Zach Leatherman）啟發此Web組件回購模板