Disposición de las columnas

Disposición de las columnas en Storybook

El componente ColumnsLayout se utiliza para diseñar páginas en forma de columnas, donde cada columna está representada por un componente GridLayout y su contenido son los elementos secundarios contenidos entre las etiquetas de apertura y cierre de GridLayout.

ColumnsLayout extiende el componente GridLayout para que se pueda pasar cualquier otra propiedad que GridLayout acepta.

onColumnsRearrange

Se invoca si:

• hay más de una columna en el punto de interrupción, por ejemplo { phone: [1, 1] };
• el punto de interrupción actual tiene un número de columnas diferente al punto de interrupción del equipo de escritorio.

Por ejemplo, hay 3 elementos secundarios proporcionados en el componente ColumnsLayout, y así, en la vista de escritorio, tenemos tres columnas [1, 1, 2]. Supongamos que, en la tablet, configuramos columns: [1, 2]. En ese caso, se invoca onColumnsRearrange.

A continuación, se muestra un ejemplo de la implementación 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];
};

variant

La propiedad variant especifica cómo se apilan o combinan las columnas en el punto de interrupción. Se invoca en las mismas circunstancias que onColumnsRearrange. El comportamiento predeterminado es ajustar las otras columnas para que queden debajo de la primera.

Hay cuatro variantes predefinidas:

• mergeColumnsToFirst: combina elementos secundarios de N columnas después de la primera columna en la primera columna.
• mergeColumnsToLast: combina elementos secundarios de N columnas antes de la última columna en la última columna.
• stackColumnsToFirst: acepta las primeras N+1 columnas y las contiene junto con GridLayout como la primera columna.
• stackColumnsToLast: acepta las últimas N+1 columnas y las contiene junto con GridLayout como la última columna.

N = D - T: es el número de columnas que se deben reducir, donde:

• D: número de columnas en el escritorio,
• T: número de columnas en la tablet.

Por ejemplo, si la computadora escritorio tiene tres columnas, la tablet tiene dos columnas, entonces 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>