All Products
Search
Document Center

Grid

Last Updated: Feb 04, 2021

This section describes the grid component.

Property Description Type Default value Mandatory
list Grid data Array<icon, text> [] true
onGridItemClick Callback when you tap the grid item. (index: Number) => void - false
columnNum Number of columns that each line displays. 2, 3, 4, 5 3 false
circular Whether the corners are rounded. Boolean false false
hasLine Whether there are borders. Boolean true false

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "grid": "mini-antui/es/grid/index"
  5. }
  6. }
 
  1. <grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
 
  1. Page({
  2. data: {
  3. list3: [
  4. {
  5. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  6. text: 'Title',
  7. desc: 'Description',
  8. },
  9. {
  10. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  11. text: 'Title',
  12. desc: 'Description',
  13. },
  14. {
  15. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  16. text: 'Title',
  17. desc: 'Description',
  18. },
  19. {
  20. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  21. text: 'Title',
  22. desc: 'Description',
  23. },
  24. {
  25. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  26. text: 'Title',
  27. desc: 'Description',
  28. },
  29. {
  30. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  31. text: 'Title',
  32. desc: 'Description',
  33. },
  34. {
  35. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  36. text: 'Title',
  37. desc: 'Description',
  38. },
  39. {
  40. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  41. text: 'Title',
  42. desc: 'Description',
  43. },
  44. {
  45. icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  46. text: 'Title',
  47. desc: 'Description',
  48. },
  49. ],
  50. },
  51. onItemClick(ev) {
  52. my.alert({
  53. content: ev.detail.index,
  54. });
  55. },
  56. });