[new feature] add Tabbar component (#204)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

* [bugfix] Swipe shouid reinitialize when item changes

* [new feature] ImagePreview reconstruct

* [new feature] add Tabbar component

packages/index.js

@@ -50,6 +50,8 @@ import SwipeItem from './swipe-item';
 import Switch from './switch';
 import SwitchCell from './switch-cell';
 import Tab from './tab';
+import Tabbar from './tabbar';
+import TabbarItem from './tabbar-item';
 import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
@@ -108,6 +110,8 @@ const components = [
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   TreeSelect,
@@ -182,6 +186,8 @@ export {
   Switch,
   SwitchCell,
   Tab,
+  Tabbar,
+  TabbarItem,
   Tabs,
   Tag,
   Toast,

packages/swipe-item/index.vue

@@ -8,14 +8,9 @@
 export default {
   name: 'van-swipe-item',
 
-  beforeCreate() {
-    this.$parent.swipes.push(this);
-  },
-
   data() {
     return {
-      offset: 0,
-      index: this.$parent.swipes.indexOf(this)
+      offset: 0
     };
   },
 
@@ -28,8 +23,12 @@ export default {
     }
   },
 
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  },
+
   destroyed() {
-    this.$parent.swipes.splice(this.index, 1);
+    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
   }
 };
 </script>

packages/tabbar-item/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="['van-tabbar-item', { 'van-tabbar-item--active': active }]" @click="onClick">
+    <div :class="['van-tabbar-item__icon', { 'van-tabbar-item__icon-dot': dot }]">
+      <slot name="icon">
+        <van-icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <div class="van-tabbar-item__text">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-tabbar-item',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    icon: String,
+    dot: Boolean
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.items.push(this);
+  },
+
+  destroyed() {
+    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
+  },
+
+  methods: {
+    onClick() {
+      this.$parent.onChange(this.$parent.items.indexOf(this));
+    }
+  }
+};
+</script>

packages/tabbar/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="['van-tabbar', 'van-hairline--top-bottom', { 'van-tabbar--fixed': fixed }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-tabbar',
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  props: {
+    value: Number,
+    fixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    items() {
+      this.setActiveItem();
+    },
+    value() {
+      this.setActiveItem();
+    }
+  },
+
+  methods: {
+    setActiveItem() {
+      this.items.forEach((item, index) => {
+        item.active = index === this.value;
+      });
+    },
+    onChange(active) {
+      this.$emit('input', active);
+      this.$emit('change', active);
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -22,6 +22,7 @@
 @import './steps.css';
 @import './tag.css';
 @import './tab.css';
+@import './tabbar.css';
 @import './image-preview.css';
 @import './stepper.css';
 @import './progress.css';

packages/vant-css/src/tabbar.css

@@ -0,0 +1,50 @@
+@import './common/var.css';
+
+.van-tabbar {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  background-color: #fff;
+
+  &--fixed {
+    left: 0;
+    bottom: 0;
+    position: fixed;
+  }
+
+  &-item {
+    flex: 1;
+    color: #666;
+    display: flex;
+    line-height: 1;
+    font-size: 12px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    &__icon {
+      font-size: 18px;
+      margin-bottom: 5px;
+      position: relative;
+
+      &-dot {
+        &::after {
+          width: 8px;
+          height: 8px;
+          content: ' ';
+          position: absolute;
+          border-radius: 100%;
+          background-color: $red;
+        }
+      }
+
+      img {
+        height: 18px;
+      }
+    }
+
+    &--active {
+      color: $blue;
+    }
+  }
+}