Flow

Components

ColumnLayout

Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.GitHub

Beispiel

Im Default werden die Spalten folgendermaßen gesetzt:

  • s: [1]
  • m: [1, 1]
  • l: [1, 1, 1]
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";

<ColumnLayout>
  <TextField>
    <Label>Vorname</Label>
  </TextField>
  <TextField>
    <Label>Nachname</Label>
  </TextField>
  <TextField>
    <Label>Straße</Label>
  </TextField>
  <TextField>
    <Label>Hausnummer</Label>
  </TextField>
</ColumnLayout>

Benutzerdefinierte Values

Größere Größen erben von kleineren größen, sofern sie nicht gesetzt sind:

  • s: [1] (default)
  • m: [2, 1]
  • l: [2, 1] (inherited)
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";

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

Abstände konfigurieren

  • rowGap: Setzt Reihenabstände (s, m, l)
  • columnGap: Setzt Spaltenabstände (s, m, l)
  • gap: Setzt beide Abstände gleichzeitig (s, m, l)
import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout";
import TextField from "@mittwald/flow-react-components/TextField";
import Label from "@mittwald/flow-react-components/Label";

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