Card List

Hướng dẫn sử dụng Element thao tác cơ bản

Card List

Card List Element là thành phần cho phép bạn thiết kế một danh sách, cho phép khách hàng bấm vào để xem chi tiết nội dung và lựa chọn. Element này phù hợp để tạo ra các danh sách như menu món ăn, thức uống, hoặc các sự kiện đang diễn ra để khách hàng lựa chọn.

Khi nào nên sử dụng:

• Khi bạn cần tạo danh sách các lựa chọn có kèm thông tin chi tiết để người dùng nhấp vào và tìm hiểu thêm, chẳng hạn như menu nhà hàng, danh sách sản phẩm hoặc dịch vụ.

• Phù hợp khi bạn muốn người dùng chọn một hoặc nhiều mục từ danh sách được trình bày rõ ràng và hấp dẫn.

Ví dụ sử dụng:

• Menu nhà hàng: Hiển thị danh sách các món ăn, đồ uống với hình ảnh và mô tả ngắn, khi nhấp vào sẽ mở ra chi tiết món ăn kèm giá cả.

• Danh sách sự kiện: Người dùng có thể xem nhanh các sự kiện sắp tới và nhấp vào để xem thêm thông tin chi tiết như địa điểm, thời gian, và cách tham gia.

• Danh sách sản phẩm: Hiển thị các sản phẩm với hình ảnh, mô tả ngắn và khi chọn sẽ hiện ra thông tin chi tiết về sản phẩm đó.

Ngoài các thuộc tính chung như name và required (hiển thị theo điều kiện), Card List Element còn có các thuộc tính sau:

• Setting: Truy cập vào đây để cài đặt.

• Required: Người dùng cần hoàn thành.

• Header Text: Nhập tiêu đề cho danh sách.

• Cancel Text: Nút để bỏ chọn một item.

• Close Text: Nút để đóng pop-up.

• Confirm Text: Nút để chọn một item.

• Read More Text: Nút để xem thêm thông tin.

• Multi select: Bật ON để chọn nhiều item, tắt Off để chỉ chọn 1 item.

• + Add: Nhấp để thêm mục mới.

• Text: Tiêu đề của item.

• Sub Text: Mô tả ngắn gọn cho item.

• Value: Giá trị sẽ lưu khi người dùng submit (ví dụ: mã sản phẩm, mã món ăn...).

• Image url Photo: Ảnh toàn màn hình ở nội dung chi tiết của item.

• Html Content: Nội dung chi tiết của item, cho phép nhập nội dung rich text cơ bản.