Diggi Docs

TabNavigation

Die Tab Navigation besteht aus mehreren Tabs (Registerkarten), die den Inhalt innerhalb einer Top-Level-Ansicht strukturieren. Jeder Tab ermöglicht die Anzeige von gruppierten Inhalten sowie einen einfachen Wechsel zwischen verschiedenen Ansichten, Datensätzen und Funktionalitäten. Die Tab Navigation sollte immer dann verwendet werden, wenn eine zusätzliche Navigationshierarchie zur Strukturierung des Inhalts einer Ansicht benötigt wird. Jedem Tab wird ein einzeiliges Label zugewiesen, das den Inhalt klar beschreibt.

Wann darf die Tab Navigation verwendet werden?

Problemloses Navigieren zwischen Ansichten im gleichen Kontext
Für mobile Screens: bei min. 3 bis max. 8 Tabs
Beschriftungen sind kurz und verwenden nicht mehr als 10 Zeichen

Wann darf eine Tab Navigation nicht verwendet werden?

Wenn eine inhaltliche Kombination mit Bottom Navigation zu Verwirrung führt
Bei Verwendung von mehr als sechs Tabs (Registerkarten) verwenden. Wenn mehr als sechs benötigt werden, sollten andere Navigationsmuster verwendet werden, z.B. ein Side Navigation
In Verbindung mit Inhalten, die Streichgesten erfordern

Info! Für die Navigation zwischen den Registerkarten werden Streichgesten verwendet.

Die Tab Navigation sollte mindestens drei Tabs enthalten. Wenn bei Mobile Bildschirmen (z.B. Smartphones) nicht alle Tabs auf die Breite des Bildschirms passen, kann der Nutzer über die Tab Navigation swipen, um auf Tabs zuzugreifen, die sich außerhalb des sichtbaren Bereichs befinden. Aktive Tabs bleiben im sichtbaren Bereich, sofern Nutzer nicht erneut swipen.

Verwendung

Es muss TabNavigation -> TabList -> Tab geslottet werden.

TabPanels öffnen sich je zum index des geklickten Tabs.

Eigenschaften

Name	Type	Default Value	Description
selectedTab	Writable<string \| null>	undefined	The currently selected tab. Can be changed from outside. Can be set to null to deselect all tabs.

Weitere dazugehörige Komponenten

Tab

Eigenschaften

Name	Type	Default Value	Description
id	string	undefined	Unique identifier of the Tab
label	string \| undefined	undefined	Label of Tab, also slotable
disabled	boolean	false	Whether or not the Tab is disabled
isOnlyIcon	boolean	false	Set if Tab label is icon only
icon	string \| undefined	undefined	Optional icon
style	string \| undefined	undefined	Additional css styles
tabIndex	number \| undefined	undefined	Index of sequential keyboard navigation

TabPanel

Eigenschaften

Name	Type	Default Value	Description
id	string	undefined	Unique identifier of the Tab

Beispiele

Tab Navigation mit Label

Labels sind Slottable

Selected Tab: 234

Content Panel 2

Tab Navigation mit Icon

Labels/Icons sind Slottable

Content Panel 1

Tab Navigation mit Icon und Label

Content Panel 2

Tab Navigation mit Icon und Label (disabled Tabs)

Content Panel 1

Do's and Don'ts

Do

Zwischen inhaltlich verwandten Themen auf einer Seite wechseln.

Don't

Die Tab Navigation ist darf nicht als Hauptmenü eingesetzt werden.