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é.
{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
- cell = 12: nombre de colonnes
- mobile: nombre de colonnes sur petit écran
- tablet: nombre de colonnes sur moyen écran
style des blocs enfants (colonnes)
- 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
style et options secondaires
- id: identifiant
- class: class bloc principal
- style: style inline bloc parent
- filter: conditions. Voir doc action filter (v1.8)
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 bg-bleuPale}
<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
version 1.8
- filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions
upactionslist (1) cell (4) modal (1) jcontent-info (1)