Horizontal Layout

Das Horizontal Layout ordnet Inhalte nebeneinander in einer Zeile an.

Overview

Nur für Entwickler verwendbar

Das Horizontal Layout kann nur von Entwicklern verwendet werden. In Figma wird die Autolayout Funktionalität genutzt. Es ist nicht möglich alle Funktionalitäten des Horizontal Layouts so auch in Figma abzubilden.

Intro

Das Horizontal Layout ordnet Inhalte nebeneinander in einer Zeile an. Das Horizontal Layout ist die Standard-Komponente für horizontale Reihen 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 Horizontal Layout ist ein struktureller Container für gleichrangige Inhalte in einer gemeinsamen Zeile. Standardmäßig richten sich Höhe und Breite des Layouts nach dem Inhalt („Hug Content“). Inhalte lassen sich horizontal 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 vertikal ausgerichtet werden, sodass sie beispielsweise die verfügbare Höhe des Layouts ausfüllen (siehe Vertikale Anordnung ).

Horizontal Layout

Verwendung

👍 Do

👎 Don't

...wenn mehrere zusammengehörige Elemente in einer Zeile horizontal angeordnet werden sollen. Es stellt hierfür das Standardlayout dar.

...wenn Inhalte primär untereinander aufgebaut sind. Das ist oft die Standardstruktur einer Seite oder eines Bereichs. Verwende hierfür das Vertical Layout ...wenn Formulare verwendet werden. Nutze hierfür die mateDS Form und mateDS Form Layout Komponenten (nicht von Vaadin). Diese Layouts wurden speziell auf mateDS Use Cases optimiert. ...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 du eine Master-Detail-Struktur auf einer Seite brauchst, 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 Horizontal Layout kann nur von Entwicklern verwendet werden. In Figma wird die Autolayout Funktionalität genutzt. Es ist nicht möglich alle Funktionalitäten des Horizontal Layouts so auch in Figma abzubilden.

Aufbau

Das Horizontal Layout besteht aus einem Container und seinen Kind-Elementen. Inhalte können am Start, in der Mitte oder am Ende der Zeile gruppiert werden.

Horizontal Layout Standard

Layout Konfigurationen

Im Horizontal Layout sind insbesondere folgende wiederkehrende Konfigurationen relevant: die Standardzeile, eine umbrechende Zeile und eine Zeile mit expandierendem Element.

Standard

Mehrere Elemente stehen in einer kompakten Zeile nebeneinander. Die Komponente orientiert sich am Inhalt.

Horizontal Layout Standard

Vertikale Anordnung

Man kann Komponenten oben, mittig oder unten positionieren. Außerdem kann man Elemente im Layout vertikal strecken oder sie entlang der Text Baseline ausrichten.

Horizontal Layout Mittig

Horizontal Layout Vertikal gestreckt, verschiedene Anordnungen

Vertikale Ausrichtungsmodi

Fünf vertikale Ausrichtungsmodi legen fest, wie Elemente im Layout innerhalb des verfügbaren Platzes verteilt werden.

Wert	Beschreibung
Stretch (Standard)	Streckt Elemente mit nicht definierter Höhe vertikal.
Start	Positioniert Elemente am oberen Rand des Layouts.
Center	Zentriert Elemente vertikal.
End	Positioniert Elemente am unteren Rand des Layouts.
Baseline	Positioniert Elemente entlang der Textgrundlinie des Layouts.

Mit Wrap

Bei begrenzter Breite können Elemente in die nächste Zeile umbrechen. Das ist sinnvoll, wenn die Gruppe als zusammengehörig erhalten bleiben soll, aber nicht dauerhaft in eine zweite Komponente zerlegt werden muss.

Horizontal Layout ohne Wrapping

Horizontal Layout mit Wrapping

Verwendung von Sublayouts

Wenn die gewünschte Anordnung nicht möglich ist, können auch zusätzlich Sublayouts bzw. Unterlayouts verwendet werden, um dynamischere Anordnungen zu ermöglichen.

Horizontal Layout Sublayouts bei responsivem Einsatz

Mit expandierendem Element

Ein ausgewähltes Element kann den verbleibenden Platz einnehmen. Wenn mehrere Elemente expandieren, teilen sie sich den verfügbaren Raum proportional.

Horizontal Layout Expandierendes Element

Anordnung der individuellen Items

Jedes Element im Layout kann an den Anfang, die Mitte oder das Ende des Layouts angeordnet werden.

Horizontal Layout Start, Mitte, Ende Anordnung

Horizontale Ausrichtungsmodi

Sechs horizontale Ausrichtungsmodi legen fest, wie Elemente im Layout innerhalb des verfügbaren Platzes verteilt 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.
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.

Horizontal Layout spacing

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.

Horizontal Layout padding

Margin

Verwenden Sie Margin, um Abstand um ein Layout herum zu erzeugen.

Horizontal Layout margin

Barrierefreiheit

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