{% 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 %}
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. |
— | — |
|
npm install @bolt/components-share
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.