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.
max@mustermann.de
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 Tabs 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.
Tabs
Tabs schaffen Übersicht bei komplexen Inhalten. Sie teilen den Content in kleinere thematische Einheiten auf. Wenn sich mehrere Sections sinnvoll gruppieren lassen, können sie in einem Tab ausgelagert werden. User können so zwischen verschiedenen Ansichten wechseln, 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.