Tabs
Membolehkan pengguna menavigasi paparan yang berbeza dalam konteks yang sama dengan mengklik pada tab.
Jenis
- Pil: Reka bentuk berbentuk pil di mana tab aktif disorot.
- Tertutup (Enclosed): Mengelilingi keseluruhan kumpulan tab dalam bekas, dengan tab aktif disorot menggunakan gaya pil yang berbeza.
- Garis: Menggunakan garis di bawah tab aktif, biasanya dalam warna jenama, untuk menunjukkan tab yang dipilih dalam kumpulan.
Saiz
- Kecil: Biasanya digunakan untuk komponen kecil atau pada peranti yang lebih kecil seperti telefon mudah alih.
- Sederhana: Digunakan untuk komponen bersaiz sederhana atau besar dan pada peranti seperti tablet dan desktop.
Keadaan (State)
Tab boleh wujud dalam beberapa keadaan, setiap satu memberikan petunjuk visual kepada pengguna tentang status semasa dan kemungkinan interaksi.
- Asal: Keadaan awal tab apabila sedia untuk tindakan pengguna tetapi belum diinteraksikan.
- Fokus: Tab berada dalam keadaan dipilih atau aktif, biasanya melalui navigasi papan kekunci (TAB) atau klik tetikus, penting untuk kebolehaksesan.
- Hover: Tab menunjukkan tindak balas visual apabila pengguna melayangkan tetikus di atasnya, menunjukkan elemen boleh berinteraksi.
- Aktif: Berlaku apabila pengguna mengklik pada tab, menandakan tab telah dipilih.
- Aktif+Fokus: Berlaku apabila pengguna mengklik lagi pada tab aktif, menunjukkan tab dipilih dan dalam keadaan aktif.
Ikon Hadapan (Leading Icon)
Ikon Hadapan: Ikon yang ditempatkan sebelum teks di dalam tab, meningkatkan visual dengan menunjukkan tujuan tab secara sekilas. Contoh: Ikon Jadual, Ikon Profil, Ikon Tetapan, Ikon Senarai.
Penghitung
- Kaunter: Diposisikan selepas teks di dalam tab, biasanya memaparkan bilangan item baharu atau semasa dalam tab tersebut.