---

url: 'https://wot-ui.cn/component/grid.md'

Grid 宫格

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

基础用法

基础用法需要绑定 icon 值以及 text 属性。默认显示一行。

icon 为 wd-icon 标签中的 name 属性。

<wd-grid clickable>
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

自定义列数

column 可以用来自定义宫格列数。未定义 column 属性时，默认显示为一行，定义该属性后，组件内部根据 column 属性自行划分行数。

<wd-grid :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

自定义背景颜色

bg-color 可以用来自定义宫格背景颜色。

<wd-grid bg-color="rgba(0, 0, 0, 0.02)">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

开启边框

border 可以用来开启边框线展示。

<wd-grid border :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

内容插槽

通过默认插槽可以自定义 GridItem 的内容。

<wd-grid>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
  <wd-grid-item>
    <image class="img" :src="joy" />
  </wd-grid-item>
</wd-grid>

.img {
  width: 100%;
  height: 90px;
}

单个插槽

通过插槽 icon 可以插入 GridItem 中的图标位。

通过插槽 text 可以插入 GridItem 中的文字位。

注意:

使用单个插槽或者自定义样式时，需要用户使用 custom-class 控制每一个 GridItem 的高度，保证每一个 GridItem 的高度相同且符合用户预期。
使用 icon 插槽时，如果插槽大小超过icon-size设置的值时，需要调整icon-size属性使其大小等于插槽尺寸。

<wd-grid>
  <wd-grid-item text="文字" v-for="index in 3" :key="index" icon-size="36px">
    <template #icon>
      <image class="slot-img" :src="joy" />
    </template>
  </wd-grid-item>
</wd-grid>
<wd-grid>
  <wd-grid-item icon="picture" v-for="index in 3" :key="index">
    <template #text>
      <view class="text">自定义文字插槽</view>
    </template>
  </wd-grid-item>
</wd-grid>

.slot-img {
  height: 36px;
  width: 36px;
  border-radius: 4px;
}
.text {
  color: #ffb300;
  margin-top: 8px;
}

自定义样式

通过设置 custom-class 可以自定义 GridItem 的样式。

可以在 custom-class 样式属性中设定 GridItem 的宽、高度等属性。

注意:

设定宽高这类可能会影响布局的属性时，请将 custom-class 作用到当前 Grid 下的所有 GridItem 以确保所有 GridItem 样式相同。
如果想改变 GridItem 高度, 不要直接设置 Grid 的高度, 修改单独的 GridItem。
如果想改变 icon 大小设置 icon-size 属性, custom-icon 不能改变当前 icon 宽高。

<wd-grid>
  <wd-grid-item
    custom-class="custom-item"
    icon="search"
    text="京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。"
  />
  <wd-grid-item custom-class="custom-item" icon="person" text="秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。" />
</wd-grid>

:deep(.custom-item) {
  height: 80px !important;
  color: #e2231a;
  padding-left: 20px;
  text-align: left !important;
}

正方形格子

通过 square 属性开启正方形格属性。此时显示每一个 GridItem 都为正方形。

注意: 使用 square 不要自定义 GridItem 的高度样式。

<wd-grid square :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

设定格间隙

通过 gutter 属性设置格子之间的距离。

<wd-grid :gutter="10" :column="3">
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
  <wd-grid-item icon="picture" text="文字" />
</wd-grid>

页面导航

通过 clickable 属性开启可点击状态, 可以绑定 click 事件。

通过 link-type 属性设置页面跳转方式。

通过 url 属性设置跳转链接, 通过 url 属性设置 URL 跳转链接。

<wd-grid clickable>
  <wd-grid-item link-type="redirectTo" url="/pages/button/index" @itemclick="click" icon="search" text="Redirect to ..." />
  <wd-grid-item link-type="navigateTo" url="/pages/button/index" @itemclick="click" icon="setting" text="Navigate to ..." />
</wd-grid>

提示信息

设置 is-dot 属性后，会在图标右上角展示一个小红点。

设置 type | max | value , 使用方式同组件 wd-badge 中的同名属性。

<wd-grid>
  <wd-grid-item is-dot icon="goods" text="文字" />
  <wd-grid-item value="100" :max="99" icon="computer" text="文字" />
</wd-grid>

Grid Attributes

参数	说明	类型	可选值	默认值	最低版本

| column | 列数 | number | - | - | - |
| border | 是否显示边框 | boolean | - | false | - |
| gutter | 格子之间的间距，默认单位为px | number | - | - | - |
| square | 是否将格子固定为正方形 | boolean | - | false | - |
| clickable | 是否开启格子点击反馈 | boolean | - | false | - |
| bg-color | 背景颜色设置 | string | - | #ffffff | - |
| hover-class | 指定grid-item按下去的样式类 | string | - | wd-grid-item__content--hover | 1.9.0 |

GridItem Attributes

参数	说明	类型	可选值	默认值	最低版本

| text | 文字 value | string | - | - | - |
| icon | 图标名称，可选值见 wd-icon 组件 | string | - | - | - |
| is-dot | 是否显示图标右上角小红点 | boolean | - | false | - |
| type | 图标右上角显示的 badge 类型 | string | primary / success / warning / danger / info | - | - |
| value | 图标右上角 badge 显示值 | string, number | - | - | - |
| max | 图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | - | - | - |
| url | 点击后跳转的链接地址 | string | - | - | - |
| link-type | 页面跳转方式, 参考微信小程序路由文档 | string | navigateTo / switchTab / reLaunch | - | - |
| use-slot | 是否开启 GridItem 内容插槽 （1.12.0已废弃，直接使用默认插槽即可） | boolean | - | false | - |
| use-icon-slot | 是否开启 GridItem icon 插槽 （1.12.0已废弃，组件会自动检测icon插槽的存在） | boolean | - | false | - |
| use-text-slot | 是否开启 GridItem text 内容插槽 （1.12.0已废弃，组件会自动检测text插槽的存在） | boolean | - | false | - |
| icon-size | 图标大小 | string | - | 26px | - |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props | BadgeProps | - | - | 0.1.50 |

GridItem Events

方法名	说明	参数	返回值	最低版本

Grid Slot

name	说明	最低版本

| default | 宫格内容 | - |

GridItem Slot

name	说明	最低版本

Grid 外部样式类

类名	说明	最低版本

| custom-class | Grid 根节点样式 | - |

GridItem 外部样式类

类名	说明	最低版本