Tab

Các tab là các nút luôn xuất hiện theo nhóm và phụ thuộc vào trạng thái của nhau: chỉ có một tab có thể hoạt động tại một thời điểm nhất định.

biểu tượng chú thích
Thành phần nút
Các nút không phải là tab có thể hoạt động độc lập với các nút khác.

Giải phẫu học

1. Biểu tượng tab đang hoạt động
2. Biểu tượng tab không hoạt động
3. Nhãn tab đang hoạt động
4. Nhãn tab không hoạt động

Thông số kỹ thuật

Các tab lồng nhau trong thanh ứng dụng – căn lề trái

biểu tượng chú thích
Thành phần thanh ứng dụng và tiêu đề
Thông số kỹ thuật, hướng dẫn kiểu dáng và nhiều hơn nữa.

Các tab lồng nhau trong thanh ứng dụng – căn chỉnh linh hoạt

Với khả năng điều chỉnh linh hoạt, cấu hình tab có thể kéo giãn hoặc thu nhỏ để phù hợp với không gian có sẵn.

Các tab được thu gọn trong thanh ứng dụng – menu ngăn kéo

biểu tượng chú thích
Thành phần thanh ứng dụng và tiêu đề
Thông số kỹ thuật, hướng dẫn kiểu dáng và nhiều hơn nữa.

Thanh tab độc lập – căn lề trái

Thanh tab độc lập – căn chỉnh linh hoạt

Với khả năng điều chỉnh linh hoạt, cấu hình tab có thể kéo giãn hoặc thu nhỏ để phù hợp với không gian có sẵn.

tràn chuỗi nhãn tab

Điều chỉnh tỷ lệ bố cục

Các bố cục tham khảo này cho thấy cách điều chỉnh các tab để phù hợp với màn hình có chiều rộng và chiều cao khác nhau. Lưu ý rằng tất cả các giá trị pixel đều là pixel đã được hiển thị, trước khi bất kỳ quá trình giảm kích thước hoặc tăng kích thước nào diễn ra.

So sánh màn hình tiêu chuẩn và màn hình rộng trong phân khúc chiều cao thấp

So sánh màn hình tiêu chuẩn và màn hình rộng trong khung chiều cao tiêu chuẩn

So sánh màn hình tiêu chuẩn và màn hình rộng trong phân khúc chiều cao lớn.

Màn hình siêu rộng và cực rộng với mọi kích thước chiều cao.

Phong cách

Kiểu chữ

Kiểu chữ Kiểu chữ Cân nặng Kích thước (dp)
Thân 3 M Robot Trung bình 24
Thân 3 Robot Thường xuyên 24

Màu sắc

Yếu tố Màu sắc (chế độ ban ngày) Màu sắc (chế độ ban đêm)
Loại chính / biểu tượng Trắng Màu trắng @ 88%
Loại phụ / biểu tượng Màu trắng @ 72% Màu trắng @ 60%
Nền thanh tab Đen Đen
Hình nền thanh tab khi cuộn Màu đen @ 84% Màu đen @ 88%
Biểu tượng tab - trạng thái hoạt động Trắng Màu trắng @ 88%
Biểu tượng tab - trạng thái không hoạt động Màu trắng @ 56% Màu trắng @ 50%

Kích thước

Yếu tố Kích thước (dp)
Biểu tượng chính 44
Biểu tượng phụ 36
biểu tượng chạm mục tiêu 76

Ví dụ

Các tab đã được thu gọn.


Các tab được lồng vào thanh ứng dụng.

Thanh tab độc lập.