Cette action permet une saisie rapide et sûre d'attributs (classe et style) pour un bloc.
Les éditeurs wysiwyg ont une fâcheuse tendance à répéter les attributs d'un bloc DIV. Il est également très difficile de visualiser la zone concernée si l'attribut n'est pas visuel et/ou non pris en charge par la feuille de style de l'éditeur. Si vous utilisez un éditeur code, c'est aussi l'assurance que rien ne bougera si l'article est modifié ultérieurement dans un éditeur wysiwyg.
L'action DIV et sa petite sœur SPAN permettent de saisir un bloc sans devoir passer en mode code.
{up div=class_and_style}content{/up div}- div: classes et style (séparateur : point-virgule)
- id: si indiqué, l'attribut ID est ajouté à la balise SPAN
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
La syntaxe est simple et très permissive comme vous pouvez le voir sur ces exemples :
{up div=bg-rouge t-jaune tc b}des classes{/up div}{up div=background:red;color:yellow;text-align:center;font-weight:bold}des styles{/up div}{up div=bg-rouge;color:yellow;tc b}un joyeux mélange{/up div}Le fait de pouvoir mélanger classes et styles est une fonctionnalité de base de UP pour toutes les options les spécifiant. La seule contrainte est d'isoler chaque style par des points-virgules.
Si vous préférez, vous pouvez utiliser des options spécialisées
{up div | class=bg-rouge tc b | style=color:yellow}retour à la tradition{/up div}Il est possible d'imbriquer les actions. Exemple :
du texte en jaune sur fond bleu
du texte en bleu sur fond jaune
du texte en jaune sur fond bleu
{up div=bg-bleu t-jaune ph1}
du texte en {up span=bd-white ph1}jaune{/up span} sur fond bleu
{up div=bg-jauneFonce t-bleu ph1}
du texte en bleu sur fond jaune
{/up div}
du texte en jaune sur fond bleu
{/up div}Exemples pratiques
Je ne sais pas si vous avez déjà saisi du texte pour l'afficher sur plusieurs colonnes, mais ce n'est pas évident à gérer. On ne sait pas où ça commence ni où ça finit.
{up div=text-col-2}
votre texte sur plusieurs lignes
{up div=break-inside:avoid}
un bloc à conserver sur la même colonne
{/up div <--- no-break}
votre texte sur plusieurs lignes
{/up div <--- text-col-2}Le texte ci-contre serait visible dans un éditeur wysiwyg.
Le premier shortcode marque le début du texte à afficher sur 2 colonnes et le dernier la fin.
Notez que j'ai repris l'argument du shortcode ouvrant dans le shortcode fermant pour m'en servir comme commentaire.
text-col-2 est une classe de UP qui permet un affichage responsive sur plusieurs colonnes. Il existe aussi une version sur 3 colonnes : text-col-3.
div=break-inside:avoid empêche le saut de colonne pour le bloc. J'utilise le style direct, mais UP propose la classe text-col-no-break
id et css-head
Vous pouvez utiliser cette action pour modifier les attributs de blocs internes sur lesquels vous ne pouvez pas agir directement. id=foo donne un ancrage à la règle CSS qui est définie avec css-head.
Un texte avec un mot en rouge.
{up div | id=foo | css-head=#foo span[color:red] }
Un texte avec un mot en <span>rouge</span>.
{/up div}Suggestions
Les fonctionnalités proposées par DIV & SPAN peuvent être réalisées avec l'action HTML. Pour reprendre le premier exemple :
{up html=div | class=bg-rouge;color:yellow; tc b}HTML, l'autre méthode{/up html}Nous avons un résultat identique, même avec notre mélange de classes et styles, c'est juste plus long à saisir !
La méthode HTML est à utiliser si vous avez besoin d'utiliser une balise avec une valeur sémantique comme header, footer, main, section, article.
Elle permet de définir d'autres types d'attributs que class et style.
box (1) tooltip (2) upactionslist (1) flexbox (6) div (7) span (2) html (1) jcontent-info (1)