Chuyển tới nội dung chính

Grid Layout

Grid layout Components

Cú pháp

<zmp-grid> <zmp-grid-item>

Hỗ trợ tạo layout dạng lưới, có icon và text. Bao gồm 2 component là Grid và GridItem.

Grid layout Properties

<zmp-grid/> properties

PropTypeDefaultDescriptiont
no-borderbooleanfalseGiá trị bằng true bỏ border của grid và giữa các element bên trong grid
columnsnumber3Số luợng columns trên một grid*
  • Giá trị tối thiểu 1
  • Giá trị tối đa 6
dataarrayMảng chứa các object biểu diễn dữ liệu cho các grid item (sử dụng grids thông qua data thay vì GridItem children)
  • icon: element Icon element hiển thị icon cho grid item
  • label: string Thêm label cho grid item
  • onClick: function Event handler cho sự kiện click lên grid item
  • to: string Đường dẫn đến page cần tải

<zmp-grid-item/> properties

PropTypeDefaultDescriptiont
labelstringText label cho grid item
iconelementIcon cho grid item
tostringĐường dẫn tới trang cần tải
disabledbooleanfalseVô hiệu hóa grid item (người dùng không thể thực hiện click/press)

Ví dụ

Code demo fallback when rendering server side!