Follow-us
Permet, avec un seul item, de crée la zone "suivez-nous" avec les icônes des réseaux sociaux
Exemple minimal
<item name='followus' type='followus'>
</item>
</item>
Exemple complet
<item name='followus' type='followus'
size='40'
margin='10'
shape='round'
color='#fff'
background-color='#f00'
order='facebook,instagram,linkedin'>
<css justify-content='flex-end'/>
</item>
size='40'
margin='10'
shape='round'
color='#fff'
background-color='#f00'
order='facebook,instagram,linkedin'>
<css justify-content='flex-end'/>
</item>
Attributs
| attribut | défaut | description |
|---|---|---|
| name | identification unique | |
| type | type d'item ='followus' | |
| size | 32 | taille de chaque icĂ´ne (en pixel) |
| shape | 'square' | 'square' ou 'round' |
| margin | 1/5 de la size | taille de la marge entre 2 icĂ´nes (en pixel) |
| color | couleur officielle | |
| background-color | couleur officielle | |
| order | 'newsletter,facebook,instagram,linkedin,youtube,twitter' | ordre d'apparition des icĂ´nes |
| test | liste des icônes (séparées par des virgules) qu'on veut afficher pendant les tests, même si l'URL n'est pas encore connue. exemple: test='facebook,instagram,linkedin' |
Alignement
le code resultant est un <div> qui contient directement des <a>. Ce div est en display:flex. Par défaut, le justify-content est en flex-start (stackés à gauche). On peut donc modifier le justify-content ainsi, par exemple:
<item name='followus' type='followus'>
<css justify-content='flex-end'/>
</item>
<css justify-content='flex-end'/>
</item>
Exemple pour redimensionner et/ou déplacer une icône spécifique:
<item name='followus' type='followus' size='42' shape='round' color='white' background-color='red'>
<css selector='.facebook .icon' width='36px' height='36px'/>
<css selector='.facebook' position='relative' top='-5px'/>
</item>
<css selector='.facebook .icon' width='36px' height='36px'/>
<css selector='.facebook' position='relative' top='-5px'/>
</item>
Exemple pour séparer la "newsletter" des icones des réseaux sociaux
<item name='followus' type='followus' size='32'>
<css selector='.newsletter' padding-right='14px' border-right='2px solid #333' margin-right='10px'/>
</item>
Editer<css selector='.newsletter' padding-right='14px' border-right='2px solid #333' margin-right='10px'/>
</item>
