Passer au contenu principal

Disposition de la grille

Disposition de la grille dans Storybook

Présentation​

GridLayout étend le composant Grid et simplifie son utilisation. Nous vous recommandons d'utiliser GridLayout lors de la création de mises en page, car vous pouvez obtenir les mêmes résultats qu'avec Grid, mais avec une plus grande facilité de configuration et de maintenance. Passez à Grid si votre mise en page est plus complexe.

<GridLayout columns={[1, 1]}>
  <SomeElement />
  <SomeElement />
</GridLayout>
Note: GridLayout enveloppe automatiquement tout élément enfant dans un composant GridItem, de sorte que vous pouvez transmettre n’importe quel élément en tant qu’enfant. Vous pouvez également transmettre directement des composants GridItem et obtenir un contrôle supplémentaire.

Lorsque vous contrôlez la disposition générale au niveau de GridLayout, vous pouvez étendre/remplacer ce paramètre au niveau de GridItem. Consultez les exemples ci-dessous pour plus de détails.

Définition des propriétés enfants​

Il est possible de modifier un comportement et une position de composant en les fusionnant dans un composant GridItem. Par exemple, pour présenter l'un des composants en deux colonnes, vous pouvez écrire :

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridItem colSpan={2}> 
    {   /* Item content */ }
  <GridItem>
  <GridItem> 
    {   /* Item content */ }
  <GridItem>
  <GridItem > 
    {   /* Item content */ }
  <GridItem>
</GridLayout>

Reportez-vous à la page de la grille pour en savoir plus sur GridItem.

En guise d'alternative, étant donné que GridLayout encapsule automatiquement n’importe quel élément enfant dans un composant GridItem, vous pouvez définir les propriétés de tous leurs enfants à un seul et même endroit en utilisant la propriété gridItems pour GridLayout.

<GridLayout
  columns={[1, 1]}
  gridItems={[{ colSpan: 2 }, null, null]}
  id="grid-layout">
  <SomeElement /> { /* will be 2-column wide */}
  <SomeElement />
  <SomeElement /> 
</GridLayout>

Propriété defaultGridItem​

À l’aide de la propriété defaultGridItem au niveau de GridLayout, vous pouvez définir les paramètres par défaut à appliquer à tous les enfants dans le cas où aucun autre remplacement n’est appliqué.

Dans cet exemple, les paramètres par défaut sont définis et une valeur différente est définie pour le deuxième enfant.

<GridLayout
  columns={[1, 1]}
  defaultGridItem={{ colSpan: 2, clone: false }}
  gridItems={[null, { colSpan: 1 }]}
  id="grid-layout">
  <SomeElement />
  <SomeElement />
</GridLayout>

Option de clonage GridItem​

Warning: GridItem transmet une propriété style à un composant intégré. Le composant doit ensuite le transmettre à la balise HTML sous-jacente. Si ce n'est pas le cas (certains composants Jutro ne le font pas), essayez de transmettre clone={false} à GridItem :
<GridItem
  colSpan={2}
  clone={false}>
  <SomeElement />
</GridItem>

À la place, SomeElement sera fusionné dans un <div> supplémentaire qui sera stylisé.

Imbrication de plusieurs composants GridLayout​

Vous pouvez placer des GridLayouts dans une autre GridLayout pour mettre en œuvre des conceptions plus complexes :

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
  </GridLayout>
</GridLayout>