Vuốt để xem

Cho phép người dùng vuốt một thành phần để hiển thị các thao tác bổ sung.

Thành phần vuốt để hiển thị cho phép bạn thêm các thao tác bổ sung vào khối và thẻ, cụ thể là khi các khối và thẻ đó xuất hiện trong danh sách. Thành phần này cho phép người dùng nhanh chóng hoàn thành công việc mà không cần rời khỏi màn hình.

Người dùng có thể vuốt một phần khối và thẻ sang trái để truy cập vào các thao tác này, sau đó nhấn vào một thao tác để hoàn tất thao tác đó. Người dùng cũng có thể vuốt hoàn toàn khối và thẻ sang trái để nhanh chóng thực hiện hành động chính.

Thành phần này có 2 khe cho các thao tác này:

  1. Chính
  2. Phụ (không bắt buộc)

Phân tích

Hành động được tiết lộ

Nhà phát triển có thể tuỳ chỉnh các thao tác cho các trường hợp sử dụng riêng của họ. Hãy cân nhắc màu sắc và biểu tượng được sử dụng trong các hành động này để giúp người dùng hiểu ý nghĩa của chúng.

Các hành động được tiết lộ sẽ xuất hiện ở cùng một bên cho tất cả ngôn ngữ.

  1. Hành động chính
  2. Thao tác phụ (không bắt buộc)

Cam kết thực hiện một hành động chính

Để thực hiện hành động chính, người dùng có thể nhấn vào nút hoặc tiếp tục vuốt sang trái. Bằng cách này, nút sẽ mở rộng ra toàn bộ chiều rộng của màn hình và hiển thị một nhãn. Thao tác sẽ mờ dần sau khi được chọn.

Ví dụ đầu tiên cho thấy một tuỳ chọn nút duy nhất. Ví dụ thứ hai cho thấy tuỳ chọn nút đôi.

Huỷ hành động

Đối với các hành động huỷ bỏ, hãy thêm một thành phần huỷ để cho phép người dùng đảo ngược các hành động này. Thêm tính năng huỷ vào hành động chính.

Nếu được thêm, nút khối huỷ sẽ xuất hiện thay cho hành động đã thực hiện. Sau một khoảng thời gian ngắn, thao tác huỷ sẽ biến mất và hệ thống sẽ hoàn tất thao tác đã thực hiện.

Ngưỡng vuốt

Hành vi của thành phần vuốt để hiển thị phụ thuộc vào khoảng cách người dùng vuốt trên màn hình:

  • Nếu người dùng vuốt trên dưới 50% màn hình, thành phần sẽ quay lại vị trí bắt đầu và không có hành động nào được thực hiện.
  • Nếu người dùng vuốt trên màn hình từ 50% đến 75% chiều rộng toàn màn hình, thành phần vẫn hiển thị một phần và các thao tác liên kết với thành phần đó sẽ xuất hiện.
  • Nếu người dùng vuốt trên hơn 75% màn hình, thành phần sẽ biến mất và hệ thống sẽ tự động thực hiện thao tác chính.

Các thành phần theo giao diện Material sau đây triển khai hành vi vuốt để hiển thị:

Trên thẻ

Các ảnh chụp màn hình sau đây cho thấy thao tác vuốt để hiển thị giao diện của thành phần khi sử dụng lớp SwipeToRevealCard:

Trên khối

Các ảnh chụp màn hình sau đây cho thấy thao tác vuốt để hiển thị giao diện của thành phần khi sử dụng lớp SwipeToRevealChip: