Anatomi
- Header atau Trigger: Bagian yang dapat diklik untuk menampilkan dan menutup panel.
- Panel Konten: Area yang menampilkan informasi tambahan.
- Ikon Ekspansi: Indikator visual status panel (tampilkan/tutup).
Jenis dan variasi
Accordion dapat diimplementasikan dalam dua pendekatan utama desain yaitu Card dan Custom.
Card
Accordion Card menggunakan pendekatan terkontrol dengan margin pada sisi kiri dan kanan, cocok untuk antarmuka dengan ruang terbatas.
Custom
Accordion Custom memberikan fleksibilitas penuh, dapat mengisi seluruh lebar halaman dan disesuaikan dengan kebutuhan desain spesifik.
States
Komponen Accordion memiliki lima status interaksi yang berbeda. Status Default menampilkan komponen dalam keadaan netral sebelum interaksi. Saat kursor diarahkan ke header, status Hover memberikan umpan balik visual kepada pengguna. Status Focus aktif saat komponen menerima fokus keyboard, menekankan aksesibilitas.
Behaviors
Klik Header pada Accordion untuk menampilkan/menutup
Interaksi dengan Accordion dilakukan melalui klik sederhana pada Header Panel. Secara default, panel akan tertutup, namun desainer memiliki fleksibilitas untuk mengatur panel agar terbuka pada kondisi tertentu.
Terdapat dua model utama interaksi: Single Expand, di mana hanya satu panel yang dapat terbuka pada satu waktu. Dan Multi Expand, yang memungkinkan beberapa panel terbuka bersamaan.
Panduan penggunaan
Kapan menggunakan
Accordion paling tepat digunakan dalam beberapa konteks spesifik. Konten panjang yang membutuhkan penyederhanaan, navigasi informasi bertingkat, antarmuka dengan keterbatasan ruang, dan dokumentasi interaktif adalah beberapa contoh penggunaan optimal.
Praktik terbaik
- Pembatasan jumlah panel untuk menghindari kelebihan informasi.
- Penggunaan judul deskriptif dan pertimbangan hierarki informasi.
- Petunjuk visual seperti ikon atau animasi transisi dapat meningkatkan pengalaman pengguna.