mittwald Flow Logo

Components

ColumnLayout

Das ColumnLayout organisiert Inhalte in Spalten. Sowohl die Anzahl der Spalten als auch deren Größe lassen sich flexibel für verschiedene Breakpoints definierenGitHub

Playground

Verwende <ColumnLayout />, um ein ColumnLayout darzustellen.

import {
  ColumnLayout,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<ColumnLayout rowGap="s" columnGap="l">
  <TextField isRequired>
    <Label>Vorname</Label>
  </TextField>
  <TextField isRequired>
    <Label>Nachname</Label>
  </TextField>
  <TextField isRequired>
    <Label>Straße</Label>
  </TextField>
  <TextField isRequired>
    <Label>Hausnummer</Label>
  </TextField>
</ColumnLayout>

Das ColumnLayout erzeugt ein flexibles Spalten-Layout, das für die Breakpoints s, m und l individuell angepasst werden kann. Diese Breakpoints beziehen sich nicht auf die Bildschirmgröße, sondern auf die Breite des Containers, in dem das ColumnLayout verwendet wird. Standardmäßig sind die Spalten wie folgt definiert:

  • Größe s bis 550 Pixel Breite: [1]
  • Größe m bis 850 Pixel Breite: [1, 1]
  • Größe l ab 851 Pixel Breite: [1, 1, 1]

In der Definition der Spalten-Breiten werden sowohl die Anzahl der Spalten als auch ihr Größenverhältnis festgelegt. Eine Aufteilung wie [1, 2, 1] erzeugt zum Beispiel drei Spalten, wobei die mittlere Spalte doppelt so breit ist wie die beiden äußeren.

Benutzerdefinierte Werte

Für jeden Breakpoint können eigene Werte für die Spaltenanzahl und deren Größenverhältnis festgelegt werden. Wenn für einen größeren Breakpoint keine eigenen Werte definiert sind, übernimmt er automatisch die Werte des nächstkleineren Breakpoints. Standardwerte werden nur verwendet, wenn bei keinem kleineren Breakpoint benutzerdefinierte Werte angegeben sind. Beispiel:

  • Größe s bis 550 Pixel Breite: [1] (Default-Wert)
  • Größe m bis 850 Pixel Breite: [2, 1] (benutzerdefinierter Wert)
  • Größe l ab 851 Pixel Breite: [2, 1] (Wert von m geerbt)

In diesem Beispiel wurde für den Breakpoint m eine benutzerdefinierte Spaltenaufteilung festgelegt. Der Breakpoint l übernimmt diese Aufteilung von m, anstatt auf den Standardwert von [1, 1, 1] zurückzufallen. Da für den Breakpoint s kein benutzerdefinierter Wert angegeben wurde, bleibt er beim Standardwert von [1].

import {
  ColumnLayout,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<ColumnLayout m={[2, 1]}>
  <TextField isRequired>
    <Label>Straße</Label>
  </TextField>
  <TextField isRequired>
    <Label>Hausnummer</Label>
  </TextField>
</ColumnLayout>

Ausgeblendete Spalten

Als Werte für die Breakpoints kann neben Zahlen auch null mitgegeben werden. Das führt dazu, dass die entsprechende Spalte ausgeblendet wird. Hier wird beispielsweise das Bild in der kleinsten Ansicht ausgeblendet:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas, ullam aliquid fugit. Voluptate harum accusantium rerum ullam modi blanditiis vitae, laborum ea tempore, dolore voluptas. Earum pariatur, similique corrupti id officia perferendis. Labore, similique. Earum, quas in. At dolorem corrupti blanditiis nulla deserunt laborum! Corrupti delectus aspernatur nihil nulla obcaecati ipsam porro sequi rem? Quam.
mittwald
import {
  ColumnLayout,
  Text,
  Image,
  Section,
  Heading,
} from "@mittwald/flow-react-components";

<ColumnLayout s={[1, null]} m={[2, 1]} l={[5, 1]}>
  <Section>
    <Heading>Lorem ipsum dolor sit amet</Heading>
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Cumque eius quam quas vel voluptas, ullam
      aliquid fugit. Voluptate harum accusantium rerum ullam
      modi blanditiis vitae, laborum ea tempore, dolore
      voluptas. Earum pariatur, similique corrupti id
      officia perferendis. Labore, similique. Earum, quas
      in. At dolorem corrupti blanditiis nulla deserunt
      laborum! Corrupti delectus aspernatur nihil nulla
      obcaecati ipsam porro sequi rem? Quam.
    </Text>
  </Section>
  <Image
    src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
    alt="mittwald"
  />
</ColumnLayout>

Abstände

Die Abstände des ColumnLayout können in drei Stufen angepasst werden:

  • s = 8px
  • m = 16px
  • l = 24px

Die property rowGap steuert die Abstände zwischen den Zeilen (oben und unten), columnGap die Abstände zwischen den Spalten (rechts und links) und gap setzt alle Abstände gleichzeitig (oben, unten, rechts und links).

import {
  ColumnLayout,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<ColumnLayout m={[1, 1]} rowGap="s" columnGap="l">
  <TextField isRequired>
    <Label>Vorname</Label>
  </TextField>
  <TextField isRequired>
    <Label>Nachname</Label>
  </TextField>
  <ColumnLayout s={[2, 1]} columnGap="m">
    <TextField isRequired>
      <Label>Straße</Label>
    </TextField>
    <TextField isRequired>
      <Label>Hausnummer</Label>
    </TextField>
  </ColumnLayout>
  <TextField isRequired>
    <Label>Ort</Label>
  </TextField>
</ColumnLayout>

Overview