Grid layout Components
Bao gồm các components:
- Grid - grid element sắp xếp layout dạng lưới
- GridItem - grid item element
Grid layout Properties
<Grid/> properties
| Prop | Type | Default | Descriptiont |
|---|
| itemClassName | string | | Thêm class cho các grid item |
| noBorder | boolean | false | Giá trị bằng true bỏ border của grid và giữa các element bên trong grid |
| columns | number | 3 | Số luợng columns trên một grid* - Giá trị tối thiểu 1
- Giá trị tối đa 6
|
| data | array | | Mả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
|
<GridItem/> properties
| Prop | Type | Default | Descriptiont |
|---|
| label | string | | Text label cho grid item |
| icon | element | | Icon cho grid item |
| to | string | | Đường dẫn tới trang cần tải |
| disabled | boolean | false | Vô hiệu hóa grid item (người dùng không thể thực hiện click/press) |
GridItem Events
| Event | Prop | Description |
|---|
| click | onClick | Event kích hoạt khi người dùng click/press lên grid item |
Ví dụ
Code demo fallback when rendering server side!