From 05ac0f2705f17f8dc8c89cebae7f2673c159880f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Ju=CC=88nke?= Date: Thu, 26 Sep 2024 15:47:29 +0200 Subject: [PATCH 1/4] write introduction --- .../column-layout/examples/default.tsx | 15 ++++--- .../structure/column-layout/index.mdx | 5 ++- .../structure/column-layout/overview.mdx | 42 ++++++++++++++----- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx index 988f105ef..5757852ce 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx @@ -2,17 +2,22 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + + + + + + + + + - - - - + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/index.mdx b/packages/docs/src/content/03-components/structure/column-layout/index.mdx index 5c03763a6..db0da2458 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/index.mdx +++ b/packages/docs/src/content/03-components/structure/column-layout/index.mdx @@ -1,6 +1,9 @@ --- component: ColumnLayout -description: Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden. +description: + Das ColumnLayout organisiert Inhalte in Spalten. Sowohl die Anzahl der Spalten + als auch deren Größe lassen sich flexibel für verschiedene Breakpoints + definieren --- diff --git a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx index e746f4189..f3df5c9b9 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx +++ b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx @@ -1,22 +1,42 @@ -# Beispiel +# Playground -Im Default werden die Spalten folgendermaßen gesetzt: - -- s: `[1]` -- m: `[1, 1]` -- l: `[1, 1, 1]` +Verwende ``, um ein ColumnLayout darzustellen. +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 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) +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]`. From 7992028d393891ce19cf7cbdb336c04e7e05d8ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Ju=CC=88nke?= Date: Thu, 26 Sep 2024 16:38:07 +0200 Subject: [PATCH 2/4] write overview and guidelines --- .../structure/column-layout/guidelines.mdx | 41 +++++++++++++++++++ .../structure/column-layout/overview.mdx | 18 +++++--- 2 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 packages/docs/src/content/03-components/structure/column-layout/guidelines.mdx diff --git a/packages/docs/src/content/03-components/structure/column-layout/guidelines.mdx b/packages/docs/src/content/03-components/structure/column-layout/guidelines.mdx new file mode 100644 index 000000000..45f54f1d1 --- /dev/null +++ b/packages/docs/src/content/03-components/structure/column-layout/guidelines.mdx @@ -0,0 +1,41 @@ +# Grundlagen + +## Best practices + +- Zu viele Spalten können den Content überladen und unübersichtlich machen. In + der Regel reichen maximal 4 Spalten aus. +- Integriere bei Bedarf mehrere ColumnLayouts ineinander, um Inhalte optisch zu + gruppieren. +- Wähle die Spaltenbreiten bewusst: Einheitliche Breiten schaffen ein + harmonisches Layout, während unterschiedliche Breiten den Fokus des Users auf + breitere Inhalte lenken. +- Verwende das ColumnLayout in Kombination mit der + [Section](/03-components/structure/section), um einfach übersichtliche Layouts + zu erstellen. + +# Verwendung + +Verwende ein ColumnLayout, um ... + +- das Layout eines Dashboards festzulegen. +- Formularfeldern eine klare Struktur zu geben. +- Inhalte auf unterschiedlichen Geräten übersichtlich darzustellen. + +--- + +# Verhalten + +## Responsive layout + +Das ColumnLayout folgt folgenden Breakpoints: + +- 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]` + +Beachte, dass die Breakpoints sich nicht auf die Bildschirmgröße des Endgeräts +beziehen. Sie beziehen sich auf die Breite des Containers, in dem das +ColumnLayout verwendet wird. Für jeden Breakpoint kann sowohl die Anzahl der +Spalten als auch deren Größenverteilung individuell festgelegt werden (siehe +Overview). So bricht das Layout automatisch um, wenn es eine bestimmte Breite +unterschreitet. diff --git a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx index f3df5c9b9..65583fc6c 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx +++ b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx @@ -20,7 +20,7 @@ beiden äußeren. --- -# Benutzerdefinierte Values +# 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 @@ -42,10 +42,16 @@ Standardwert von `[1]`. --- -# Abstände konfigurieren +# Abstände -- `rowGap`: Setzt Reihenabstände (s, m, l) -- `columnGap`: Setzt Spaltenabstände (s, m, l) -- `gap`: Setzt beide Abstände gleichzeitig (s, m, l) +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). + + From 296d9955432fa5bfbb4809e58d03f5a3662afae8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Ju=CC=88nke?= Date: Fri, 27 Sep 2024 11:11:45 +0200 Subject: [PATCH 3/4] adjust examples --- .../structure/column-layout/examples/default.tsx | 15 +++++---------- .../structure/column-layout/examples/gaps.tsx | 15 ++++++++++----- .../structure/column-layout/overview.mdx | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx index 5757852ce..bc8efe0f5 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx @@ -2,22 +2,17 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + - - - - - - - - - + + + + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx index bc8efe0f5..5757852ce 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx @@ -2,17 +2,22 @@ import ColumnLayout from "@mittwald/flow-react-components/ColumnLayout"; import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + + + + + + + + + - - - - + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx index 65583fc6c..f490a645e 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/overview.mdx +++ b/packages/docs/src/content/03-components/structure/column-layout/overview.mdx @@ -54,4 +54,4 @@ 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). - + From 6d9cd76c9d2ffac8d47a2dcc684cf7cdaecaa59b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Ju=CC=88nke?= Date: Thu, 17 Oct 2024 09:25:13 +0200 Subject: [PATCH 4/4] make all textfields required --- .../structure/column-layout/examples/custom-values.tsx | 4 ++-- .../structure/column-layout/examples/default.tsx | 8 ++++---- .../structure/column-layout/examples/gaps.tsx | 10 +++++----- .../structure/column-layout/examples/main.tsx | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/custom-values.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/custom-values.tsx index 3b9cb84e1..3f0a5d063 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/custom-values.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/custom-values.tsx @@ -3,10 +3,10 @@ import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + - + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx index bc8efe0f5..504cbe7f5 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/default.tsx @@ -3,16 +3,16 @@ import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + - + - + - + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx index 5757852ce..6d021931f 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/gaps.tsx @@ -3,21 +3,21 @@ import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + - + - + - + - + ; diff --git a/packages/docs/src/content/03-components/structure/column-layout/examples/main.tsx b/packages/docs/src/content/03-components/structure/column-layout/examples/main.tsx index 18a1cf21d..14e56572c 100644 --- a/packages/docs/src/content/03-components/structure/column-layout/examples/main.tsx +++ b/packages/docs/src/content/03-components/structure/column-layout/examples/main.tsx @@ -3,10 +3,10 @@ import TextField from "@mittwald/flow-react-components/TextField"; import Label from "@mittwald/flow-react-components/Label"; - + - + ;