<panel> (experimental)
Permet l'insertion d'un panneau qui se superpose au contenu du site comme une popup mais attaché à un bord du site, généralement à gauche ou à droite. Ce panneau peut être refermé et rouvert par une bouton.
Le panneau peut contenir des item ou des bloc, mais éviter un conteneur car le position vertical est délicat suivant le contenu.
Exemple
<panel position='right' initial-state='opened'>
<css display='flex' flex-direction='column' justify-content='space-around' align-items='center' border-radius='180px'/>
<css margin-top='-70px' width='300px' height='300px' top='200px!important' right='0px!important' />
<css background-color='#eee' border='solid white 20px' border-color='rgba(255,255,255,0.6)!important' />
<css breakpoint='main' />
<item name='rdv' type='paragraph' level='0'>
<css background-color='#eee' color='white' text-align='center' />
<css use-font='txtF' font-size='1.6em' font-weight='700' color='white' text-align='center' text-transform='uppercase' />
<css selector='a' color='white' text-decoration='none' />
<css breakpoint="main" />
</item>
</panel>
<css display='flex' flex-direction='column' justify-content='space-around' align-items='center' border-radius='180px'/>
<css margin-top='-70px' width='300px' height='300px' top='200px!important' right='0px!important' />
<css background-color='#eee' border='solid white 20px' border-color='rgba(255,255,255,0.6)!important' />
<css breakpoint='main' />
<item name='rdv' type='paragraph' level='0'>
<css background-color='#eee' color='white' text-align='center' />
<css use-font='txtF' font-size='1.6em' font-weight='700' color='white' text-align='center' text-transform='uppercase' />
<css selector='a' color='white' text-decoration='none' />
<css breakpoint="main" />
</item>
</panel>
Attributs
| attribut | défaut | description |
|---|---|---|
| position | (requis) bord d'attache du panel, top, right, bottom, left | |
| initial-state | closed | opened ou closed pour définir l'état initial quand on arrive sur la page la 1ère fois. |
| auto-delay | 500 | délais après onload de la page pour faire apparaître le panel |
| save-state | true | mémorise l'état du panel pour toute la durée de la visite du site |
| bgcolor | couleur du fond | |
| panel-offset | 50% | position du centre du panel en % du bord de page concerné (50% = centré) |
| button-offset | 50% | position du centre du bouton toggle par rapport à la hauteur ou largeur du panel (50% = centré) |
Remarques
Le panel conserve son état (opened ou closed) quand on passe d'une page à l'autre.
Editer