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 Breakpoint sind mehrere Spalten angegeben, z. B. { phone: [1, 1] }.
• Für den aktuellen Breakpoint ist eine vom Desktop-Breakpoint 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 des variant-Werts 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 Breakpoint gestapelt oder zusammengeführt werden. Sie wird unter den gleichen Umständen wie onColumnsRearrange aufgerufen. Als Standardverhalten werden die anderen Spalten in der ersten Spalte umschlossen.

Vier vordefinierte variant-Werte sind 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>