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

font-size

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

font-size-max

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

font-size-min

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

item-background

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

item-border-radius

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

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.5emCSS Variable: --spx-share-item-gap

Gap between buttons.

item-gap-max

Type: numberDefault: 1CSS Variable: --spx-share-item-gap-max

item-gap-min

Type: numberDefault: 0.4CSS Variable: --spx-share-item-gap-min

item-padding

Type: stringDefault: 0.5emCSS Variable: --spx-share-item-padding

item-padding-max

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

item-padding-min

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

item-size

Type: stringDefault: 1emCSS Variable: --spx-share-item-size

item-size-max

Type: numberDefault: 1CSS Variable: --spx-share-item-size-max

item-size-min

Type: numberDefault: 0.7CSS Variable: --spx-share-item-size-min

styling

Type: stringDefault: defaultChoices: default, fluid

Styling.

target

Type: stringDefault: _blank

Link href target.

theme

Type: stringDefault: defaultChoices: default, outline, minimal

Button theme.

vertical

Type: boolean

Render buttons vertically.

Events

spxShareDidLoad

Fires after component has loaded.