-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* write introduction * write overview and guidelines * adjust examples * make all textfields required --------- Co-authored-by: Marie Jünke <m.juenke@mittwald.de>
- Loading branch information
1 parent
3f5a681
commit b0c6741
Showing
7 changed files
with
108 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/docs/src/content/03-components/structure/column-layout/guidelines.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
5 changes: 4 additions & 1 deletion
5
packages/docs/src/content/03-components/structure/column-layout/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
--- | ||
|
||
<LiveCodeEditor editorDisabled example="main" /> |
56 changes: 41 additions & 15 deletions
56
packages/docs/src/content/03-components/structure/column-layout/overview.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,31 +1,57 @@ | ||
# Beispiel | ||
# Playground | ||
|
||
Im Default werden die Spalten folgendermaßen gesetzt: | ||
|
||
- s: `[1]` | ||
- m: `[1, 1]` | ||
- l: `[1, 1, 1]` | ||
Verwende `<ColumnLayout />`, um ein ColumnLayout darzustellen. | ||
|
||
<LiveCodeEditor /> | ||
|
||
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 | ||
# Benutzerdefinierte Werte | ||
|
||
Größere Größen erben von kleineren größen, sofern sie nicht gesetzt sind: | ||
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: | ||
|
||
- s: `[1]` (default) | ||
- m: `[2, 1]` | ||
- l: `[2, 1]` (inherited) | ||
- 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]`. | ||
|
||
<LiveCodeEditor example="custom-values" editorCollapsed /> | ||
|
||
--- | ||
|
||
# Abstände konfigurieren | ||
# Abstände | ||
|
||
Die Abstände des ColumnLayout können in drei Stufen angepasst werden: | ||
|
||
- s = 8px | ||
- m = 16px | ||
- l = 24px | ||
|
||
- `rowGap`: Setzt Reihenabstände (s, m, l) | ||
- `columnGap`: Setzt Spaltenabstände (s, m, l) | ||
- `gap`: Setzt beide Abstände gleichzeitig (s, m, l) | ||
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). | ||
|
||
<LiveCodeEditor example="gaps" editorCollapsed /> |