feat(GridItem): add badge prop, mark info prop as deprecated
This commit is contained in:
+3
-3
@@ -87,12 +87,12 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Show Info
|
||||
### Show Badge
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" text="Text" dot />
|
||||
<van-grid-item icon="search" text="Text" info="99+" />
|
||||
<van-grid-item icon="search" text="Text" badge="99+" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
@@ -118,7 +118,7 @@ Vue.use(GridItem);
|
||||
| icon | Icon name or URL | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
|
||||
| info `v2.2.1` | Content of the badge | *number \| string* | - |
|
||||
| badge `v2.5.6` | Content of the badge | *number \| string* | - |
|
||||
| url | Link URL | *string* | - |
|
||||
| to | Target route of the link, same as to of vue-router | *string \| object* | - |
|
||||
| replace | If true, the navigation will not leave a history record | *boolean* | `false` |
|
||||
|
||||
@@ -103,14 +103,14 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 提示信息
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标
|
||||
设置`dot`属性后,会在图标右上角展示一个小红点。设置`badge`属性后,会在图标右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" text="文字" dot />
|
||||
<van-grid-item icon="search" text="文字" info="99+" />
|
||||
<van-grid-item icon="search" text="文字" badge="99+" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
@@ -136,7 +136,8 @@ Vue.use(GridItem);
|
||||
| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
|
||||
| info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
|
||||
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
|
||||
| info `2.2.1` | 图标右上角徽标的内容(已废弃,请使用 badge 属性) | *number \| string* | - |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
| to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
|
||||
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
|
||||
|
||||
@@ -78,10 +78,10 @@
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showInfo')">
|
||||
<demo-block :title="$t('showBadge')">
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" :text="$t('text')" dot />
|
||||
<van-grid-item icon="search" :text="$t('text')" info="99+" />
|
||||
<van-grid-item icon="search" :text="$t('text')" badge="99+" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@@ -99,7 +99,7 @@ export default {
|
||||
customContent: '自定义内容',
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转',
|
||||
showInfo: '提示信息',
|
||||
showBadge: '徽标提示',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
@@ -110,7 +110,7 @@ export default {
|
||||
customContent: 'Custom Content',
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router',
|
||||
showInfo: 'Show Info',
|
||||
showBadge: 'Show Badge',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user