Grid
Grid.
Property | Description | Type | Default | Required |
list | Grid data. | Array<icon, text> | [] | Yes |
onGridItemClick | Callback when the grid is clicked. | (index: Number) => void | No | |
columnNum | Number of columns displayed per row | 2 , 3 , 4 , 5 | 3 | No |
circular | Circular or not, take effect when the columnName value is 4. | Boolean | false | No |
hasLine | Have borderline or not. | Boolean | true | No |
Example
copy
{
"defaultTitle": "AntUI Component Library",
"usingComponents": {
"grid": "mini-antui/es/grid/index"
}
}
copy
<grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
copy
Page({
data: {
list3: [
{
icon: 'https://img.example.com/example1.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example2.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example3.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example4.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example5.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example6.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example7.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example8.png',
text: 'Title',
desc: 'text',
},
{
icon: 'https://img.example.com/example9.png',
text: 'Title',
desc: 'text',
},
],
},
onItemClick(ev) {
my.alert({
content: ev.detail.index,
});
},
});