Reference/Xul/grid

Grid est une boite qui permet d'afficher ses elements fils en colonne et ligne, dans une grille.

Attributs de la balise

Attribut hérités de ElementXul.

Propriétés et Méthodes Javascript

Hérités de ElementXul.

Balises filles

Columns et Rows, qui permettent de déclarer respectivement les colonnes et les lignes.

Description complète

Avec Grid, il y a deux façons de définir la grille :

1. On definit les colonnes, et ensuite on indique pour chaque ligne, les elements qui seront placés dans les cellules.
2. On definit les lignes, et ensuite on indique pour chaque colonne, les elements qui seront placés dans les cellules.

Cela donne pour le premier cas :

 <grid flex="1">
  <columns>
    <column />
    <column />
    <column flex="1"/>
  </columns>

  <rows>
    <row>
      <button label="cellule haut gauche"/>
      <image src="monimage.png" />
      <description >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</description>
    </row>
    <row>
      <checkbox />
      <textbox />
      <button label="cellule bas droite"/>
    </row>
  </rows>
 </grid>

Pour obtenir la même chose, mais avec la deuxième manière de faire :

 <grid flex="1">
  <rows>
    <row />
    <row />
  </rows>

  <columns>
    <column>
      <button label="cellule haut gauche"/>
      <checkbox />
    </column>
    <column>
      <image src="monimage.png" />
      <textbox />
    </column>
    <column>
      <description >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</description>
      <button label="cellule bas droite"/>

    </column>
  </columns>
 </grid>