Spaltenlayout

Spaltenlayout in Storybook

Die Komponente ColumnsLayout wird für das Layout von Seiten in spaltenbasierter Form verwendet. Jede Spalte wird durch eine GridLayout-Komponente dargestellt. Der zugehörige Inhalt entspricht den umschlossenen untergeordneten Elementen zwischen dem öffnenden und dem schließenden GridLayout-Tag.

ColumnsLayout erweitert die Komponente GridLayout, sodass alle anderen Eigenschaften übergeben werden können, die von GridLayout unterstützt werden.

onColumnsRearrange

Wird in folgenden Fällen aufgerufen:

• Für den Messpunkt sind mehrere Spalten angegeben, z. B. { phone: [1, 1] }.
• Für den aktuellen Messpunkt ist eine vom Desktop-Messpunkt abweichende Anzahl von Spalten angegeben.

Beispiel: Für die Komponente ColumnsLayout sind drei untergeordnete Elemente angegeben. In der Desktop-Ansicht sind daher drei Spalten vorhanden: [1, 1, 2]. Angenommen, für Tablets wird columns: [1, 2] festgelegt. In diesem Fall wird onColumnsRearrange aufgerufen.

Nachfolgend ein Beispiel für die Implementierung der 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

Die Eigenschaft variant gibt an, wie die Spalten am Messpunkt gestapelt oder zusammengeführt werden. Sie wird unter den gleichen Umständen wie onColumnsRearrange aufgerufen. Das Standardverhalten besteht darin, die weiteren Spalten unter der ersten Spalte umzubrechen.

Es sind vier vordefinierte variant-Werte verfügbar:

• mergeColumnsToFirst: Führt untergeordnete Elemente der N Spalten nach der ersten Spalte in der ersten Spalte zusammen.
• mergeColumnsToLast: Führt untergeordnete Elemente der N Spalten vor der letzten Spalte in der letzten Spalte zusammen.
• stackColumnsToFirst: Fügt die N+1 ersten Spalten mit GridLayout als erster Spalte zusammen.
• stackColumnsToLast: Fügt die N+1 letzten Spalten mit GridLayout als letzter Spalte zusammen.

N = D - T: Anzahl der Spalten, die verringert werden müssen. Dabei gilt:

• D: Anzahl der Spalten auf dem Desktop
• T: Anzahl der Spalten auf dem Tablet

Wenn für den Desktop drei Spalten und für das Tablet zwei Spalten angegeben sind, dann gilt 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>