Xếp chồng

Ngăn xếp là một danh sách thu gọn chỉ hiển thị một nội dung tại một thời điểm, trong một hình ảnh xếp chồng, chẳng hạn như thông báo hoặc thẻ.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Nguyên tắc

Ngăn xếp là một thành phần vùng chứa, vì vậy, ngăn xếp có chung các nguyên tắc thiết kế với thẻ và danh sách:

Ngăn xếp: Nhóm các thông tin và hành động có liên quan vào một đơn vị duy nhất, dễ hiểu.

Tập trung và rõ ràng: Họ trình bày nội dung một cách rõ ràng và tập trung.

Tính linh hoạt: Ngăn xếp có thể hiển thị thẻ và thông báo.

Trình bày nhất quán: Các ngăn xếp tuân theo một cấu trúc hình ảnh nhất quán.

Cách sử dụng và vị trí

Ngăn xếp là một cách để cho người dùng thấy rằng có nhiều phần tử được thu gọn trong một danh sách, đồng thời giảm thiểu các phần tử trực quan trong chế độ xem. Có hai biến thể khác nhau của ngăn xếp: 

Nhóm thẻ

Nhóm thông báo

Ngăn xếp là một thành phần vùng chứa, cả hai phiên bản đều không hoạt động hoặc hiển thị khác nhau. 

Cả hai đều có giao diện và hoạt động gần như giống hệt nhau. Ngăn xếp chỉ là một vùng chứa cho các chế độ kiểm soát này với logic phân trang tích hợp. 

Người dùng di chuyển bằng cách vuốt hoặc kéo dọc theo bàn di chuột theo hướng tiến và lùi. Khi bạn di chuyển ngăn xếp, hệ thống sẽ chỉ di chuyển qua một mục tại một thời điểm.

Các phần tử thiết kế phải được neo vào cuối khung hình. Sử dụng độ sâu để cho biết tiêu điểm

Các mục ở ngăn xếp dưới cùng sử dụng độ sâu là 0, trong khi mục trên cùng sử dụng độ sâu là +2.

Các phần tử thiết kế phải được neo vào cuối khung hình. Bạn có thể di chuyển qua các ngăn xếp từng mục một

Khi có thao tác chạm, các ngăn xếp có thể trình bày từng mục một bằng cách di chuyển theo chiều dọc.

Khi có thao tác chạm, các ngăn xếp có thể trở thành danh sách để hiển thị nhiều phần tử cùng một lúc.  Danh sách này phải sử dụng vùng chứa và trạng thái tiêu điểm mặc định.

Phân tích

Một ngăn xếp luôn được thu gọn dưới dạng một thành phần phân trang. Mục trên cùng luôn là tiêu điểm chính, cho thấy độ sâu đường viền rõ hơn, trừ phi có một nút lồng nhau đang bật.

Đoạn quảng cáo đệm giúp củng cố phần đầu/cuối của một nhóm. Ảnh động lò xo sẽ đưa danh sách trở lại vị trí ban đầu khi bạn thả tay.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Tuỳ chỉnh

Ngăn xếp có lớp phủ mờ, tính năng phân trang và ảnh động tích hợp sẵn mà bạn không thể tuỳ chỉnh. Thay vào đó, nội dung trong các nhóm được tuỳ chỉnh.