Giao diện
Cài đặt và sử dụng
Cài đặt
Plugin @digiforce-nc/plugin-block-grid-card thường được cài sẵn trong bản phân phối chính. Nếu chưa có, kích hoạt qua trang Plugin Manager trong admin panel.
Plugin hoạt động hoàn toàn ở client — không có server component hay database riêng.
Thêm Grid Card block
- Mở trang ở chế độ thiết kế (Schema Editor).
- Click Add block → chọn Grid Card.
- Chọn collection (data source) muốn hiển thị.
- Block Grid Card xuất hiện với lưới thẻ trống, sẵn sàng cấu hình.
Thiết kế card template
Mỗi thẻ trong lưới hiển thị theo một template chung:
- Click vào vùng card trống → chuyển sang Card Designer.
- Kéo thả các field từ collection vào card layout (ảnh, tiêu đề, mô tả, tags...).
- Sắp xếp vị trí field trong card theo ý muốn.
- Thoát designer — tất cả thẻ tự động áp dụng template mới.
Cấu hình số cột responsive
Plugin tự động điều chỉnh số cột theo kích thước màn hình dựa trên breakpoint Ant Design:
| Breakpoint | Kích thước | Số cột mặc định |
|---|---|---|
xs | < 576px | 1 |
sm | >= 576px | 2 |
md | >= 768px | 3 |
lg | >= 992px | 3 |
xl | >= 1200px | 4 |
xxl | >= 1600px | 4 |
Để tùy chỉnh, mở Settings của block → chỉnh số cột cho từng breakpoint.
Phân trang
Grid Card hỗ trợ hai chế độ phân trang:
| Chế độ | Mô tả | Khi nào dùng |
|---|---|---|
| Known count | Hiển thị tổng số bản ghi và page navigator | Collection hỗ trợ count |
| Unknown count | Chỉ hiện nút "Load more" / "Previous / Next" | Collection lớn, không cần count |
Cấu hình page size qua Settings panel của block.
Toolbar actions
Trên toolbar của block, admin có thể bật/tắt các action:
- Filter: Lọc dữ liệu theo điều kiện
- Sort: Sắp xếp theo field
- Refresh: Tải lại dữ liệu
- Bulk actions: Thao tác hàng loạt (khi chọn nhiều thẻ)
Action trên từng thẻ
Mỗi thẻ có thể gắn action riêng qua Item Action Initializers:
- View: Mở popup xem chi tiết bản ghi
- Edit: Mở form chỉnh sửa
- Delete: Xóa bản ghi
- Custom action: Action tùy chỉnh
Kéo thả sắp xếp
Grid Card hỗ trợ drag & drop để sắp xếp lại thứ tự thẻ. Tính năng này sử dụng @dnd-kit/core và yêu cầu collection có field sort.
Mẹo
Grid Card phù hợp nhất cho danh mục sản phẩm, thư viện ảnh, danh bạ nhân viên — những nơi cần hiển thị trực quan dạng thẻ thay vì bảng.