share button

share-button

Eine Webkomponente zum Freigeben von Webseiten mithilfe der nativen OS Sharing -Optionen.

Demo | Weitere Lesen

Beispiele

Allgemeines Nutzungsbeispiel:

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

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

Beispiel unter Verwendung eines Fallback -Links:

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

Beispiel mit einem fallback readonly Eingang:

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

Merkmale

Mit dieser Webkomponente können Sie:

• Verwenden Sie ein Standard button , um die nativen OS -Freigabeoptionen anzuzeigen, um die aktuelle Webseite zu teilen

Installation

Sie haben einige Optionen (wählen Sie eine davon):

1. Installieren Sie über NPM: npm install @daviddarnes/share-button
2. Laden Sie die Quelle manuell von Github in Ihr Projekt herunter.
3. Überspringen Sie diesen Schritt und verwenden Sie das Skript direkt über eine Drittanbieter -CDN (nicht für die Produktionsanwendung empfohlen)

Verwendung

Stellen Sie sicher, dass Sie das <script> in Ihr Projekt aufnehmen (wählen Sie eines davon):

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

Kredit

Dank an die folgenden Leute:

• Zach Leatherman für die Inspiration dieser Webkomponenten -Repo -Vorlage