Share

Available as: Web ComponentShortcodeOxygen Element

Social share buttons. Currently includes Facebook, Twitter, Whatsapp and E-Mail.

<spx-share item-background="lightblue"> </spx-share>
<spx-share></spx-share>

Properties

class-item

Type: string

Apply classes to item.

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-share-font-size

Component font-size property.

font-size-max

Type: numberDefault: 1.4CSS variable: --spx-share-font-size-max

Component font-size-max property.

font-size-min

Type: numberDefault: 1CSS variable: --spx-share-font-size-min

Component font-size-min property.

item-background

Type: stringCSS variable: --spx-share-item-background

Item background.

item-border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-share-item-border-radius

Item radius border.

item-color

Type: stringCSS variable: --spx-share-item-color

Gap between buttons.

item-filter-hover

Type: stringDefault: 'brightness(110%) saturate(120%)'CSS variable: --spx-share-item-filter-hover

Filter hover.

item-gap

Type: stringDefault: '0.5em'CSS variable: --spx-share-item-gap

Gap between buttons.

item-gap-max

Type: numberDefault: 1

item-gap-min

Type: numberDefault: 0.4

item-padding

Type: stringDefault: '0.5em'CSS variable: --spx-share-item-padding

Item padding.

item-padding-max

Type: numberDefault: 1.2CSS variable: --spx-share-item-padding-max

Item max padding.

item-padding-min

Type: numberDefault: 0.5CSS variable: --spx-share-item-padding-min

Item min padding.

item-size

Type: stringDefault: '1em'

item-size-max

Type: numberDefault: 1

item-size-min

Type: numberDefault: 0.7

item-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-share-item-transition-duration

Item transition-duration.

item-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-share-item-transition-timing-function

Item transition-timing-function.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

target

Type: stringDefault: '_blank'

Button href target.

theme

Type: stringDefault: 'default'Choices: 'default', 'outline', 'minimal'

Button theme.

vertical

Type: boolean

Render buttons vertically.

Events

spxShareDidLoad

Fires after component has loaded.

Methods

reload

Reload component.