Grid 九宫格

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/grid

逻辑上类似于 Row 和 Col 的布局组件. 不同是是集成了图标文字等特性. 涉及组件 Grid 和 GridItem.

基本用法:

<van-grid>
  <van-grid-item title="..."></van-grid-item>
  <van-grid-item title="..."></van-grid-item>
  <van-grid-item title="..."></van-grid-item>
  <van-grid-item title="..."></van-grid-item>
</van-grid>

默认为 4 列布局.

Grid 常用属性

• column-num 定义列数, 默认为 4 列.
• icon-size 定义图标大小, 默认 28px.
• gutter 格子间隔, 同 Row.
• square 是否将格子设置为正方形.
• direction="horizontal" 格子内容 (图标, 文字) 是否横排.
• reverse 互换图标与文字的位置.
• clickable 启用点击反馈.

GridItem 常用属性

• text 格子中的文字.
• icon 格子中的图标.
• dot, badge 右上角的点或徽标.
• url, to, 以及 replace 导航用.