Disposition des colonnes

Disposition des colonnes dans Storybook

Le composant ColumnsLayout permet d'effectuer des mises en page sous forme de colonnes ; chaque colonne est représentée par un composant GridLayout et son contenu correspond aux enfants enveloppés entre ces balises d'ouverture et de fermeture GridLayout.

ColumnsLayout étend le composant GridLayout afin que vous puissiez valider toute autre propriété acceptée par GridLayout.

onColumnsRearrange

Il est appelé si :

• Il existe plusieurs colonnes sur le point d'arrêt, par exemple { phone: [1, 1] }.
• Le point d'arrêt actuel a un nombre de colonnes différent du point d'arrêt de l'ordinateur de bureau.

Par exemple, il existe 3 enfants fournis au composant ColumnsLayout. L'affichage Bureau comporte donc trois colonnes [1, 1, 2]. Supposons que, sur la tablette, nous définissions columns: [1, 2]. Dans ce cas, onColumnsRearrange est appelé.

Voici un exemple d'implémentation de la variante mergeColumnsToFirst :

const mergeColumnsToFirst = (children, newColumnsNumber) => {
  // Compute how many columns have to be merged into first
  const numberOfColumnsToMerge = children.length - newColumnsNumber;

  const [firstColumn, ...restChildren] = children;
  // remove and get the columns to be merged into first column
  const columnsToMerge = restChildren.splice(0, numberOfColumnsToMerge);
  // Clone first column and inject children from removed column to it at the end
  const newFirstColumn = React.cloneElement(firstColumn, undefined, [
    ...childrenToArray(firstColumn.props.children),
    ...columnsToMerge
      .map((column) => childrenToArray(column.props.children))
      .flat(),
  ]);

  return [newFirstColumn, ...restChildren];
};

Variante

La propriété variant spécifie la façon dont les colonnes sont empilées ou fusionnées sur le point d'arrêt. Elle est appelée dans les mêmes circonstances que onColumnsRearrange. Le comportement par défaut consiste à envelopper les autres colonnes sous la première.

Il existe quatre variantes prédéfinies :

• mergeColumnsToFirst : fusionne les enfants des colonnes N après la première colonne avec la première colonne.
• mergeColumnsToLast : fusionne les enfants des colonnes N avant la dernière colonne avec la dernière colonne.
• stackColumnsToFirst : prend les N+1 premières colonnes et les enveloppe avec GridLayout comme première colonne.
• stackColumnsToLast : prend les N+1 dernières colonnes et les enveloppe avec GridLayout comme dernière colonne.

N = D - T : nombre de colonnes devant être réduites, dont :

• D : nombre de colonnes sur le bureau
• T : nombre de colonnes sur la tablette

Par exemple, si le bureau comporte trois colonnes, la tablette en compte deux, puis N = 3 - 2 = 1.

<ColumnsLayout
  variant="mergeColumnsToFirst"
  tablet={{
    columns: [1, 1],
  }}>
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-3">
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
</ColumnsLayout>