Komponen header & panel aplikasi adalah panel khusus di bagian atas kanvas aplikasi yang dapat disesuaikan untuk menampilkan fungsi penting terkait aplikasi, seperti branding, navigasi tingkat atas, dan akses ke kontrol aplikasi.
Gunakan tata letak header & panel aplikasi yang konsisten untuk menempatkan kontrol tombol, seperti penelusuran dalam aplikasi, di lokasi standar di seluruh UI.
Anatomi
Panel & header aplikasi dapat mencakup berbagai elemen. Konfigurasi ini dapat dikonfigurasi dengan salah satu cara berikut:
- Header aplikasi: Jika dikonfigurasi sebagai header aplikasi, komponen akan berisi ruang untuk teks opsional, dengan penggunaan ikon dan tombol yang minimal. Biasanya, kode ini menyertakan judul layar dan panah kembali.
- Panel aplikasi: Jika dikonfigurasi sebagai panel aplikasi, panel ini dapat menyertakan ikon, tab, dan tombol. Elemen standar mencakup ikon aplikasi dan opsi navigasi.
Kedua versi ini juga dapat menyertakan kontrol aplikasi, seperti penelusuran dalam aplikasi dan setelan.
![Panel aplikasi & anatomi header](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-anatomy-1.png?authuser=1&hl=id)
1. Panah kembali
2. Judul layar
3. Tombol
4. Kontrol aplikasi
5. Ikon aplikasi
6. Navigasi utama (tab)
Spesifikasi – Panel aplikasi
Panel aplikasi dengan navigasi utama – rata tengah
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-8.png?authuser=1&hl=id)
Panel aplikasi dengan navigasi utama – rata kiri
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-7.png?authuser=1&hl=id)
Panel aplikasi dengan navigasi utama – diciutkan (panel samping, bukan tab)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-9.png?authuser=1&hl=id)
Spesifikasi – Header aplikasi
Header aplikasi dengan judul di tengah
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-1.png?authuser=1&hl=id)
Header aplikasi dengan kontrol aplikasi tunggal
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-2.png?authuser=1&hl=id)
Header aplikasi dengan beberapa kontrol aplikasi
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-3.png?authuser=1&hl=id)
Header aplikasi dengan satu tombol
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-4.png?authuser=1&hl=id)
Header aplikasi dengan beberapa tombol
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-5.png?authuser=1&hl=id)
Header aplikasi dengan teks tambahan
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-6.png?authuser=1&hl=id)
Header aplikasi dengan panel tab mandiri
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-10.png?authuser=1&hl=id)
Penyesuaian
OEM dapat mencerminkan merek mereka dengan memodifikasi tampilan visual panel aplikasi & header. Perubahan dapat mencakup:
- Ikon khusus
- Font kustom
- Menyetel tampilan tombol aktif, tidak aktif, dan nonaktif
- Menyetel dimensi dan penempatan tombol
Sistem desain menyediakan panduan untuk menyesuaikan komponen menggunakan tata letak, warna, tipografi, dan ukuran.
Contoh
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-1.png?authuser=1&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-2.png?authuser=1&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-3.png?authuser=1&hl=id)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-4.png?authuser=1&hl=id)