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组件回购模板