La balise de classe / The class tag : <b:class>
La balise singleton <b:class>
est une balise d'instruction qui permet d'ajouter à la balise parente une valeur dans un attribut class
.
La syntaxe
<div> <b:class cond='CONDITION' name='CLASS_NAME'/> </div>
La balise
<b:class>
travaille dans l'ensemble du code XML, excepté à l'intérieur d'un balisage<![CDATA[
.Plusieurs balises
<b:class>
peuvent se cumuler.Les balises
<b:class>
ne peuvent pas s'imbriquer.
Les attributs
La balise doit contenir plusieurs attributs dont certains sont obligatoires.
<b:class cond='CONDITION'
name='CLASS_NAME'/>
<b:class cond='CONDITION'
expr:name='EXPRESSION'/>
Attributs | Description | Classification | Préfixe « expr: » | Implantation |
---|---|---|---|---|
name |
Nom de classe. La valeur attendue est le nom de la classe qui sera ajouté à la balise parente. Accompagné du préfixe
|
Classification : HTML classic | Préfixe « expr: » : Autorisé | Implantation : Obligatoire |
cond |
Condition d'exécution de la balise. La valeur attendue doit être boolean ( |
Classification : XHTML Blogger | Préfixe « expr: » : Autorisé | Implantation : Facultative |
Quelques exemples
Ajouter une classe
<div> <b:class name='footer'/> </div>
La nouvelle classe footer
sera ajoutée à la balise parente <div>
dans le rendu HTML.
Résultat
<div class='footer'> </div>
Ajouter une classe avec une condition
<div> <b:class cond='data:view.isHomepage' name='footer'/> </div>
La nouvelle classe footer
sera ajoutée à la balise parente <div>
dans le rendu HTML uniquement si la page courante est la page d'accueil.
Résultat si vrai
<div class='footer'> </div>
Résultat si faux
<div> </div>
Ajouter une classe à une classe existante
<div class='section'> <b:class name='footer'/> </div>
La nouvelle classe footer
sera ajoutée à la balise parente <div>
dans le rendu HTML. Les classes existantes dans la balise parente sont conservées.
Résultat
<div class='section footer'> </div>
Astuce :
Pour écraser une classe existante, utilisez la balise d'attribut.
Écraser la classe existante
<div class='footer'> <b:attr name='class' value='header'/> </div>
Cumuler plusieurs classes
<div class='section'> <b:class name='footer'/> <b:class name='left'/> </div>
Les nouvelles classes footer
et left
seront ajoutées à la balise parente <div>
dans le rendu HTML. Les classes existantes dans la balise parente sont conservées.
Résultat
<div class='section footer left'> </div>
Ajouter une classe variable
<div> <b:class expr:name='data:view.isHomepage ? "superfooter" : "footer"'/> </div>
L'attribut name
a été converti en une expression Blogger pouvant contenir une donnée ou une opération. Dans cet exemple, l'expression est un opérateur ternaire. Le nom de la nouvelle classe sera superfooter
si la page courante est la page d'accueil. Dans le cas contraire, le nom de nouvelle classe sera footer
.
Résultat si page d'accueil
<div class='superfooter'> </div>
Résultat si autre page
<div class='footer'> </div>
Les autres balises
<b:attr>
<b:class>
<b:comment>
<b:defaultmarkups>
<b:defaultmarkup><b:eval>
<b:if>
<b:elseif>
<b:else><b:includable>
<b:include><b:loop>
<b:message>
<b:param><b:section>
<b:skin>
<b:template-skin><b:switch>
<b:case>
<b:default><b:tag>
<b:template-script>
<b:widget>
<b:widget-settings>
<b:widget-setting><b:with>
<data:foo>
<![CDATA[]]>