Tabs sind Schaltflächen, die immer in Gruppen vorkommen und von ihrem Status abhängig sind. Es kann also jeweils nur eine Schaltfläche aktiv sein.
Anatomie
2. Symbol für inaktiven Tab
3. Label des aktiven Tabs
4. Label des inaktiven Tabs
Technische Daten
In der App-Leiste verschachtelte Tabs – linksbündig
In der App-Leiste verschachtelte Tabs – flexible Ausrichtung
Tabs in App-Leiste minimiert – Leistenmenü
Eigenständige Tableiste – linksbündig
Eigenständige Tableiste – flexible Ausrichtung
Überlauf des Tab-Labelstrings
Layouts skalieren
Diese Referenzlayouts zeigen, wie Tabs an Bildschirme mit verschiedenen Breiten und Höhen angepasst werden. Die Kategorien für Breite und Höhe werden im Abschnitt Layout definiert. Beachten Sie, dass alle Pixelwerte in gerenderten Pixeln vorliegen, bevor ein Downsampling oder Upsampling erfolgt.
Standard-Displays im Vergleich zu breiten Bildschirmen in kleiner Klammer
Standardbildschirme und breite Displays in Klammer mit Standardhöhe
Standard-Display im Vergleich zu breiten Bildschirmen in hoher Höhe
Extrabreit und superbreit in allen eckigen Klammern
Stile
Typografie
| Schriftstil | Schriftart | Gewicht | Größe (dp) |
|---|---|---|---|
| Text 3 M | Roboto | Medium | 24 |
| Text 3 | Roboto | Regulär | 24 |
Farbe
| Element | Farbe(Tagesmodus) | Farbe (Nachtmodus) |
|---|---|---|
| Haupttyp / Primäre Symbole | White | Weiß mit 88% |
| Sekundärer Typ / Symbole | Weiß mit 72% | Weiß mit 60% |
| Hintergrund der Tableiste | Schwarz | Schwarz |
| Hintergrund der Tableiste beim Scrollen | Schwarz: 84% | Schwarz: 88% |
| Tab-Symbol – aktiv | White | Weiß mit 88% |
| Tab-Symbol – inaktiver Status | Weiß mit 56% | Weiß mit 50% |
Größen
| Element | Größe (dp) |
|---|---|
| Primäres Symbol | 44 |
| Sekundäres Symbol | 36 |
| Berührungszielbereich für Symbol | 76 |
Beispiele
