Split Layout

Das Split Layout ermöglicht es, die Anwendung in mehrere Bereiche zu unterteilen.

Overview

Intro

Das Split Layout ermöglicht es, die Anwendung in mehrere Bereiche zu unterteilen.

Split Layout Horizontal

Verwendung

👍 Do	👎 Don't
...wenn mehrere getrennte Bereiche im Content-Bereich darzustellen sind, egal ob vertikal oder horizontal	...Eine Navigation zu komplexeren Objekten im Sinne vom Master-Detail Muster benötigt wird (siehe Master-Detail Muster) ...wenn der Menübereich vergrößert werden soll (siehe hierzu Navigationspanel) ...wenn Ergänzende oder Kontext Informationen angezeigt werden sollen (siehe Sidepanel)

Guidelines

Aufbau

Das Split Layout ist eine horizontale oder vertikale sichtbare durchgängige Linie, die mehrere Bereiche voneinander trennt. Ein Greifer in der Mitte zeigt an, dass der Bereich verschoben werden kann.

	Split Layout Vertical
Figma	Split Layout Horizontal

Anordnung & Gruppierung

Inhalte, die mehr Interaktionen des Benutzers erfordern, wie z.B. Formulare sollen auf der linken bzw. oberen Seite des Split Layouts angezeigt werden. Rechts bzw. unten sollten Inhalte gezeigt werden, die eher zur Ansicht bzw. zum Vergleich angezeigt werden (z.B. PDFs mit dem PDF-Viewer).

Varianten/Typen

Das Split Layout kann in einer horizontalen und in einer vertikalen Variante verwendet werden je nach Anwendungsfall.

Figma	Split Layout Horizontal
Figma	Split Layout Vertical

Verhalten

Auch wenn der Greifer nur in der Mitte dargestellt wird, kann das Split Layout überall angefasst und verschoben werden.

Das System merkt sich stets die neue Position des Split Layout, sodass beim erneuten Aufruf der Seite die zuletzt gemerkte Position angezeigt wird.

Jeder sichtbare Bereiche verhält sich nach seinen eigenen Regeln responsiv. Das heißt, jeder Bereich zählt für sich als View mit seiner Breite und wird dementsprechend ein oder mehrspaltig dargestellt.

States

Enabled

Ein Split Layout kann vom Nutzer angeklickt und anschließend verschoben werden.

Split Layout Enabled

Hover

Ein Split Layout wird hervorgehoben, wenn der Nutzer den Mauszeiger über das klickbare Feld bewegt.

Split Layout Hover

Active

Ein gedrückte Split Layout ist active und wird deutlich hervorgehoben, wenn der Nutzer dabei ist, diese zu verschieben.

Split Layout Active

Barrierefreiheit

Tastaturbedienung

Tastaturbedienung ist nicht vorgesehen.

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252FsplitLayout