{up readmore=texte bouton | textless=replier} contenu caché {/up readmore}- readmore: texte bouton OUVRIR (idem textmore)
- btn-position = after: emplacement des boutons. before=au-dessus, after=au-dessous
Texte et style des boutons
- textmore = lire la suite: texte bouton OUVRIR
- textmore-style: classe et style pour le bouton OUVRIR
- textmore-class: classe et style pour le bouton OUVRIR
- textless = replier: texte bouton FERMER
- 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)
- panel-visible: hauteur visible du contenu quand masqué (px ou sélecteur CSS)
- panel-actif: événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu.
- panel-overlay: affiche un dégradé pour masque le bas du panel-visible. (vide=style standard ou règles CSS)
- panel-speed: vitesse d'apparition du contenu. Par défaut: 750ms
Style CSS des boutons
- id: identifiant
- class = bg-grisPale bg-gris bg-hover-grisClair p1 tc: classe(s) pour les boutons OUVRIR et FERMER
- style: idem
- css-head (base-css): règles CSS ajoutées dans le HEAD
- 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.
- Version 3.1
- Nouvelle version de l'action
- boutons au-dessus ou au-dessous
- partie visible avec ou sans estompage. Possibilité de dérouler/enrouler par clic ou double-clic
- vitesse apparition réglable
Utilisation minimaliste
{up readmore}
... le contenu masqué ...
{/up readmore}affiche ce bouton sur toute la largeur de l'article qui permet d'afficher un contenu masqué.
Avec des options
| Options | Commentaires |
|---|---|
| readmore | le libellé du bouton quand le contenu est masqué |
| btn-position v3.1 | emplacement des boutons. before=au-dessus, after=au-dessous |
| textmore | le libellé du bouton pour afficher le contenu |
| textmore-class textmore-style |
classe(s) et stylle inline pour personnaliser séparément les boutons more et less |
| textless | le libellé du bouton quand le contenu est visible * |
| 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) |
| panel-visible v3.1 | la hauteur de la partie toujours visible du contenu peut-être définie par:
|
| panel-overlay v3.1 | affiche un dégradé pour masque le bas du panel-visible. vide=style standard ou règles CSS. Ex: linear-gradient(to bottom, transparent, #999) |
| panel-speed v3.1 | vitesse d'apparition du contenu en millisecondes |
| panel-actif v3.1 | événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu. Les arguments acceptés sont : click, dblclick, mouseenter. Note : pour éviter qu'un double-clic sélectionne le texte, vous pouvez ajouter cette règle dans l'option css-head : #id .uprm-panel[user-select:none] |
| class style |
classe(s) et style(s) inline pour personnaliser le bloc contenant les 2 boutons. Par défaut, pour compatibilité avec la version précédente de cette action : bg-grisPale bg-gris bg-hover-grisClair p1 tc Pour les annuler, il suffit d'ajouter l'option class sans argument |
| css-head | des règles CSS personnalisées. Pour cibler un élément du readmore courant, utilisez #id. les classes internes sont : uprm-panel, uprm-overlay, uprm-btns, uprm-btn-more, uprm-btn-less |
Le tableau ci-dessus vous renseigne sur le rôle des options du shortcode utilisé ci-dessus. Il peut vous sembler compliqué, mais sachez que outre le fait de montrer les options en situation, je doit donner à manger aux utilisateurs fous qui s'amusent à pousser UP à fond.
{up readmore
| btn-position=before
| textmore=[span style="color:green"]+[/span] {up lang | fr=Cliquer pour voir toutes les options | en=Click to see all options}
| textmore-class=b
| textless=[span style="color:red;transform:rotate(45deg)"]+[/span] {up lang | fr=c'est super, j'ai tout compris. | en=that's great, i got it.}
| textless-class=t-gris
| panel-style=bd-gris
| panel-visible=#tbl-options thead
| panel-speed=4000
| panel-overlay
| panel-actif=DblClick
| class
| css-head=#id .uprm-btns span span[width:2rem; display: inline-block; font-weight:bolder; line-height=1; font-size:3rem]
}{up csv2table | id=tbl-options | model=blue | col-style-1=font-weight:bold | header=Options;Commentaires}
------------ le contenu de la table au format CSV ------------
{/up csv2table}{/up readmore}2 - les boutons seront placés au-dessus du contenu.
3 - le texte du bouton est composé d'un symbole dans un bloc span + un texte dans la langue du visiteur grâce à l'action lang
4 - le style spécifique du bouton "more" est ajouté ici. Notez que le style pour la partie entre span est géré par l'option css-head
5 & 6 - idem pour le texte et style du bouton less.
7 - juste une bordure grise autour du contenu
8 - pour voir les entêtes des colonnes lorsque le panneau est replié, j'indique le sélecteur CSS du header de la table. Notez en ligne 14 que je force l'id de la table. J'aurais pu indiquer une dimension en pixels
9 - pour la démo, je fixe la durée d'apparition du panneau sur 4 secondes
10 - pour ajouter un dégradé basique sur la partie visible du contenu, il suffit de mentionner cette option.
11 - j'ajoute la possibilité de déplier le contenu en double-cliquant sur la partie visible du contenu
12 - la mention sans argument de class me permet d'annuler le style par défaut des boutons
13 - css-head spécifie le style pour la partie entre span des boutons more et less
14 à 16 - la création du contenu. Notez que les shortcodes sont sur la même ligne pour éviter d'avoir des lignes blanches au final. Le fait que les options d'un shortcode soient sur plusieurs lignes ne pose aucun problème.
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 utiliser l'option textmore-style inutilisée pour ajouter une classe t-rouge.
span (6) upactionslist (1) readmore (2) csv2def (1) readmore
- Détails