Grid

2022-07-29 06:32

Grid.

Attribute Name	Description	Type	Default	Mandatory
list	Grid data	`Array<icon, text>`	[]	true
onGridItemClick	Callback when the grid is clicked	(index: Number) => void		false
columnNum	Number of columns displayed per row	`2`, `3`, `4`, `5`	`3`	false
circular	Circular or not, take effect when the columnName value is 4	Boolean	`false`	false
hasLine	Have borderline or not	Boolean	`true`	false

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