Scroll bar menunjukkan lokasi pengguna dalam dokumen yang lebih besar dari ruang pandang. Panel ini memungkinkan pengguna membuka bagian dokumen lainnya dengan memindahkan area tampilan jendela ke atas atau ke bawah.
Pengguna berinteraksi dengan scrollbar menggunakan sentuhan, roda putar, atau touchpad. Mengetuk tanda panah di bilah scroll akan memindahkan konten berdasarkan "halaman" – yaitu, penambahan yang setara dengan tinggi layar. Namun, jika pengguna mengayun dengan cepat untuk men-scroll (bergantung pada sensitivitas layar sentuh), gerakan fling dapat menciptakan momentum inersia yang men-scroll lebih jauh dari satu halaman. Terlepas dari cara memulai scroll, gerakan scroll harus selalu pas ke item.
Anatomi
Scrollbar terdiri dari kemampuan scroll-up dan scroll-down dan indikator progres scroll. Tanda centang digunakan dalam kemampuan scroll untuk menunjukkan arah scroll. Indikator progres scroll adalah elemen opsional yang menunjukkan konten yang terlihat dan posisi scroll terkait dengan jumlah total konten pada halaman.
Catatan: Indikator progres scroll tidak dirancang untuk dapat ditarik.
2. Indikator progres scroll
3. Kemampuan scroll ke bawah
Spesifikasi
Posisi scroll bar dengan navigasi utama bertumpuk dan panel kontrol yang diperkecil
Posisi scroll bar dengan header aplikasi saja
Posisi scroll bar dengan header aplikasi dan panel kontrol
Posisi scroll bar dengan header aplikasi dan panel kontrol yang diperluas
Posisi scroll bar dengan panel aplikasi/header dan panel kontrol yang diperkecil
Posisi scroll bar hanya dengan panel aplikasi/header
Posisi scroll bar dengan header aplikasi dan panel kontrol
Posisi scroll bar dengan header aplikasi dan panel kontrol yang diperluas
Posisi scroll bar dengan tinggi layar pendek
Indikator progres scroll opsional
Gaya
Warna
| Elemen | Warna(mode siang) | Warna (mode malam) |
|---|---|---|
| Ikon utama - status aktif | Putih | Putih @ 88% |
| Ikon utama - status tidak aktif | Putih @ 56% | Putih @ 50% |
| Indikator progres scroll | Putih @ 16% | Putih @ 12% |
Pengaturan ukuran
| Elemen | Ukuran (dp) |
|---|---|
| Ikon utama | 44 |
| Target sentuh | 76 |
| Lebar indikator progres scroll | 6 |
| Radius sudut bulat (R4) | Penuh |
Contoh
