Version:
Vertical Layout
Das Vertical Layout ordnet Inhalte übereinander in einer Spalte an.
Overview
Nur für Entwickler verwendbar
Das Vertical Layout kann nur von Entwicklern verwendet werden. In Figma wird die Autolayout Funktionalität genutzt. Es ist nicht möglich alle Funktionalitäten des Vertical Layouts so auch in Figma abzubilden.
Intro
Das Vertical Layout ordnet Inhalte übereinander in einer Spalte an. Das Vertical Layout ist die Standard-Komponente für vertikale Stapel in mateDS. Sie wird gegenüber generischen Flex-Containern bevorzugt, weil sie bereits passende Standard-Styles wie Spacing, Padding, Margin und Wrap sowie eine klarere API bereitstellt.
Das Vertical Layout ist ein struktureller Container für gleichrangige Inhalte in einer gemeinsamen Spalte. Standardmäßig füllt das Layout die verfügbare Breite aus („fills“), während sich seine Höhe am enthaltenen Inhalt orientiert („Hug Content“). Inhalte lassen sich vertikal verteilen, mit konsistenten Abständen versehen, bei Bedarf umbrechen und so konfigurieren, dass einzelne Elemente den verbleibenden Platz einnehmen. Zudem können Elemente innerhalb des Layouts horizontal ausgerichtet werden, sodass sie beispielsweise die verfügbare Breite des Layouts ausfüllen (siehe Horizontale Anordnung ).
broken_image
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ...wenn mehrere zusammengehörige Elemente in einer Spalte übereinander angeordnet werden sollen. Es stellt hierfür das Standardlayout dar und ist oft die Standardstruktur einer Seite oder eines Bereichs. | ...wenn Inhalte primär nebeneinander angeordnet werden sollen. Verwende hierfür das Horizontal Layout. ...wenn Formulare verwendet werden. Nutze hierfür die mateDS Form und mateDS Form Layout Komponenten (nicht von Vaadin). Zum Stapeln mehrerer Formulargruppen kann das Vertical Layout eingesetzt werden. ...wenn es um die Grundstruktur der ganzen Anwendung geht, also Header, Navigation Drawer und Content-Bereich. Verwende hierfür das App Layout. ...wenn zwei Bereiche nebeneinander oder übereinander liegen und deren Größe veränderbar sein soll. Nutze hierfür das Split Layout. ...wenn eine Master-Detail-Struktur auf einer Seite gebraucht wird, also z. B. Liste links und Detail rechts, responsiv auch als Overlay. Nutze hierfür das Master-Detail-Layout. |
Guidelines
Nur für Entwickler verwendbar
Das Vertical Layout kann nur von Entwicklern verwendet werden. In Figma wird die Autolayout Funktionalität genutzt. Es ist nicht möglich alle Funktionalitäten des Vertical Layouts so auch in Figma abzubilden.
Aufbau
Das Vertical Layout besteht aus einem Container und seinen Kind-Elementen. Inhalte können am Anfang, in der Mitte oder am Ende der Spalte gruppiert werden.
broken_image
Layout Konfigurationen
Im Vertical Layout sind insbesondere folgende wiederkehrende Konfigurationen relevant: die Standardspalte, eine umbrechende Spalte und eine Spalte mit expandierendem Element.
Standard
Mehrere Elemente stehen in einer kompakten Spalte übereinander. Die Höhe richtet sich nach dem Inhalt; die Breite füllt standardmäßig den verfügbaren Platz.
broken_image
Horizontale Anordnung
Es können Komponenten links, mittig oder rechts positioniert werden. Außerdem können Elemente im Layout horizontal gestreckt werden.
broken_image
Horizontale Ausrichtungsmodi
Vier horizontale Ausrichtungsmodi legen fest, wie Elemente im Layout innerhalb des verfügbaren Platzes ausgerichtet werden.
| Wert | Beschreibung |
|---|---|
| START (Standard) | Richtet Elemente bei links-nach-rechts-Sprachen linksbündig aus. Bei rechts-nach-links-Sprachen werden die Elemente rechtsbündig ausgerichtet. |
| CENTER | Zentriert die Elemente horizontal. |
| END | Richtet Elemente bei links-nach-rechts-Sprachen rechtsbündig aus. Bei rechts-nach-links-Sprachen werden die Elemente linksbündig ausgerichtet. |
| STRETCH | Streckt Elemente mit nicht definierter Breite horizontal. |
Anders als beim Horizontal Layout, das fünf vertikale Ausrichtungsmodi inklusive Baseline kennt, gibt es beim Vertical Layout vier horizontale Ausrichtungsmodi ohne Baseline-Option — eine Ausrichtung an der Text-Baseline ergibt entlang der vertikalen Stapelrichtung keinen Sinn.
Mit Wrap
Bei begrenzter Höhe können Elemente in die nächste Spalte umbrechen. Das ist sinnvoll, wenn die Gruppe als zusammengehörig erhalten bleiben soll, aber nicht dauerhaft in eine zweite Komponente zerlegt werden muss. Wrap muss dafür ausdrücklich aktiviert sein, und es muss eine wirksame Höhenbegrenzung vorliegen: Bei inhaltsabhängiger Höhe wächst das Layout sonst nach unten weiter, eine Höhenbegrenzung allein aktiviert keinen Umbruch.
broken_image
Verwendung von Sublayouts
Wenn die gewünschte Anordnung nicht möglich ist, können zusätzlich Sublayouts bzw. Unterlayouts verwendet werden, um dynamischere Anordnungen zu ermöglichen.
broken_image
Mit expandierendem Element
Ein ausgewähltes Element kann den verbleibenden Platz einnehmen. Wenn mehrere Elemente expandieren, teilen sie sich den verfügbaren Raum proportional.
broken_image
Anordnung der individuellen Items
Jedes Element im Layout kann individuell an den Anfang, die Mitte oder das Ende der Spalte angeordnet werden.
broken_image
Vertikale Anordnungsmodi
Sechs vertikale Anordnungsmodi legen fest, wie Elemente im Layout innerhalb des verfügbaren Platzes verteilt werden.
| Wert | Beschreibung |
|---|---|
| START (Standard) | Positioniert Elemente am oberen Rand des Layouts. |
| CENTER | Zentriert Elemente vertikal. |
| END | Positioniert Elemente am unteren Rand des Layouts. |
| BETWEEN | Der verfügbare Platz wird gleichmäßig zwischen den Elementen verteilt. Vor dem ersten und nach dem letzten Element wird kein zusätzlicher Abstand eingefügt. |
| AROUND | Der verfügbare Platz wird gleichmäßig um die Elemente herum verteilt. Der Abstand vor dem ersten und nach dem letzten Element ist halb so groß wie der Abstand zwischen den Elementen. |
| EVENLY | Der verfügbare Platz wird gleichmäßig verteilt. Der Abstand vor dem ersten Element, zwischen den Elementen und nach dem letzten Element ist überall gleich. |
Spacing
Mit Spacing werden Abstände zwischen den einzelnen Komponenten innerhalb eines Layouts ermöglicht. Spacing ist standardmäßig aktiviert.
broken_image
Padding
Padding ist der Abstand zwischen dem äußeren Rand und dem Inhalt eines Layouts. Es kann dabei helfen, den Inhalt eines Layouts von seiner Umgebung abzugrenzen. Padding ist standardmäßig aktiviert.
broken_image
Margin
Margin erzeugt Abstand um ein Layout herum. Margin ist standardmäßig deaktiviert.
broken_image
Barrierefreiheit
Das Vertical Layout selbst ist kein semantischer Seitenbereich. Für eine zugängliche Nutzung sind deshalb vor allem die logische Reihenfolge der enthaltenen Elemente und die semantische Struktur des umgebenden Bereichs entscheidend. Für Hauptbereiche der Anwendung sollen ergänzend HTML-Landmarks wie header , nav oder main verwendet werden, weil Layout-Komponenten allein diese Orientierung für Screenreader nicht bereitstellen.
Interaktive Inhalte innerhalb eines Vertical Layouts müssen ihre barrierefreien Namen und Zustände selbst mitbringen, zum Beispiel über sichtbare Beschriftungen oder aria\-label bei reinen Icon-Aktionen. Das betrifft nicht das Layout selbst, sondern die darin platzierten Komponenten.