Grid

Grid.

Property

DescriptionTypeDefault

Required

listGrid data.Array<icon, text>[]

Yes

onGridItemClickCallback when the grid is clicked.(index: Number) => void

No

columnNumNumber of columns displayed per row2, 3, 4, 53

No

circularCircular or not, take effect when the columnName value is 4.Booleanfalse

No

hasLineHave borderline or not.Booleantrue

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