mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] Badge: rename to sidebar
This commit is contained in:
陈嘉涵
parent
a84d93869c
commit
baf309c33a
@ -55,7 +55,7 @@
|
||||
- Cell: add less vars [\#3122](https://github.com/youzan/vant/pull/3122)
|
||||
- Rate: add less vars [\#3135](https://github.com/youzan/vant/pull/3135)
|
||||
- Panel: add less vars [\#3136](https://github.com/youzan/vant/pull/3136)
|
||||
- Badge: add less vars [\#3131](https://github.com/youzan/vant/pull/3131)
|
||||
- Sidebar: add less vars [\#3131](https://github.com/youzan/vant/pull/3131)
|
||||
- Dialog: add less vars [\#3123](https://github.com/youzan/vant/pull/3123)
|
||||
- Slider: add less vars [\#3125](https://github.com/youzan/vant/pull/3125)
|
||||
- Tabbar: add less vars [\#3124](https://github.com/youzan/vant/pull/3124)
|
||||
@ -554,7 +554,7 @@ Also we have optimized the UI of the following components:：
|
||||
|
||||
- Tab: add animated props [\#2126](https://github.com/youzan/vant/pull/2126)
|
||||
- Tab: update title style [\#2120](https://github.com/youzan/vant/pull/2120)
|
||||
- Badge: update info style [\#2122](https://github.com/youzan/vant/pull/2122)
|
||||
- Sidebar: update info style [\#2122](https://github.com/youzan/vant/pull/2122)
|
||||
- Radio: add checked-color prop [\#2129](https://github.com/youzan/vant/pull/2129)
|
||||
- Swipe: add indicator-color prop [\#2110](https://github.com/youzan/vant/pull/2110)
|
||||
- TreeSelect: support disable option [\#2107](https://github.com/youzan/vant/pull/2107)
|
||||
@ -612,7 +612,7 @@ Also we have optimized the UI of the following components:：
|
||||
|
||||
**Improvements**
|
||||
|
||||
- Badge: add change event [\#2017](https://github.com/youzan/vant/pull/2017)
|
||||
- Sidebar: add change event [\#2017](https://github.com/youzan/vant/pull/2017)
|
||||
- Radio: update color [\#2018](https://github.com/youzan/vant/pull/2018)
|
||||
- Checkbox: update color [\#2018](https://github.com/youzan/vant/pull/2018)
|
||||
- Sku: support image preview [\#2019](https://github.com/youzan/vant/pull/2019)
|
||||
@ -710,7 +710,7 @@ Also we have optimized the UI of the following components:：
|
||||
**Improvements**
|
||||
|
||||
- Tab: upgrade style [\#1908](https://github.com/youzan/vant/pull/1908)
|
||||
- Badge: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907)
|
||||
- Sidebar: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907)
|
||||
- Dialog: upgrade style [\#1906](https://github.com/youzan/vant/pull/1906)
|
||||
- NoticeBar: upgrade style [\#1893](https://github.com/youzan/vant/pull/1893)
|
||||
- Collapse: add disabled prop [\#1892](https://github.com/youzan/vant/pull/1892)
|
||||
@ -1362,7 +1362,7 @@ Also we have optimized the UI of the following components:：
|
||||
* fix ActionSheet bottom border missing [\#686](https://github.com/youzan/vant/pull/686)
|
||||
* fix AddressEdit area not selected when area_code changed [\#680](https://github.com/youzan/vant/pull/680)
|
||||
* fix Stepper value overlimit [\#691](https://github.com/youzan/vant/issues/691)
|
||||
* fix Badge info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
|
||||
* fix Sidebar info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
|
||||
|
||||
|
||||
## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
|
||||
@ -1652,7 +1652,7 @@ Also we have optimized the UI of the following components:：
|
||||
* Search: support native input attrs [\#418](https://github.com/youzan/vant/pull/418)
|
||||
* CellGroup: add 'border' prop [\#420](https://github.com/youzan/vant/pull/420)
|
||||
* AddressEdit: add focus、change-area、select-search events [\#426](https://github.com/youzan/vant/pull/426)
|
||||
* Badge、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419)
|
||||
* Sidebar、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
- Cell: 新增多个 Less 变量 [\#3122](https://github.com/youzan/vant/pull/3122)
|
||||
- Rate: 新增多个 Less 变量 [\#3135](https://github.com/youzan/vant/pull/3135)
|
||||
- Panel: 新增多个 Less 变量 [\#3136](https://github.com/youzan/vant/pull/3136)
|
||||
- Badge: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131)
|
||||
- Sidebar: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131)
|
||||
- Dialog: 新增多个 Less 变量 [\#3123](https://github.com/youzan/vant/pull/3123)
|
||||
- Slider: 新增多个 Less 变量 [\#3125](https://github.com/youzan/vant/pull/3125)
|
||||
- Tabbar: 新增多个 Less 变量 [\#3124](https://github.com/youzan/vant/pull/3124)
|
||||
@ -555,7 +555,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
|
||||
- Tab: 新增 animated 属性 [\#2126](https://github.com/youzan/vant/pull/2126)
|
||||
- Tab: 更新标题栏样式 [\#2120](https://github.com/youzan/vant/pull/2120)
|
||||
- Badge: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122)
|
||||
- Sidebar: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122)
|
||||
- Radio: 新增 checked-color 属性 [\#2129](https://github.com/youzan/vant/pull/2129)
|
||||
- Swipe: 新增 indica为r-color 属性 [\#2110](https://github.com/youzan/vant/pull/2110)
|
||||
- TreeSelect: 支持禁用选项 [\#2107](https://github.com/youzan/vant/pull/2107)
|
||||
@ -616,7 +616,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
- i18n: 支持土耳其语 [\#1998](https://github.com/youzan/vant/pull/1998)
|
||||
- i18n: 支持繁体中文（台） [\#1999](https://github.com/youzan/vant/pull/1999)
|
||||
- Icon: 新增 question2 图标 [\#2005](https://github.com/youzan/vant/pull/2005)
|
||||
- Badge: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017)
|
||||
- Sidebar: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017)
|
||||
- Switch: 新增 active-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
|
||||
- Switch: 新增 inactive-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
|
||||
- Radio: 选中态颜色调整为蓝色 [\#2018](https://github.com/youzan/vant/pull/2018)
|
||||
@ -710,7 +710,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
**Improvements**
|
||||
|
||||
- Tab: 样式升级 [\#1908](https://github.com/youzan/vant/pull/1908)
|
||||
- Badge: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907)
|
||||
- Sidebar: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907)
|
||||
- Dialog: 样式升级 [\#1906](https://github.com/youzan/vant/pull/1906)
|
||||
- NoticeBar: 样式升级 [\#1893](https://github.com/youzan/vant/pull/1893)
|
||||
- Collapse: 新增 disabled 属性 [\#1892](https://github.com/youzan/vant/pull/1892)
|
||||
@ -1356,7 +1356,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
* 修复 ActionSheet 下边框未展示的问题 [\#686](https://github.com/youzan/vant/pull/686)
|
||||
* 修复 AddressEdit 在数据变更时未正确选中省市区的问题 [\#680](https://github.com/youzan/vant/pull/680)
|
||||
* 修复 Stepper value 溢出的问题 [\#691](https://github.com/youzan/vant/issues/691)
|
||||
* 修复 Badge 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687)
|
||||
* 修复 Sidebar 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687)
|
||||
|
||||
## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
|
||||
`2018-03-09`
|
||||
@ -1644,7 +1644,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
* Search: 支持 input 标签原生属性 [\#418](https://github.com/youzan/vant/pull/418)
|
||||
* CellGroup: 新增 'border' 属性 [\#420](https://github.com/youzan/vant/pull/420)
|
||||
* AddressEdit: 新增 focus、change-area、select-search 事件 [\#426](https://github.com/youzan/vant/pull/426)
|
||||
* Badge、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419)
|
||||
* Sidebar、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
@ -2126,7 +2126,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
|
||||
* 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102)
|
||||
* 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99)
|
||||
* 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98)
|
||||
* 优化 Step、Loading、Tag、Badge 文档 [\#101](https://github.com/youzan/vant/pull/101)
|
||||
* 优化 Step、Loading、Tag、Sidebar 文档 [\#101](https://github.com/youzan/vant/pull/101)
|
||||
* Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
@ -35,7 +35,8 @@
|
||||
|
||||
### Badge
|
||||
|
||||
- [ ] 重命名为`SideNav`
|
||||
- [x] `BadgeGroup`重命名为`Sidebar`
|
||||
- [x] `Badge`重命名为`SlideBarItem`
|
||||
|
||||
### Loading
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ export default {
|
||||
'address-edit': () => wrapper(import('../../packages/address-edit/demo'), 'address-edit'),
|
||||
'address-list': () => wrapper(import('../../packages/address-list/demo'), 'address-list'),
|
||||
'area': () => wrapper(import('../../packages/area/demo'), 'area'),
|
||||
'badge': () => wrapper(import('../../packages/badge/demo'), 'badge'),
|
||||
'button': () => wrapper(import('../../packages/button/demo'), 'button'),
|
||||
'card': () => wrapper(import('../../packages/card/demo'), 'card'),
|
||||
'cell': () => wrapper(import('../../packages/cell/demo'), 'cell'),
|
||||
@ -40,6 +39,7 @@ export default {
|
||||
'radio': () => wrapper(import('../../packages/radio/demo'), 'radio'),
|
||||
'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'),
|
||||
'search': () => wrapper(import('../../packages/search/demo'), 'search'),
|
||||
'sidebar': () => wrapper(import('../../packages/sidebar/demo'), 'sidebar'),
|
||||
'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'),
|
||||
'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
|
||||
'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
|
||||
|
||||
@ -251,10 +251,6 @@ module.exports = {
|
||||
groupName: '导航组件',
|
||||
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/badge',
|
||||
title: 'Badge 徽章'
|
||||
},
|
||||
{
|
||||
path: '/nav-bar',
|
||||
title: 'NavBar 导航栏'
|
||||
@ -263,6 +259,10 @@ module.exports = {
|
||||
path: '/pagination',
|
||||
title: 'Pagination 分页'
|
||||
},
|
||||
{
|
||||
path: '/sidebar',
|
||||
title: 'Sidebar 侧边导航'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab 标签页'
|
||||
@ -558,10 +558,6 @@ module.exports = {
|
||||
groupName: 'Navigation Components',
|
||||
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
|
||||
list: [
|
||||
{
|
||||
path: '/badge',
|
||||
title: 'Badge'
|
||||
},
|
||||
{
|
||||
path: '/nav-bar',
|
||||
title: 'NavBar'
|
||||
@ -570,6 +566,10 @@ module.exports = {
|
||||
path: '/pagination',
|
||||
title: 'Pagination'
|
||||
},
|
||||
{
|
||||
path: '/sidebar',
|
||||
title: 'Sidebar'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab'
|
||||
|
||||
@ -21,8 +21,6 @@ export default {
|
||||
'address-list.zh-CN': () => import('../../packages/address-list/zh-CN.md'),
|
||||
'area.en-US': () => import('../../packages/area/en-US.md'),
|
||||
'area.zh-CN': () => import('../../packages/area/zh-CN.md'),
|
||||
'badge.en-US': () => import('../../packages/badge/en-US.md'),
|
||||
'badge.zh-CN': () => import('../../packages/badge/zh-CN.md'),
|
||||
'button.en-US': () => import('../../packages/button/en-US.md'),
|
||||
'button.zh-CN': () => import('../../packages/button/zh-CN.md'),
|
||||
'card.en-US': () => import('../../packages/card/en-US.md'),
|
||||
@ -89,6 +87,8 @@ export default {
|
||||
'rate.zh-CN': () => import('../../packages/rate/zh-CN.md'),
|
||||
'search.en-US': () => import('../../packages/search/en-US.md'),
|
||||
'search.zh-CN': () => import('../../packages/search/zh-CN.md'),
|
||||
'sidebar.en-US': () => import('../../packages/sidebar/en-US.md'),
|
||||
'sidebar.zh-CN': () => import('../../packages/sidebar/zh-CN.md'),
|
||||
'sku.en-US': () => import('../../packages/sku/en-US.md'),
|
||||
'sku.zh-CN': () => import('../../packages/sku/zh-CN.md'),
|
||||
'slider.en-US': () => import('../../packages/slider/en-US.md'),
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
@import '../style/var';
|
||||
|
||||
.badge-group {
|
||||
width: @badge-group-width;
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
## Badge
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
Vue.use(Badge);
|
||||
Vue.use(BadgeGroup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `active-key` prop to set index of chosen 'badge'
|
||||
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey" @change="onChange">
|
||||
<van-badge title="Title" />
|
||||
<van-badge title="Title" info="8" />
|
||||
<van-badge title="Title" info="99" />
|
||||
<van-badge title="Title" info="99+" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| active-key | Index of chosen badge | `String | Number` | `0` |
|
||||
|
||||
### BadgeGroup Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when badge changed | key: index of current badge |
|
||||
|
||||
### Badge API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| title | Content | `String` | `''` |
|
||||
| info | Info Message | `String | Number` | `''` |
|
||||
| url | Link | `String` | - |
|
||||
|
||||
### Badge Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click badge | key: index of current badge |
|
||||
@ -1,46 +0,0 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-badge {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
color: @badge-text-color;
|
||||
padding: @badge-padding;
|
||||
font-size: @badge-font-size;
|
||||
line-height: @badge-line-height;
|
||||
background-color: @badge-background-color;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&__text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @badge-active-color;
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
&--select {
|
||||
color: @badge-selected-text-color;
|
||||
font-weight: @badge-selected-font-weight;
|
||||
border-color: @badge-selected-border-color;
|
||||
|
||||
&::after {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active {
|
||||
background-color: @badge-selected-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.van-info {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-badge-group van-hairline--top-bottom"><a class="van-badge van-badge--select van-hairline">
|
||||
<div class="van-badge__text">标签名称
|
||||
<!---->
|
||||
</div>
|
||||
</a> <a class="van-badge van-hairline">
|
||||
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">8</div>
|
||||
</div>
|
||||
</a> <a class="van-badge van-hairline">
|
||||
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">99</div>
|
||||
</div>
|
||||
</a> <a class="van-badge van-hairline">
|
||||
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">99+</div>
|
||||
</div>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,66 +0,0 @@
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
Vue.use(Badge);
|
||||
Vue.use(BadgeGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
|
||||
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey" @change="onChange">
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="99+" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
|
||||
|
||||
### BadgeGroup Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| change | 切换徽章时触发 | key: 当前选中徽章的索引 |
|
||||
|
||||
### Badge API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String | Number` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
|
||||
### Badge Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| click | 点击徽章时触发 | key: 当前徽章的索引 |
|
||||
@ -8,8 +8,6 @@
|
||||
/* common components */
|
||||
@import './col/index';
|
||||
@import './row/index';
|
||||
@import './badge/index';
|
||||
@import './badge-group/index';
|
||||
@import './circle/index';
|
||||
@import './collapse-item/index';
|
||||
@import './list/index';
|
||||
@ -30,6 +28,8 @@
|
||||
@import './image-preview/index';
|
||||
@import './stepper/index';
|
||||
@import './progress/index';
|
||||
@import './sidebar/index';
|
||||
@import './sidebar-item/index';
|
||||
@import './swipe/index';
|
||||
@import './swipe-item/index';
|
||||
@import './slider/index';
|
||||
|
||||
@ -5,8 +5,6 @@ import ActionSheet from './action-sheet';
|
||||
import AddressEdit from './address-edit';
|
||||
import AddressList from './address-list';
|
||||
import Area from './area';
|
||||
import Badge from './badge';
|
||||
import BadgeGroup from './badge-group';
|
||||
import Button from './button';
|
||||
import Card from './card';
|
||||
import Cell from './cell';
|
||||
@ -53,6 +51,8 @@ import RadioGroup from './radio-group';
|
||||
import Rate from './rate';
|
||||
import Row from './row';
|
||||
import Search from './search';
|
||||
import Sidebar from './sidebar';
|
||||
import SidebarItem from './sidebar-item';
|
||||
import Sku from './sku';
|
||||
import Slider from './slider';
|
||||
import Step from './step';
|
||||
@ -85,8 +85,6 @@ const components = [
|
||||
AddressEdit,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
BadgeGroup,
|
||||
Button,
|
||||
Card,
|
||||
Cell,
|
||||
@ -131,6 +129,8 @@ const components = [
|
||||
Rate,
|
||||
Row,
|
||||
Search,
|
||||
Sidebar,
|
||||
SidebarItem,
|
||||
Sku,
|
||||
Slider,
|
||||
Step,
|
||||
@ -170,8 +170,6 @@ export {
|
||||
AddressEdit,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
BadgeGroup,
|
||||
Button,
|
||||
Card,
|
||||
Cell,
|
||||
@ -218,6 +216,8 @@ export {
|
||||
Rate,
|
||||
Row,
|
||||
Search,
|
||||
Sidebar,
|
||||
SidebarItem,
|
||||
Sku,
|
||||
Slider,
|
||||
Step,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { use } from '../utils';
|
||||
import Info from '../info';
|
||||
|
||||
const [sfc, bem] = use('badge');
|
||||
const [sfc, bem] = use('sidebar-item');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
@ -10,32 +10,32 @@ export default sfc({
|
||||
title: String
|
||||
},
|
||||
|
||||
inject: ['vanBadgeGroup'],
|
||||
inject: ['vanSidebar'],
|
||||
|
||||
created() {
|
||||
this.parent.badges.push(this);
|
||||
this.parent.items.push(this);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.parent.badges = this.parent.badges.filter(item => item !== this);
|
||||
this.parent.items = this.parent.items.filter(item => item !== this);
|
||||
},
|
||||
|
||||
computed: {
|
||||
parent() {
|
||||
if (process.env.NODE_ENV !== 'production' && !this.vanBadgeGroup) {
|
||||
console.error('[Vant] Badge needs to be child of BadgeGroup');
|
||||
if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
|
||||
console.error('[Vant] SidebarItem needs to be child of Sidebar');
|
||||
}
|
||||
return this.vanBadgeGroup;
|
||||
return this.vanSidebar;
|
||||
},
|
||||
|
||||
select() {
|
||||
return this.parent.badges.indexOf(this) === +this.parent.activeKey;
|
||||
return this.parent.items.indexOf(this) === +this.parent.activeKey;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
const index = this.parent.badges.indexOf(this);
|
||||
const index = this.parent.items.indexOf(this);
|
||||
this.$emit('click', index);
|
||||
this.parent.$emit('change', index);
|
||||
}
|
||||
46
packages/sidebar-item/index.less
Normal file
46
packages/sidebar-item/index.less
Normal file
@ -0,0 +1,46 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-sidebar-item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
color: @sidebar-text-color;
|
||||
padding: @sidebar-padding;
|
||||
font-size: @sidebar-font-size;
|
||||
line-height: @sidebar-line-height;
|
||||
background-color: @sidebar-background-color;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&__text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @sidebar-active-color;
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
&--select {
|
||||
color: @sidebar-selected-text-color;
|
||||
font-weight: @sidebar-selected-font-weight;
|
||||
border-color: @sidebar-selected-border-color;
|
||||
|
||||
&::after {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active {
|
||||
background-color: @sidebar-selected-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.van-info {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-badge-group
|
||||
<van-sidebar
|
||||
:active-key="activeKey"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-badge :title="$t('title')" />
|
||||
<van-badge
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="8"
|
||||
/>
|
||||
<van-badge
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="99"
|
||||
/>
|
||||
<van-badge
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="99+"
|
||||
/>
|
||||
</van-badge-group>
|
||||
</van-sidebar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -48,8 +48,8 @@ export default {
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-badge {
|
||||
.van-badge-group {
|
||||
.demo-sidebar {
|
||||
.van-sidebar {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.van-badge {
|
||||
.van-sidebar-item {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
67
packages/sidebar/en-US.md
Normal file
67
packages/sidebar/en-US.md
Normal file
@ -0,0 +1,67 @@
|
||||
## Sidebar
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Sidebar, SidebarItem } from 'vant';
|
||||
|
||||
Vue.use(Sidebar);
|
||||
Vue.use(SidebarItem);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
Use `active-key` prop to set index of chosen item
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" info="8" />
|
||||
<van-sidebar-item title="Title" info="99" />
|
||||
<van-sidebar-item title="Title" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Sidebar API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| active-key | Index of chosen item | `String | Number` | `0` |
|
||||
|
||||
### Sidebar Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when item changed | key: index of current item |
|
||||
|
||||
### SidebarItem API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| title | Content | `String` | `''` |
|
||||
| info | Info Message | `String | Number` | `''` |
|
||||
| url | Link | `String` | - |
|
||||
|
||||
### SidebarItem Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click item | key: index of current item |
|
||||
@ -1,6 +1,6 @@
|
||||
import { use } from '../utils';
|
||||
|
||||
const [sfc, bem] = use('badge-group');
|
||||
const [sfc, bem] = use('sidebar');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
@ -12,13 +12,13 @@ export default sfc({
|
||||
|
||||
provide() {
|
||||
return {
|
||||
vanBadgeGroup: this
|
||||
vanSidebar: this
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
badges: []
|
||||
items: []
|
||||
};
|
||||
},
|
||||
|
||||
5
packages/sidebar/index.less
Normal file
5
packages/sidebar/index.less
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-sidebar {
|
||||
width: @sidebar-width;
|
||||
}
|
||||
22
packages/sidebar/test/__snapshots__/demo.spec.js.snap
Normal file
22
packages/sidebar/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,22 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称
|
||||
<!---->
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
|
||||
</div>
|
||||
</a> <a class="van-sidebar-item van-hairline">
|
||||
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
|
||||
</div>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,19 +1,19 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import Badge from '..';
|
||||
import BadgeGroup from '../../badge-group';
|
||||
import Sidebar from '..';
|
||||
import SidebarItem from '../../sidebar-item';
|
||||
|
||||
test('event', () => {
|
||||
const onClick = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<badge-group @change="onChange">
|
||||
<badge @click="onClick">Text</badge>
|
||||
</badge-group>
|
||||
<sidebar @change="onChange">
|
||||
<sidebar-item @click="onClick">Text</sidebar-item>
|
||||
</sidebar>
|
||||
`,
|
||||
components: {
|
||||
Badge,
|
||||
BadgeGroup
|
||||
Sidebar,
|
||||
SidebarItem
|
||||
},
|
||||
methods: {
|
||||
onClick,
|
||||
@ -21,7 +21,7 @@ test('event', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-badge').trigger('click');
|
||||
wrapper.find('.van-sidebar-item').trigger('click');
|
||||
expect(onClick).toHaveBeenCalledWith(0);
|
||||
expect(onChange).toHaveBeenCalledWith(0);
|
||||
wrapper.vm.$destroy();
|
||||
@ -31,7 +31,7 @@ test('without parent', () => {
|
||||
const consoleError = console.error;
|
||||
try {
|
||||
console.error = jest.fn();
|
||||
mount(Badge);
|
||||
mount(Sidebar);
|
||||
} catch (err) {
|
||||
console.error = consoleError;
|
||||
expect(err).toBeTruthy();
|
||||
67
packages/sidebar/zh-CN.md
Normal file
67
packages/sidebar/zh-CN.md
Normal file
@ -0,0 +1,67 @@
|
||||
## Sidebar 侧边导航
|
||||
|
||||
### 使用指南
|
||||
|
||||
``` javascript
|
||||
import { Sidebar, SidebarItem } from 'vant';
|
||||
|
||||
Vue.use(Sidebar);
|
||||
Vue.use(SidebarItem);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过在`van-sidebar`上设置`active-key`属性来控制选中项
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" info="8" />
|
||||
<van-sidebar-item title="标签名称" info="99" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Sidebar API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
|
||||
|
||||
### Sidebar Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
|
||||
|
||||
### SidebarItem API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String | Number` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
|
||||
### SidebarItem Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | key: 当前导航项的索引 |
|
||||
@ -32,21 +32,6 @@
|
||||
@action-sheet-close-icon-size: 18px;
|
||||
@action-sheet-close-icon-color: @gray-dark;
|
||||
|
||||
// Badge
|
||||
@badge-font-size: 14px;
|
||||
@badge-line-height: 1.4;
|
||||
@badge-text-color: @gray-darker;
|
||||
@badge-padding: 20px 12px 20px 9px;
|
||||
@badge-active-color: @active-color;
|
||||
@badge-background-color: @background-color;
|
||||
@badge-selected-font-weight: 500;
|
||||
@badge-selected-text-color: @text-color;
|
||||
@badge-selected-border-color: @red;
|
||||
@badge-selected-background-color: @white;
|
||||
|
||||
// BadgeGroup
|
||||
@badge-group-width: 85px;
|
||||
|
||||
// Button
|
||||
@button-mini-height: 22px;
|
||||
@button-mini-min-width: 50px;
|
||||
@ -235,6 +220,21 @@
|
||||
// Rate
|
||||
@rate-horizontal-padding: 2px;
|
||||
|
||||
// Sidebar
|
||||
@sidebar-width: 85px;
|
||||
|
||||
// SidebarItem
|
||||
@sidebar-font-size: 14px;
|
||||
@sidebar-line-height: 1.4;
|
||||
@sidebar-text-color: @gray-darker;
|
||||
@sidebar-padding: 20px 12px 20px 9px;
|
||||
@sidebar-active-color: @active-color;
|
||||
@sidebar-background-color: @background-color;
|
||||
@sidebar-selected-font-weight: 500;
|
||||
@sidebar-selected-text-color: @text-color;
|
||||
@sidebar-selected-border-color: @red;
|
||||
@sidebar-selected-background-color: @white;
|
||||
|
||||
// Slider
|
||||
@slider-active-background-color: @blue;
|
||||
@slider-inactive-background-color: @gray-light;
|
||||
|
||||
4
types/index.d.ts
vendored
4
types/index.d.ts
vendored
@ -13,8 +13,8 @@ export class ActionSheet extends VanComponent {}
|
||||
export class AddressEdit extends VanComponent {}
|
||||
export class AddressList extends VanComponent {}
|
||||
export class Area extends VanComponent {}
|
||||
export class Badge extends VanComponent {}
|
||||
export class BadgeGroup extends VanComponent {}
|
||||
export class Sidebar extends VanComponent {}
|
||||
export class SidebarGroup extends VanComponent {}
|
||||
export class Button extends VanComponent {}
|
||||
export class Card extends VanComponent {}
|
||||
export class Cell extends VanComponent {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user