JoomlaDay FR

L'action cell permet des créer des colonnes côte à côte sur une seule ligne.

Cela permet, par exemple, d'insérer facilement une image à coté d'un texte ou une synthèse avec son développé à côté.

➠ cell : affiche de 1 à 6 blocs enfants sur une même ligne DEMO
syntaxe 1 : {up cell=x1-x2}contenu avec 2 blocs enfants{/up cell}
syntaxe 2 : {up cell=x1-x2}contenu cell-1 {====} contenu cell-2{/up cell}
x1-x2 sont les largeurs sur la base d'une grille de 12 colonnes
exemple cell=6-6 pour 2 colonnes égales.
On utilise les largeurs de la classe UP-Width
demo up.lomart.fr author Lomart version 1.0 - 08/2017 license GNU/GPLv3
  • cell=12: nombre de colonnes
  • mobile: nombre de colonnes sur petit écran
  • tablet: nombre de colonnes sur moyen écran
  • class: class bloc principal
  • style: style inline bloc parent
  • class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
  • style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6

    Cette action utilise les classes cell-* de la feuille de style up.css

    Utilisation minimaliste

    Notre proposition

    {up cell | class=w4 mcenter bloc3 cell-center}
    	<div>
    	<p>Notre proposition</p>
    	<button>Commander</button>
    	</div>
    	{/up cell}

    l'unique cellule, qui occupe 4/12 de la page (w4), est centrée horizontalement dans la page (mcenter).
    On utilise l'habillage bloc3 avec tous les éléments centrés verticalement (cell-center)

    Syntaxe wysiwyg

    Pour suivre le grand principe de UP de ne pas avoir à passer en mode code, le contenu des colonnes est séparé par le shortcode {===}, avec au minimum 3 signes égal.

    le contenu de la première colonne

    contenu colonne 2

    Le contenu ci-dessus est obtenu avec le code suivant (réduisez la taille de votre navigateur pour tester le comportement responsive):

    {up cell=3-9 | mobile=12-0 | tablet=6-6 | class=bg-violet p1 | class-*=bg-jauneClair p1 cell-center | style-1=border:blue 2px solid }
      <p>le contenu de la première colonne</p>
      <p><img id="img1" src="images/template/up-logo-70x300.png" alt="" /></p>
    {===========}
      <p>contenu colonne 2</p>
    {/up cell}

    Quelques explications:

    cell=3-9
    la largeur des colonnes en vue grand écran.
    mobile=12-0
    Sur mobile la première colonne occupera toute la largeur car la deuxième est masquée (0)
    tablet=6-6
    Sur moyen écran, les 2 colonnes auront la même largeur.
    class=bg-violet p1
    Un fond violet avec un padding est ajouté au conteneur parent.
    class-*=bg-jauneClair p1 cell-center
    Un fond jaune clair et un padding est ajouté à tous les blocs enfants. cell-center permet de centrer tous les contenu verticalement.
    style-1=border:blue 2px solid
    une règle CSS pour la première colonne.
    Dès que UP voit un paramètre qui se termine par -*, il crée 6 paramètres indicés de 1 à 6 pour les cibler individuellement. param-* est appliqué à toutes les colonnes, param-1 à la colonne 1, param-2 à la colonne 2, ...

    Syntaxe sans séparateur

    Sans séparateur {===}, on utilise les blocs enfants d premier niveau.

    le contenu de la première colonne

    contenu colonne 2

    Le méme test que ci-dessus, mais avec ce code:

    {up cell=3-9 | mobile=12-0 | tablet=6-6 | class=bg-violet p1 | class-*=bg-jauneClair p1 cell-center | style-1=border:blue 2px solid }</p>
    <div>
    	<p>le contenu de la première colonne</p>
    	<p><img id="img1" src="images/template/up-logo-70x300.png" alt="" /></p>
    </div>
    <div>
    	<p>contenu colonne 2</p>
    </div>
    <p>{/up cell}

    3, 4, 5 ou 6 colonnes

    Il suffit de l'indiquer comme largeurs dans l'argument principal. Exemple pour 4 colonnes : {up cell=2-3-4-1}

    colonne 1

    colonne 2

    colonne 2

    colonne 2

    colonne 3

    colonne 4