wiz-social-follow-icons | Viseven Help Center

UI element to show the set of social icons.

Installation

Run following command in console to install the module:

wiz install @email/wiz-social-follow-icons

Link

import wizSocialFollowIcons from 'wiz-social-follow-icons';

Add this link directly to the layout (App.vue) or block (./common/blocks/ or ./common/blocks-library/):

export default {
components: {
wizSocialFollowIcons
}
...

Basic usage

Markup:

<wiz-social-follow-icons align-icons="left" :items="iconItems" icon-border-style="rounded" icon-border-color="#fff"></wiz-social-follow-icons>

Script:

export default {
name: 'block',
data: function () {
return {
iconItems: [
{
'link': 'https://www.linkedin.com/company/viseven-gmbh/',
'alt': this.$t('alt1'),
'icon': 'node_modules/wiz-social-follow-icons/media/images/linkedin.png',
'label': 'LinkedIn'
},
{
'link': 'https://twitter.com/viseven_CLM',
'alt': this.$t('alt2'),
'icon': 'node_modules/wiz-social-follow-icons/media/images/twitter.png',
'label': 'Twitter'
},
{
'link': 'https://www.youtube.com/channel/UCWlpXCeBtfM8GVFf6hOR1Yg?view_as=subscriber',
'alt': this.$t('alt3'),
'icon': 'node_modules/wiz-social-follow-icons/media/images/youtube.png',
'label': 'YouTube'
},
{
'link': 'https://www.facebook.com/VisevenDigitalContentFactory/',
'alt': this.$t('alt4'),
'icon': 'node_modules/wiz-social-follow-icons/media/images/facebook.png',
'label': 'Facebook'
},
{
'link': 'https://plus.google.com/b/111852880104055952869/',
'alt': this.$t('alt5'),
'icon': 'node_modules/wiz-social-follow-icons/media/images/gp.png',
'label': 'Google+'
}
]
}
}
}

Localization:

<i18n>
{
"en": {
"alt1": "LinkedIn",
"alt2": "Twitter",
"alt3": "YouTube",
"alt4": "Facebook",
"alt5": "Google+"
}
}
</i18n>

Parameters

Property	Type	Default	Description
`alignIcons`	String	`center`	Icon align (`left`, `center`, `right`)
`iconBorderStyle`	String	`squared`	Icon style (`squared`, `rounded`)
`itemBorderWidth`	Number	1	Border width
`itemWidth`	Number	30	Item width
`iconBorderColor`	String	`#ffffff`	Icon border color
`items`	Array	`[]`	Social Icon (Array of objects (keys: link, alt, icon, __label) )