‍

Components

Integrations

ColumnLayout

Das ColumnLayout organisiert Inhalte in Spalten, definierbar je Breakpoint.
Vorname
Max
Nachname
Mustermann
Straße
Musterstraße 1
Ort
32423 Minden
Telefon
+49 571 000000
E-Mail
max@example.com
import {
  ColumnLayout,
  Content,
  Label,
  LabeledValue,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <LabeledValue>
    <Label>Vorname</Label>
    <Content>Max</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Nachname</Label>
    <Content>Mustermann</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Straße</Label>
    <Content>Musterstraße 1</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Ort</Label>
    <Content>32423 Minden</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Telefon</Label>
    <Content>+49 571 000000</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>E-Mail</Label>
    <Content>max@example.com</Content>
  </LabeledValue>
</ColumnLayout>

Best Practices

  • Verwende nicht zu viele Spalten, in der Regel höchstens vier.
  • Wähle die Spaltenbreiten bewusst. Einheitliche Breiten wirken harmonisch, unterschiedliche lenken den Fokus auf breitere Inhalte.
  • Kombiniere das ColumnLayout bei Bedarf mit einer Section‍. Das schafft übersichtliche Layouts.
  • Verschachtele mehrere ColumnLayouts, um Inhalte optisch zu gruppieren. Jedes verschachtelte ColumnLayout bildet einen eigenen Container und bricht bei seiner eigenen Breite um, nicht bei der des äußeren.

Breakpoints

Die Breakpoints beziehen sich auf die Breite des Containers, in dem das ColumnLayout steht, nicht auf die des Bildschirms. Ihre Default-Werte sind:

  • 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]

Ein Breakpoint ohne eigenen Wert übernimmt den des nächstkleineren; die Default-Werte greifen nur, solange kein kleinerer Breakpoint gesetzt ist.

Spalten

Die Properties s, m und l legen je Breakpoint fest, wie viele Spalten es gibt und in welchem Verhältnis sie stehen.

Ausgeblendete Spalten

Als Wert kann neben Zahlen auch null mitgegeben werden. Die entsprechende Spalte wird dann ausgeblendet.

mStudio entdecken

Du willst das Beste aus deinen Projekten herausholen? Unsere Wissensdatenbank hilft dir dabei, das mStudio und seine Möglichkeiten besser kennenzulernen.
mittwald

Abstände

Die Abstände des ColumnLayout können in vier Stufen angepasst werden: s, m, l und xl.

Das 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.

Properties

PropertyTypeDescription
children
ReactNode
columnGap
s | m | l | xl
Size of the column gap between the content blocks inside the column layout.
elementType
div | ExoticComponent<{}> | ul
The HTML element or React component rendered as the elements root.
gap
s | m (default) | l | xl
Size of the row and column gap between the content blocks inside the column layout.
l
(number | null)[]
Column layout for container size l.
m
(number | null)[]
Column layout for container size m.
rowGap
s | m | l | xl
Size of the row gap between the content blocks inside the column layout.
s
(number | null)[]
Column layout for container size s.
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite