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

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

View File

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

View File

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

View File

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

View File

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