Tab adalah tombol yang selalu muncul dalam grup dan bergantung pada status satu sama lain: hanya satu tombol yang dapat aktif pada waktu tertentu.
Anatomi
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=6&hl=id)
2. Ikon tab tidak aktif
3. Label tab aktif
4. Label tab tidak aktif
Spesifikasi
Tab bertingkat di panel aplikasi – rata kiri
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=6&hl=id)
Tab bertingkat di panel aplikasi – penyelarasan fleksibel
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=6&hl=id)
Tab diciutkan di panel aplikasi – menu panel samping
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=6&hl=id)
Bilah tab mandiri – rata kiri
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=6&hl=id)
Bilah tab mandiri – perataan fleksibel
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=6&hl=id)
Overflow string label tab
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=6&hl=id)
Menskalakan tata letak
Tata letak referensi ini menunjukkan cara menyesuaikan tab untuk mengakomodasi layar dengan berbagai lebar dan tinggi. (Kategori lebar dan tinggi ditentukan di bagian Tata Letak.) Perlu diketahui bahwa semua nilai piksel dalam piksel yang dirender, sebelum pengambilan sampel menurun atau pengambilan sampel naik terjadi.
Layar standar vs. lebar dalam kurung tinggi pendek
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=6&hl=id)
Layar standar vs. lebar dalam kurung tinggi standar
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=6&hl=id)
Layar standar vs. lebar dalam kurung tinggi tinggi
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=6&hl=id)
Layar ekstra lebar dan super lebar dalam semua tanda kurung tinggi
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=6&hl=id)
Gaya
Tipografi
Gaya jenis | Jenis Huruf | Bobot | Ukuran (dp) |
---|---|---|---|
Bodi 3 M | Roboto | Sedang | 24 |
Bodi 3 | Roboto | Rutin | 24 |
Warna
Elemen | Warna(mode hari) | Warna (mode malam) |
---|---|---|
Jenis / ikon utama | Putih | Putih @ 88% |
Jenis / ikon sekunder | Putih @ 72% | Putih @ 60% |
Latar belakang panel tab | Hitam | Hitam |
Latar belakang panel tab saat men-scroll | Hitam @ 84% | Hitam @ 88% |
Ikon tab - status aktif | Putih | Putih @ 88% |
Ikon tab - status tidak aktif | Putih @ 56% | Putih @ 50% |
Ukuran
Elemen | Ukuran (dp) |
---|---|
Ikon utama | 44 |
Ikon sekunder | 36 |
Target sentuh ikon | 76 |
Contoh
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=6&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=6&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=6&hl=id)