Grid 宫格
Grid 宫格，主要使用场景如：热门内容等。
Grid 提供了 wui-grid 和 wui-grid-item 两个组件来进行布局。
# 支持平台
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 代码演示
部分示例演示，完整使用请参考文档API。
# 基础使用
九宫格。
<wui-grid>
<wui-grid-item v-for="(item,index) in 9" :key="index">
<view class="wui-grid__cell">
<image src="/static/images/common/icon_tabbar_3x.png" class="wui-icon" mode="widthFix"></image>
<text>Grid</text>
</view>
</wui-grid-item>
</wui-grid>
# 高度自适应
通过 square 属性设置宫格item是否为正方形显示，设置为 false 则高度自适应。
<wui-grid :square="false">
<wui-grid-item v-for="(item,index) in 9" :key="index">
<view class="wui-grid__cell wui-padding">
<image src="/static/images/common/icon_tabbar_2x.png" class="wui-icon__2x" mode="widthFix">
</image>
<text>Grid</text>
</view>
</wui-grid-item>
</wui-grid>
# 修改列数
通过 columns 属性设置宫格每行显示的item数。
<wui-grid :columns="4">
<wui-grid-item v-for="(item,index) in 12" :key="index">
<view class="wui-grid__cell wui-padding">
<image src="/static/images/common/icon_tabbar_2x.png" class="wui-icon__2x" mode="widthFix">
</image>
<text>Grid</text>
</view>
</wui-grid-item>
</wui-grid>
# Slots
# wui-grid 组件
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，内部由一个或多个wui-grid-item组成 |
# wui-grid-item 组件
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示的自定义内容 |
# Props
# wui-grid 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| columns | Number | 每行显示item数 | 3 | - |
| showBorder | Boolean | 是否显示边框 | true | - |
| borderColor | String | 边框颜色 | #EEEEEE | 仅nvue有效，非nvue端通过css变量修改 |
| square | Boolean | item是否显示为正方形 | true | - |
# wui-grid-item 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| highlight | Boolean | 是否有点击效果 | true | - |
| backgroundColor | String | 背景颜色 | transparent | - |
| index | Number | item索引 | 0 | - |
# Events
# wui-grid 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击item时触发 | e.detail={ index:索引 } |
# wui-grid-item 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击item时触发 | e.detail={ index:索引 } |