box — le bloc de couleur
Fonds, voiles, bandes et dégradés.
Le composant le plus simple, et l’un des plus utiles : fonds, voiles, bandes, séparateurs. 16 propriétés.
<box name="fond" extra="true">
<pos>0 0</pos>
<size>1 1</size>
<color>101820</color>
<zIndex>1</zIndex>
</box>| Propriété | Rôle |
|---|---|
pos size origin rotation rotationOrigin | placement |
color | couleur unie |
colorTop colorBottom | dégradé vertical |
colorLeft colorRight | dégradé horizontal |
colorTopLeft colorTopRight colorBottomLeft colorBottomRight | dégradé aux quatre coins |
zIndex disabled | profondeur, extinction |
Pas de path : une box n’affiche pas d’image. Pour un fond en image, prenez image.
Le voile de lisibilité
Le cas d’usage le plus fréquent : rendre un texte lisible sur une image quelconque.
<box name="voile-du-bas" extra="true">
<pos>0 0.7</pos>
<size>1 0.3</size>
<colorTop>00000000</colorTop>
<colorBottom>000000C0</colorBottom>
<zIndex>20</zIndex>
</box>Du transparent vers le noir à 75 % : le bas de l’écran s’assombrit progressivement, et le texte posé par-dessus reste lisible quelle que soit l’illustration derrière.
Une bande fine
<box name="filet" extra="true">
<pos>0.06 0.18</pos>
<size>0.3 2p</size>
<color>FFFFFF40</color>
</box>2p = deux pixels de haut, quelle que soit la définition : c’est l’un des rares cas où l’unité en pixels est le bon choix.