Idéal pour répartir des blocs sur plusieurs colonnes "responsives"
{up flexauto=x_ordi | tablet=x_tablet | mobile=x_mobile }contenu{/up flexauto}syntaxe 2 :
{up flexauto=x_ordi-x_tablet-x_mobile }contenu{/up flexauto}x=1 à 12 est le nombre de colonnes sur grand écran et tablette. 4 sur mobile.
- flexauto = 3: nombre de colonnes sur grand écran ou ordi-tablet-mobile
- tablet = 2: nombre de colonnes sur moyen écran
- mobile = 1: nombre de colonnes sur petit écran
Style
- id: identifiant
- class: classe(s) ajoutée(s) au bloc parent
- style: style inline ajouté au bloc parent
- bloc-style: style inline ajoutés au bloc enfant
- css-head (base-css): style ajouté dans le HEAD de la page
- Version 1.8
- ajout options bloc-style & css-head.
- ajout possibilité de séparateurs
- Version 2.1
- saisie compacte du nombre de colonnes en responsive :
flexauto=3-2-1est équivalent àflexauto=3 | tablet=2 | mobile=1
- saisie compacte du nombre de colonnes en responsive :
Pour obtenir la grille ci-dessous, ce simple code convient:
{up flexauto}
<p>bloc n°1</p>
<div>bloc n°2</div>
<h4>bloc n°3</h4>
<p>bloc n°4</p>
<p>bloc n°5</p>
<p>bloc n°6</p>
{/up flexauto}
bloc n°1
bloc n°3
bloc n°4
bloc n°5
bloc n°6
Vous remarquerez la tolérance pour définir les blocs enfants. N'importe quel type de bloc convient tant qu'il est de premier niveau
Par défaut, le nombre de colonnes est de 3 sur grand écran, 2 sur moyen et 1 sur petit.
L'exemple ci-dessous montre comment modifier ce comportement. Il ajoute aussi une marge entre les cellules avec la classe fg-gap. Toutes les classes de UP-Flexgrid sont utilisables
{up flexauto=6 | tablet=3 | mobile=2 | class=fg-gap}bloc n°1
bloc n°3
bloc n°4
bloc n°5
bloc n°6
{up addcsshead=
.fg-row > *:nth-child(odd) [background-color:violet]
.fg-row > *:nth-child(even) [background-color:tan]
.fg-row > * [padding:5px;margin-bottom:0;border:#666 dotted 2px;text-align:center]
}notez que UP admet et comprend des arguments sur plusieurs lignes. Pratique pour se relire!
Faciliter la mise en page
Pour créer des blocs de contenus, vous pouvez les séparer par des shortcodes séparateurs comme dans l'exemple ci-dessous.
Léopard
Ecureuil
Perroquets
Macaques
Cheetah-Masai-Mara
Muguet
Le code
Une copie d'une partie du shorcode en mode wysiwyg dans l'éditeur :
ainsi que la totalité du shortcode en mode code :
<p>{up flexauto=3 | tablet=2 | mobile=1 | class=fg-gap | style=text-align:center | css-head=#id img[width:100%]}</p>
<p><img src="/images/photos/Leopard-africain-mini.jpg" alt="" /></p>
<p>Léopard</p>
<p>{====}</p>
<p><img src="/images/photos/Ecureuil-rouge-eurasien-mini.jpg" alt="" /></p>
<p>Ecureuil</p>
<p>{====}</p>
<p><img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" alt="" /></p>
<p>Perroquets</p>
<p>{====}</p>
<p><img src="/images/photos/black-crested-macaque-mini.jpg" alt="" /></p>
<p>Macaques</p>
<p>{====}</p>
<p><img src="/images/photos/Kenya-Cheetah-Masai-Mara-mini.jpg" alt="" /></p>
<p>Cheetah-Masai-Mara</p>
<p>{====}</p>
<p><img src="/images/photos/brins-de-muguet-mini.jpg" alt="" /></p>
<p>Muguet</p>
<p>{/up flexauto}</p>Les options du shortcode :
flexauto=3, tablet=2, mobile=1 définissent le nombre de colonne selon la largeur de l'écran
class=fg-gap : une classe pour ajouter un espace entre les colonnes
style=text-align:center :pour centrer le contenu des cellules
css-head=#id img[width:100%] : force les images à 100% de la largeur des colonnes. #id limite la portée de cette règle à cette action.
upactionslist (1) readmore (1) csv2def (1) div (1) addcsshead (1) flexAuto (1) FLEXAUTO (1) flexauto (1) jcontent-info (1)