[breaking change] Badge: rename to sidebar

docs/markdown/changelog.en-US.md

@@ -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**
 

docs/markdown/changelog.zh-CN.md

@@ -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**

docs/markdown/v2-progress-tracking.md

@@ -35,7 +35,8 @@
 
 ### Badge
 
-- [ ] 重命名为`SideNav`
+- [x] `BadgeGroup`重命名为`Sidebar`
+- [x] `Badge`重命名为`SlideBarItem`
 
 ### Loading
 

docs/src/demo-entry.js

@@ -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'),

docs/src/doc.config.js

@@ -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'

docs/src/docs-entry.js

@@ -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'),

packages/badge-group/index.less

@@ -1,5 +0,0 @@
-@import '../style/var';
-
-.badge-group {
-  width: @badge-group-width;
-}

packages/badge/en-US.md

@@ -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 |

packages/badge/index.less

@@ -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;
-  }
-}

packages/badge/test/__snapshots__/demo.spec.js.snap

@@ -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>
-`;

packages/badge/zh-CN.md

@@ -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: 当前徽章的索引 |

packages/index.less

@@ -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';

packages/index.ts

@@ -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,

packages/sidebar-item/index.js

@@ -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) {
+      if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
-        console.error('[Vant] Badge needs to be child of BadgeGroup');
+        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);
     }

packages/sidebar-item/index.less

@@ -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;
+  }
+}

packages/sidebar/demo/index.vue

@@ -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-sidebar-item :title="$t('title')" />
-        <van-badge
+        <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 {
+.demo-sidebar {
-  .van-badge-group {
+  .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;
   }

packages/sidebar/en-US.md

@@ -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 |

packages/sidebar/index.js

@@ -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: []
     };
   },
 

packages/sidebar/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.van-sidebar {
+  width: @sidebar-width;
+}

packages/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -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>
+`;

packages/sidebar/test/index.spec.js

@@ -1,19 +1,19 @@
 import { mount } from '../../../test/utils';
-import Badge from '..';
+import Sidebar from '..';
-import BadgeGroup from '../../badge-group';
+import SidebarItem from '../../sidebar-item';
 
 test('event', () => {
   const onClick = jest.fn();
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <badge-group @change="onChange">
+      <sidebar @change="onChange">
-        <badge @click="onClick">Text</badge>
+        <sidebar-item @click="onClick">Text</sidebar-item>
-      </badge-group>
+      </sidebar>
     `,
     components: {
-      Badge,
+      Sidebar,
-      BadgeGroup
+      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();

packages/sidebar/zh-CN.md

@@ -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: 当前导航项的索引 |

packages/style/var.less

@@ -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;

types/index.d.ts

@@ -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 Sidebar extends VanComponent {}
-export class BadgeGroup extends VanComponent {}
+export class SidebarGroup extends VanComponent {}
 export class Button extends VanComponent {}
 export class Card extends VanComponent {}
 export class Cell extends VanComponent {}