Tabs sind Schaltflächen, die immer in Gruppen auftreten und voneinander abhängig sind: Es kann immer nur eine aktiv sein.
Schaltflächenkomponente
Schaltflächen, die keine Tabulatoren sind, können unabhängig von anderen Schaltflächen funktionieren.
Tabs
Anatomie
2. Symbol für inaktive Registerkarten
3. Aktive Registerkartenbezeichnung
4. Inaktive Registerkartenbezeichnung
Spezifikationen
In der App-Leiste verschachtelte Tabs – linksbündig
App-Leiste & Kopfzeilenkomponente
Spezifikationen, Stilrichtlinien und mehr. In der App-Leiste verschachtelte Tabs – flexible Ausrichtung
In der App-Leiste ausgeblendete Tabs – Menüleiste
App-Leiste & Kopfzeilenkomponente
Spezifikationen, Stilrichtlinien und mehr. Eigenständige Tableiste – linksbündig
Eigenständige Tab-Leiste – flexible Ausrichtung
Zeichenkettenüberlauf bei Tabulatorbezeichnungen
Skalierung von Layouts
Diese Referenzlayouts zeigen, wie Sie Tabs an Bildschirme unterschiedlicher Breite und Höhe anpassen. Beachten Sie, dass alle Pixelwerte in gerenderten Pixeln angegeben sind, also vor jeglicher Herunter- oder Hochskalierung.
Standard- versus Breitbildschirme in der kurzen Bauhöhe
Standard- versus Breitbildschirme in Standardhöhenhalterung
Standard- versus Breitbildschirme im hohen Gehäuse
Extrabreite und superbreite Leinwände in allen Höhenklassen
Stile
Typografie
| Schriftart | Schrift | Gewicht | Größe (dp) |
|---|---|---|---|
| Körper 3 M | Roboto | Medium | 24 |
| Körper 3 | Roboto | Regulär | 24 |
Farbe
| Element | Farbe (Tagesmodus) | Farbe (Nachtmodus) |
|---|---|---|
| Primärer Typ / Symbole | Weiß | Weiß @ 88% |
| Sekundärer Typ / Symbole | Weiß @ 72% | Weiß @ 60% |
| Hintergrund der Tab-Leiste | Schwarz | Schwarz |
| Hintergrund der Tab-Leiste beim Scrollen | Schwarz @ 84% | Schwarz @ 88% |
| Tab-Symbol – aktiver Zustand | Weiß | Weiß @ 88% |
| Tab-Symbol – inaktiver Zustand | Weiß @ 56% | Weiß @ 50% |
Größenangaben
| Element | Größe (dp) |
|---|---|
| Primäres Symbol | 44 |
| Sekundäres Symbol | 36 |
| Symbolberührungsziel | 76 |
Beispiele
