Thanh cuộn cho biết vị trí của người dùng trong tài liệu lớn hơn không gian xem. Tiện ích này cho phép người dùng di chuyển đến phần còn lại của tài liệu bằng cách di chuyển khu vực xem cửa sổ lên hoặc xuống.
Người dùng tương tác với thanh cuộn bằng cách chạm, quay con lăn hoặc bàn di chuột. Nhấn vào các mũi tên trong thanh cuộn sẽ di chuyển nội dung theo “trang” – tức là gia tăng tương đương với chiều cao của màn hình. Tuy nhiên, nếu người dùng nhanh chóng hất để cuộn (phụ thuộc vào độ nhạy của màn hình cảm ứng), thì chuyển động hất có thể tạo ra động lực cuộn ra xa hơn một trang. Bất kể cách cuộn là gì, chuyển động cuộn sẽ luôn bám theo một mục.
Giải phẫu
Thanh cuộn được tạo thành từ các thành phần cuộn lên và cuộn xuống và chỉ báo tiến trình cuộn. Chevron được sử dụng trong các thành phần cuộn để cho biết hướng cuộn. Chỉ báo tiến trình cuộn là phần tử không bắt buộc cho biết nội dung hiển thị và vị trí cuộn tương quan với tổng lượng nội dung trên trang.
Lưu ý: Chỉ báo tiến trình cuộn không được thiết kế để có thể kéo.
2. Chỉ báo tiến trình cuộn
3. Cuộn xuống thành phần mở rộng
Thông số
Vị trí thanh cuộn với thanh điều hướng chính xếp chồng và thanh điều khiển thu nhỏ
Chỉ vị trí thanh cuộn với tiêu đề ứng dụng
Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển
Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển mở rộng
Vị trí thanh cuộn với thanh ứng dụng/tiêu đề và thanh điều khiển thu nhỏ
Chỉ vị trí thanh cuộn với thanh ứng dụng/tiêu đề
Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển
Vị trí thanh cuộn với tiêu đề ứng dụng và thanh điều khiển mở rộng
Vị trí thanh cuộn với chiều cao màn hình ngắn
Chỉ báo tiến trình cuộn tùy chọn
Kiểu
Màu
| Phần tử | Màu sắc(chế độ ngày) | Màu sắc (chế độ ban đêm) |
|---|---|---|
| Biểu tượng chính – trạng thái hoạt động | Trắng | Trắng @ 88% |
| Biểu tượng chính – trạng thái không hoạt động | Trắng @ 56% | Trắng @ 50% |
| Chỉ báo tiến trình cuộn | Trắng @ 16% | Trắng @ 12% |
Kích thước
| Phần tử | Kích thước (dp) |
|---|---|
| Biểu tượng chính | 44 |
| Mục tiêu cảm ứng | 76 |
| Chiều rộng chỉ báo tiến trình cuộn | 6 |
| Bán kính góc làm tròn (R4) | Đầy |
Ví dụ
