
Pour faciliter et alléger un article, il est souvent utile de masquer du texte ou des images.
{up readmore=texte bouton | textless=replier}
contenu caché {/up readmore}
- readmore: idem textmore
Texte des boutons
- textmore = lire la suite: texte bouton OUVRIR
- textless = replier: texte bouton FERMER
Style des boutons
- textmore-style: classe et style pour le bouton OUVRIR
- textmore-class: classe et style pour le bouton OUVRIR
- textless-style: classe et style pour le bouton FERMER
- textless-class: classe et style pour le bouton FERMER
Style pour le panneau contenu
- panel-style: classes et style pour le contenu (v2.6)
Style CSS des boutons
- id: identifiant
- class = uprm-btn: classe(s) pour les boutons OUVRIR et FERMER
- style: idem
- Version 2.6
- ajout option panel-style pour mettre en évidence le contenu
- Version 2.9
- ajout options textmore-class et textless-class pour styler le bloc enfant du bouton.
Utilisation minimaliste
{up readmore}
... le contenu masqué ...
{/up readmore}
affiche ce bouton sur toute la largeur de l'article qui permet d'affichier un contenu masqué.
Options
{up readmore=lang[fr=Cliquer pour voir les explications;en=Click for more information]
| textless=c'est bon, j'ai compris
| class=btn btn-primary
| panel-style=bg-jauneClair bd-gris p1}
... le contenu masqué ...
{/up readmore}
- readmore
- le libellé du bouton quand le contenu est masqué *
- textless
- le libellé du bouton quand le contenu est visible *
- class / style
- classe(s) pour personnaliser les boutons. Remplace le style par défaut
- textmore-class, textmore-style, textless-class, textless-style
- classe(s) et stylle inline pour personnaliser séparément les boutons more et less
- panel-style
- classe(s) et style pour mettre en évidence le contenu (v2.6)
* Les traductions optionnelles sont indiquées avec la syntaxe lang (readmore) ou avec l'action lang (textless)
Un exemple concret
Au début des démos, j'utilise cette action pour afficher le bouton "Voir les nouveautés"
Pour simplifier et généraliser cet usage, j'ai ajouté un prefset au fichier prefs.ini du dossier custom de l'action readmode (plus d'infos)
[changelog]
class="tr"
textmore="Voir les nouveautés"
textmore-class="bd-primary bd-arrondi ph1"
panel-style="box bg-beige p1 m-child-raz"
- Le contenu de la barre read-more est aligné à droite par la tr dans l'option class qui cible le conteneur.
- Pour éviter que le bouton utilise toute la largeur du bloc parent, le style est attribué à l'option textmore-class.
J'utilise des classes UP, mais un style inline est accepté à condition de les séparer avec des points-virgule. - Panel-style définit le bloc avec le contenu caché.
Si vous me posiez la question : "Pourquoi avoir des options style et class qui acceptent les mêmes arguments (classes et styles inline)"
Si je voulais exceptionnellement avoir un texte rouge pour le bouton textmore.
Comme c'est la dernière définition qui l'emporte, je dois reprendre tous les arguments de textmore-class du prefset + un t-rouge.
Ou plus simplement utilisé l'option textmore-style inutilisée pour ajouter une classe t-rouge.
upactionslist (1) readmore (3) csv2def (1) lang (2) modal (1) div (1) jcontent-info (1)