283 lines
12 KiB
Markdown
283 lines
12 KiB
Markdown
# Grid 宫格
|
||
|
||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
|
||
|
||
## 基础用法
|
||
|
||
基础用法需要绑定 `icon` 值以及 `text` 属性。默认显示一行。
|
||
|
||
`icon` 为 `wd-icon` 标签中的 `name` 属性。
|
||
|
||
```html
|
||
<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` 属性自行划分行数。
|
||
|
||
```html
|
||
<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` 可以用来自定义宫格背景颜色。
|
||
|
||
```html
|
||
<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` 可以用来开启边框线展示。
|
||
|
||
```html
|
||
<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` 的内容。
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
```scss
|
||
.img {
|
||
width: 100%;
|
||
height: 90px;
|
||
}
|
||
```
|
||
|
||
## 单个插槽
|
||
|
||
通过插槽 `icon` 可以插入 `GridItem` 中的图标位。
|
||
|
||
通过插槽 `text` 可以插入 `GridItem` 中的文字位。
|
||
|
||
注意:
|
||
|
||
1. 使用单个插槽或者自定义样式时，需要用户使用 `custom-class` 控制 每一个 `GridItem` 的高度，保证每一个 `GridItem` 的高度相同且符合用户预期。
|
||
|
||
2. 使用 icon 插槽时，如果插槽大小超过`icon-size`设置的值时，需要调整`icon-size`属性使其大小等于插槽尺寸。
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
```scss
|
||
.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 宽高。**
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
```scss
|
||
:deep(.custom-item) {
|
||
height: 80px !important;
|
||
color: #e2231a;
|
||
padding-left: 20px;
|
||
text-align: left !important;
|
||
}
|
||
```
|
||
|
||
## 正方形格子
|
||
|
||
通过 `square` 属性开启正方形格属性。此时显示每一个 `GridItem` 都为正方形。
|
||
|
||
注意: 使用 `square` 不要自定义 `GridItem` 的高度样式。
|
||
|
||
```html
|
||
<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` 属性设置格子之间的距离。
|
||
|
||
```html
|
||
<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 跳转链接。
|
||
|
||
```html
|
||
<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` 中的同名属性。
|
||
|
||
```html
|
||
<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 | 页面跳转方式, 参考[微信小程序路由文档](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html) | string | navigateTo / switchTab / reLaunch | - | - |
|
||
| <s>use-slot</s> | 是否开启 `GridItem` 内容插槽 **（1.12.0已废弃，直接使用默认插槽即可）** | boolean | - | false | - |
|
||
| <s>use-icon-slot</s> | 是否开启 `GridItem` icon 插槽 **（1.12.0已废弃，组件会自动检测icon插槽的存在）** | boolean | - | false | - |
|
||
| <s>use-text-slot</s> | 是否开启 `GridItem` text 内容插槽 **（1.12.0已废弃，组件会自动检测text插槽的存在）** | boolean | - | false | - |
|
||
| icon-size | 图标大小 | string | - | 26px | - |
|
||
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 0.1.50 |
|
||
|
||
## GridItem Events
|
||
|
||
| 方法名 | 说明 | 参数 | 返回值 | 最低版本 |
|
||
| --------- | -------------- | ----- | ------ | -------- |
|
||
| itemclick | 点击(跳转)事件 | event | - | - |
|
||
|
||
## Grid Slot
|
||
|
||
| name | 说明 | 最低版本 |
|
||
| ------- | -------- | -------- |
|
||
| default | 宫格内容 | - |
|
||
|
||
## GridItem Slot
|
||
|
||
| name | 说明 | 最低版本 |
|
||
| ------- | ------------------------------ | -------- |
|
||
| default | 宫格中每一格的默认显示全部内容 | - |
|
||
| icon | 宫格中图标位内容 | - |
|
||
| text | 宫格中文本位内容 | - |
|
||
|
||
## Grid 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
| ------------ | --------------- | -------- |
|
||
| custom-class | Grid 根节点样式 | - |
|
||
|
||
## GridItem 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
| ------------ | ----------------------- | -------- |
|
||
| custom-class | GridItem 根节点样式 | - |
|
||
| custom-text | GridItem 下方文字样式 | - |
|
||
| custom-icon | GridItem 上方 icon 样式 | - |
|