Detailseiten sind die zentrale Oberfläche innerhalb der Anwendung. Sie bündeln alle relevanten Informationen zu einem einzelnen Objekt und stellen diese im Content-Bereich übersichtlich dar. Von hier aus können Bearbeitungs- und Anlageprozesse gestartet werden. Sie gliedert sich in zwei Hauptbereiche: den ContentHeader, der dem User Orientierung gibt, und den Content, in dem die eigentlichen Informationen und Aktionen dargestellt werden.

---

Code-Beispiel

Das folgende Code-Beispiel zeigt den Aufbau einer typischen Detailseite in mStudio. Es veranschaulicht, wie Inhalte strukturiert und dargestellt werden.

---

ContentHeader

Der ContentHeader enthält Orientierungselemente wie PageTitle und Breadcrumb sowie Schnellzugriffe im ActionMenu.

PageTitle

Der PageTitle wird als Heading mit H1 dargestellt. Er gibt den Usern eine klare Orientierung darüber, in welchem Bereich sie sich befinden. Der Titel steht in direktem Bezug zum Inhalt der Detailseite.

Breadcrumb

Die Breadcrumb ergänzt die Orientierung. Sie ermöglicht die Navigation innerhalb des Seitenbaums und bietet eine schnelle Rückkehr zu übergeordneten Ebenen. Die Bezeichnungen der Einträge sind möglichst generisch gehalten, um Platz zu sparen und unterschiedlich lange Namen konsistent abzubilden.

ActionMenu

Das ActionMenu besteht aus einem Button als Trigger und einem ContextMenu. Es bietet zentrale Aktionen, sogenannte QuickActions, an. QuickActions spiegeln wichtige Funktionen wider, die zwar innerhalb des Contents vorhanden sind und hier zusätzlich als Schnellzugriff zur Verfügung stehen. Außerdem werden die Funktionen „Umbenennen“ oder „Löschen“ hier platziert.

---

Content

Im Content-Bereich werden die für den User relevanten Informationen dargestellt und Bearbeitungs- sowie Anlageprozesse ermöglicht. Damit Seiten einheitlich wirken, sollten die Inhalte nach einem wiederkehrenden Muster aufgebaut werden. Grundlage ist die LayoutCard als Container für Sections, die bei Bedarf mit einer TabNavigation ergänzt werden können.

LayoutCard

Die LayoutCard ist die Grundlage jeder Detailseite. Sie bildet den äußeren Container für den Inhalt und stellt Hintergrund und Padding bereit.

TabNavigation

Die TabNavigation schafft Übersicht bei komplexen Inhalten. Sie teilt den Content in kleinere thematische Unterseiten auf. Wenn sich mehrere Sections sinnvoll gruppieren lassen, können sie auf eine eigene Unterseite ausgelagert werden. User navigieren so zwischen den gleichrangigen Unterseiten, ohne den Kontext zu verlieren.

Sections

Sections strukturieren die Inhalte in Themenblöcke. Jede Section beginnt dabei mit einer H2-Überschrift. Weitere Unterteilungen erfolgen über verschachtelte Sections mit den Überschriften H3 bis H5 (siehe Heading). Neben der Heading können auch Actions platziert werden. Die sogenannten SectionAction im Section-Header bietet Platz für Elemente wie Buttons, Links oder Switches. Diese stehen in direktem Zusammenhang mit der jeweiligen Section. Über Buttons können beispielsweise Bearbeitungs- und Anlegeprozesse gestartet werden.

ColumnLayout

Das ColumnLayout organisiert Inhalte in Spalten. Anzahl und Breite der Spalten sind flexibel und passen sich an unterschiedliche Breakpoints an.