Tabs

Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.GitHubMarkdown
App Content
Container Content

Grundlagen

Best Practices

Achte bei der Verwendung von Tabs darauf, dass ...

  • innerhalb eines Tabs thematisch verwandter Content gruppiert wird.
  • die Reihenfolge nach Wichtigkeit oder Häufigkeit der Nutzung erfolgt.
  • jeder Tab eigenständig verständlich ist und eine kurze und deutliche Beschriftung hat.
  • sie nicht zur Navigation eingesetzt werden – Tabs schalten ausschließlich Inhalte innerhalb derselben Seite um, ohne zu einer anderen Seite bzw. URL zu navigieren, und ersetzen keine Navigation.
  • bei Statusanzeigen innerhalb eines Tabs – z. B. durch einen Danger-Alert – der Tab selbst ein entsprechendes Status-Icon erhält, um die Aufmerksamkeit darauf zu lenken.

Verwendung

Verwende Tabs, um komplexe Inhalte in kleinere, übersichtlichere Ansichten zu gliedern.

Tabs vs. TabNavigation

Flow bietet mit Tabs und der TabNavigation zwei ähnlich aussehende Components, die sich aber in der Verwendung klar unterscheiden:

Verwende Tabs, um ...

Inhalte innerhalb derselben Seite umzuschalten, ohne zu navigieren.

Verwende eine TabNavigation, um ...

zwischen gleichrangigen Unterseiten zu navigieren.

Auf dieser Seite