Examples
Localization
How to provide social sharing buttons in your needed languages.
The <SocialShare> component comes with two localized strings, provided by default in English:
- the rendered label inside the button
- the value of the
aria-labelattribute, used for accessibility purposes
To fully localize the component in your needed languages, you only need to override their default values:
- to localize the label, you can use the
labelslot - to localize the
aria-labelattribute, just pass it the<SocialShare>component
The following example fully localizes the component in Italian:
<SocialShare
v-for="network in ['facebook', 'x', 'linkedin', 'email']"
:key="network"
:network="network"
:aria-label="`Condividi con ${network}`"
>
<template #label>Condividi</template>
</SocialShare>
When customizing the
aria-label attribute, make sure that values are unambiguous for people using assistive technologies. An easy way to solve this is using the network name as part of it, instead of i.e. "share button"