blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

feat(SideBarItem): add dot prop (#2066)

Browse Source
This commit is contained in:
ShuaiKang Zhang 2019-09-19 20:05:38 +08:00 committed by neverland
parent a43fb7f263
commit da30b612c4
4 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/pages/sidebar/index.wxml
View File

@ -8,8 +8,8 @@
<demo-block title="显示徽标">
<van-sidebar custom-class="custom-sidebar" bind:change="onChange">
<van-sidebar-item title="标签名称" info="8" />
<van-sidebar-item title="标签名称" info="99" />
<van-sidebar-item title="标签名称" dot />
<van-sidebar-item title="标签名称" info="5" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>
</demo-block>

1
packages/sidebar-item/index.ts
View File

@ -10,6 +10,7 @@ VantComponent({
},
props: {
dot: Boolean,
info: null,
title: String
},

3
packages/sidebar-item/index.wxml
View File

@ -8,7 +8,8 @@
>
<view class="van-sidebar-item__text">
<van-info
wx:if="{{ info !== null }}"
wx:if="{{ info !== null || dot }}"
dot="{{ dot }}"
info="{{ info }}"
custom-style="right: 4px"
/>

9
packages/sidebar/README.md
View File

@ -40,14 +40,14 @@ Page({
});
```
### 显示徽标
### 提示信息
通过`info`属性设置徽标内容
设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
```html
<van-sidebar active="{{ active }}">
<van-sidebar-item title="标签名称" info="8" />
<van-sidebar-item title="标签名称" info="99" />
<van-sidebar-item title="标签名称" dot />
<van-sidebar-item title="标签名称" info="5" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>
```
@ -77,6 +77,7 @@ Page({
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| title | 内容 | *string* | `''` | - |
| dot | 是否显示右上角小红点 | *boolean* | `false` | - |
| info | 提示消息 | *string \| number* | `''` | - |
### SidebarItem Event