Grid

2024-05-31 10:14

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,
    });
  },
});