[breaking change] Badge: rename to sidebar

packages/sidebar-item/index.js

@@ -0,0 +1,58 @@
+import { use } from '../utils';
+import Info from '../info';
+
+const [sfc, bem] = use('sidebar-item');
+
+export default sfc({
+  props: {
+    url: String,
+    info: [String, Number],
+    title: String
+  },
+
+  inject: ['vanSidebar'],
+
+  created() {
+    this.parent.items.push(this);
+  },
+
+  beforeDestroy() {
+    this.parent.items = this.parent.items.filter(item => item !== this);
+  },
+
+  computed: {
+    parent() {
+      if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
+        console.error('[Vant] SidebarItem needs to be child of Sidebar');
+      }
+      return this.vanSidebar;
+    },
+
+    select() {
+      return this.parent.items.indexOf(this) === +this.parent.activeKey;
+    }
+  },
+
+  methods: {
+    onClick() {
+      const index = this.parent.items.indexOf(this);
+      this.$emit('click', index);
+      this.parent.$emit('change', index);
+    }
+  },
+
+  render(h) {
+    return (
+      <a
+        href={this.url}
+        class={[bem({ select: this.select }), 'van-hairline']}
+        onClick={this.onClick}
+      >
+        <div class={bem('text')}>
+          {this.title}
+          <Info info={this.info} class={bem('info')} />
+        </div>
+      </a>
+    );
+  }
+});

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