ดาวน์โหลด share button - ดาวน์โหลดรหัสแหล่งที่มาของ share button

share button

ส่วนประกอบของบุคคลที่สาม

v1.1.3

ดาวน์โหลด

`share-button`

องค์ประกอบเว็บในการแชร์หน้าเว็บโดยใช้ตัวเลือกการแชร์ระบบปฏิบัติการดั้งเดิม

การสาธิต การอ่านเพิ่มเติม

ตัวอย่าง

ตัวอย่างการใช้งานทั่วไป:

 < 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 มาตรฐานเพื่อแสดงตัวเลือกการแชร์ระบบปฏิบัติการดั้งเดิมเพื่อแชร์หน้าเว็บปัจจุบัน

การติดตั้ง

คุณมีตัวเลือกเล็กน้อย (เลือกหนึ่งในนั้น):

ติดตั้งผ่าน NPM: npm install @daviddarnes/share-button
ดาวน์โหลดแหล่งข้อมูลด้วยตนเองจาก GitHub ไปยังโครงการของคุณ
ข้ามขั้นตอนนี้และใช้สคริปต์โดยตรงผ่าน 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 >