2.23.0Share Component in Bolt
Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-share
The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.
u (URL) to scrap the page's OG Tags
url (recommended -- URL included with the Twee)text (recommended -- re-populated text highlighted in the Tweet composer)via (Attribute the source of a Tweet to a Twitter username, no @ needed)hashtags (A comma-separated list of hashtags to be appended to default Tweet text)url to scrap the page's OG Tags, but also can include:
titlesummarysourcesubjectbody<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />
{% include "@bolt-components-share/share.twig" with {
sources: [
{
name: "facebook",
url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse"
},
{
name: "twitter",
url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
},
{
name: "linkedin",
url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
},
{
name: "email",
url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
}
],
copy_to_clipboard: {
text_to_copy: "https://boltdesignsystem.com"
},
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| attributes | A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
| text | Defines the label text in front of the social icons. |
string
|
Share this page
|
|
| size | Controls the size of icons and spacing. |
string
|
medium
|
|
| align | Controls the horizontal alignment of label text and icons. |
string
|
start
|
|
| opacity | Controls the overall transparency of the share tool. |
integer
|
100
|
|
| sources | Social media sources to share to. |
array
| — |
|
| copy_to_clipboard | object
| — |
|
|
| inline | Button version has been removed so this prop is no longer needed. |
| — |
|
| copyToClipboard | Please use copy_to_clipboard. |
| — |
|
Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.