{% include '@bolt-components-share/share.twig' with {
sources: [
{
name: 'facebook',
attributes: {
href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse'
}
},
{
name: 'x',
attributes: {
href: 'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
}
},
{
name: 'linkedin',
attributes: {
href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
}
},
{
name: 'email',
attributes: {
href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
}
}
],
copy_to_clipboard: {
text_to_copy: 'https://boltdesignsystem.com'
},
} only %}| 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
| — |
|
|
display
|
Controls the display of the share options. |
string
|
inline
|
|
|
copy_to_clipboard
|
object
| — | ||
|
inline
(deprecated) |
Button version has been removed so this prop is no longer needed. |
— | — |
|
|
copyToClipboard
(deprecated) |
Please use copy_to_clipboard. |
— | — |
|
items
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
name
|
Name of the social media source. |
string
| — |
|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
url
(deprecated) |
Please pass the href value through the source attributes object. |
— | — |
|
npm install @bolt/components-share{% include '@bolt-components-share/share.twig' with {
sources: [
{
name: 'facebook',
attributes: {
href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse'
}
},
{
name: 'x',
attributes: {
href: 'https://x.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
}
},
{
name: 'linkedin',
attributes: {
href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
}
},
{
name: 'email',
attributes: {
href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
}
}
],
copy_to_clipboard: {
text_to_copy: 'https://boltdesignsystem.com'
},
} only %}size prop to control the title text size, the icon size, and the spacing between the icons.
{% include '@bolt-components-share/share.twig' with {
size: 'small',
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}{% set popover_trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Share menu',
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% set popover_content %}
{% include '@bolt-components-share/share.twig' with {
display: 'menu',
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: popover_trigger,
content: popover_content,
spacing: 'none',
} only %}opacity prop to control it.
{% include '@bolt-components-share/share.twig' with {
opacity: 60,
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}align prop to control it.
{% include '@bolt-components-share/share.twig' with {
align: 'center',
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}<div class="t-bolt-dark">
// Put the component inside a themed container
{% include '@bolt-components-share/share.twig' with {
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}
</div>text prop to control it.
{% include '@bolt-components-share/share.twig' with {
text: 'This is a custom title',
sources: var_foo,
copy_to_clipboard: var_bar,
} only %}