Komponen / Navigasi
TabBar
Navigasi utama BizOps versi ponsel: kapsul kaca Liquid Glass berisi 3–5 tab (ikon + label) yang melayang di atas tepi bawah layar. Tiap tab adalah tautan ke halaman utama sebuah area: Beranda, Tugas, Persetujuan, Notifikasi, Akun.
Kapan dipakai
Gunakan
- Pakai hanya di layout ponsel untuk 3–5 area utama yang sering dibuka; di desktop navigasi ada di sidebar (NavList).
- Tab selalu membawa ke halaman akar areanya; halaman detail dibuka di atasnya dengan NavigationBar dan tombol kembali.
- Tandai tepat satu tab aktif dengan current — aria-current, ikon fill, dan warna aksen bersama-sama.
- Beri Badge hanya untuk jumlah yang menuntut tindakan (persetujuan menunggu), sertakan badgeLabel.
Hindari
- Jangan memakai TabBar untuk berpindah tampilan di dalam satu halaman — pakai SegmentedControl atau Tabs.
- Jangan lebih dari lima tab; modul lain masuk ke tab "Akun" atau halaman Beranda.
- Jangan menaruh aksi (Buat PO, Simpan) sebagai tab — aksi ada di NavigationBar atau isi halaman.
- Jangan menempelkan TabBar ke tepi layar selebar penuh; ia melayang dan isi terlihat bergulir di belakangnya.
Contoh benar & salah
Penulisan
- Label satu kata benda pendek: "Beranda", "Tugas", "Persetujuan", "Akun" — bukan kata kerja.
- Label sama dengan judul besar halaman tujuan agar pengguna tahu sedang di mana.
Komponen terkait
- NavigationBarBar atas di ponsel: kembali, judul besar/kecil, aksi.
- NavListNavigasi sidebar ala macOS, gaya Symbol atau Tile (System Settings).
- BadgeAngka kecil di ikon atau menu (99+).
- SegmentedControlPilihan 2–5 tampilan yang saling eksklusif: Daftar / Board, Minggu / Bulan.
- TabsBerpindah bagian dalam satu dokumen; di HIG tampil sebagai segmen di tengah.