diff --git a/dist/btn/index.js b/dist/btn/index.js
index 8adf3988..1ec7783a 100644
--- a/dist/btn/index.js
+++ b/dist/btn/index.js
@@ -3,7 +3,7 @@
 var nativeButtonBehavior = require('./native-button-behaviors');
 
 Component({
-  externalClasses: ['custom-class'],
+  externalClasses: ['custom-class', 'theme-class'],
   behaviors: [nativeButtonBehavior],
   relations: {
     '../btn-group/index': {
diff --git a/dist/btn/index.wxml b/dist/btn/index.wxml
index e1626d00..0a1703cc 100644
--- a/dist/btn/index.wxml
+++ b/dist/btn/index.wxml
@@ -1,5 +1,5 @@
 <button
-  class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  class="custom-class theme-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
   disabled="{{ disabled }}"
   hover-class="button-hover"
   open-type="{{ openType }}"
diff --git a/dist/capsule/index.js b/dist/capsule/index.js
index 5f27c344..7b8452cc 100644
--- a/dist/capsule/index.js
+++ b/dist/capsule/index.js
@@ -1,6 +1,7 @@
 'use strict';
 
 Component({
+  externalClasses: ['custom-class'],
   /**
    * 组件的属性列表
    * 用于组件自定义设置
diff --git a/dist/capsule/index.wxml b/dist/capsule/index.wxml
index abee3b42..68f3c1c3 100644
--- a/dist/capsule/index.wxml
+++ b/dist/capsule/index.wxml
@@ -1,4 +1,4 @@
-<view class="zan-capsule zan-capsule--{{type}}">
+<view class="custom-class zan-capsule zan-capsule--{{type}}">
   <block wx:if="{{color}}">
     <view
       class="zan-capsule__left"
diff --git a/dist/card/index.js b/dist/card/index.js
index 4c593794..fbc3c037 100644
--- a/dist/card/index.js
+++ b/dist/card/index.js
@@ -5,7 +5,7 @@ Component({
     multipleSlots: true
   },
 
-  externalClasses: ['card-class'],
+  externalClasses: ['card-class', 'thumb-class'],
 
   properties: {
     useThumbSlot: {
diff --git a/dist/card/index.wxml b/dist/card/index.wxml
index 98e26788..4ebc401f 100644
--- a/dist/card/index.wxml
+++ b/dist/card/index.wxml
@@ -1,7 +1,7 @@
-<view class="zan-card card-class">
+<view class="card-class zan-card">
   <!-- 左侧图片 -->
   
-  <view class="zan-card__thumb">
+  <view class="thumb-class zan-card__thumb">
     <image class="zan-card__img"
       src="{{ thumb }}"
       mode="aspectFit"
diff --git a/dist/cell/index.wxml b/dist/cell/index.wxml
index 35bc362b..dc94e6a6 100644
--- a/dist/cell/index.wxml
+++ b/dist/cell/index.wxml
@@ -1,6 +1,7 @@
 <view 
   catchtap="cellTap"
-  class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}">
+  class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}"
+>
 
   <view class="zan-cell__icon">
     <slot name="icon"></slot>
diff --git a/dist/checkbox-group/index.js b/dist/checkbox-group/index.js
new file mode 100644
index 00000000..09058960
--- /dev/null
+++ b/dist/checkbox-group/index.js
@@ -0,0 +1,29 @@
+'use strict';
+
+var _relations;
+
+var CHECKBOX_PATH = '../checkbox/index';
+
+Component({
+  relations: (_relations = {}, _relations[CHECKBOX_PATH] = {
+    type: 'child',
+    linked: function linked() {
+      this.updateChildren(CHECKBOX_PATH);
+    }
+  }, _relations),
+
+  data: {
+    elementUpdateTimeout: 0
+  },
+
+  methods: {
+    updateChildren: function updateChildren(childPath) {
+      // 把checkbox标记为在group中，设置不同样式
+      var elements = this.getRelationNodes(childPath);
+
+      elements.forEach(function (checkbox, index) {
+        checkbox.updateData({ isInGroup: true });
+      });
+    }
+  }
+});
\ No newline at end of file
diff --git a/dist/checkbox-group/index.json b/dist/checkbox-group/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/dist/checkbox-group/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/dist/checkbox-group/index.wxml b/dist/checkbox-group/index.wxml
new file mode 100644
index 00000000..a6ef51f8
--- /dev/null
+++ b/dist/checkbox-group/index.wxml
@@ -0,0 +1,3 @@
+<view class="checkbox-group">
+  <slot></slot>
+</view>
diff --git a/dist/checkbox-group/index.wxss b/dist/checkbox-group/index.wxss
new file mode 100644
index 00000000..d2278289
--- /dev/null
+++ b/dist/checkbox-group/index.wxss
@@ -0,0 +1 @@
+.checkbox-group{padding-bottom:10px;background-color:#fff}.checkbox-group .zan-checkbox{margin-top:10px}
\ No newline at end of file
diff --git a/dist/checkbox/index.js b/dist/checkbox/index.js
new file mode 100644
index 00000000..62160c07
--- /dev/null
+++ b/dist/checkbox/index.js
@@ -0,0 +1,44 @@
+'use strict';
+
+var _relations;
+
+var CHECKBOX_GROUP_PATH = '../checkbox-group/index';
+
+Component({
+  externalClasses: ['checkbox-class'],
+  relations: (_relations = {}, _relations[CHECKBOX_GROUP_PATH] = {
+    type: 'parent'
+  }, _relations),
+
+  properties: {
+    checked: Boolean,
+    disabled: Boolean,
+    isInGroup: Boolean,
+    labelDisabled: Boolean,
+    type: String
+  },
+
+  data: function data() {
+    return {
+      isInGroup: false,
+      isInCell: false
+    };
+  },
+
+
+  methods: {
+    handleClick: function handleClick() {
+      if (this.data.disabled) {
+        return;
+      }
+
+      var checked = !this.data.checked;
+
+      this.triggerEvent('change', checked);
+      this.setData({ checked: checked });
+    },
+    updateData: function updateData(data) {
+      this.setData(data);
+    }
+  }
+});
\ No newline at end of file
diff --git a/dist/checkbox/index.json b/dist/checkbox/index.json
new file mode 100644
index 00000000..fc0d0bf9
--- /dev/null
+++ b/dist/checkbox/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "zan-icon": "../icon/index"
+  }
+}
diff --git a/dist/checkbox/index.wxml b/dist/checkbox/index.wxml
new file mode 100644
index 00000000..874c18a6
--- /dev/null
+++ b/dist/checkbox/index.wxml
@@ -0,0 +1,25 @@
+<view
+  class="checkbox-class zan-checkbox {{ isInGroup ? 'zan-checkbox__item' : ''}} {{ type === 'list' ? 'zan-checkbox__list-item' : ''}}"
+  bindtap="{{ labelDisabled ? '' : 'handleClick' }}"
+  data-id="test"
+  >
+  <zan-icon
+    type="{{ checked ? 'checked' : 'check'}}"
+    class="zan-checkbox__icon {{ 'zan-checkbox--' + shape }} {{ disabled ? 'zan-checkbox--disabled' : '' }} {{ checked ? 'zan-checkbox--checked' : '' }}"
+    bindtap="{{ labelDisabled ? 'handleClick': '' }}"
+  ></zan-icon>
+  <text class="zan-checkbox__label">
+    <slot></slot>
+  </text>
+</view>
+
+<wxs module="parse">
+function getColor(color) {
+  color = color || '#ff4444'
+  return color;
+}
+
+module.exports = {
+  getColor: getColor
+};
+</wxs>
diff --git a/dist/checkbox/index.wxss b/dist/checkbox/index.wxss
new file mode 100644
index 00000000..7d4d0d79
--- /dev/null
+++ b/dist/checkbox/index.wxss
@@ -0,0 +1 @@
+.zan-checkbox{display:inline-block;padding:0 10px;font-size:14px}.zan-checkbox__item{display:block;margin-top:10px}.zan-checkbox__list-item{display:block;padding:10px 10px 10px 0;margin-left:10px;border-bottom:1px solid #e5e5e5}.zan-checkbox__list-item .zan-checkbox__icon{float:right}.zan-checkbox__icon{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;color:#aaa}.zan-checkbox__icon.zan-checkbox--checked{color:#06bf04}.zan-checkbox__icon.zan-checkbox--disabled{color:#e5e5e5}.zan-checkbox__label{display:inline-block;margin-left:10px}
\ No newline at end of file
diff --git a/dist/datetime-picker/index.js b/dist/datetime-picker/index.js
index 91341975..55180ba6 100644
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@@ -28,6 +28,7 @@ Component({
         if (/^[0-9]+$/.test(value)) {
           value = +value;
         }
+        !this._inited && this._init();
         this.updateDate(value);
       }
     },
@@ -40,39 +41,43 @@ Component({
     transPos: [0, 0, 0, 0, 0, 0]
   },
   attached: function attached() {
-    var _this = this;
-
-    this.use = {};
-
-    ['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach(function (item) {
-      if ((_this.data.notUse || []).indexOf(item) === -1) {
-        _this.use[item] = true;
-      }
-    });
-
-    this.picker = new DatePicker(this.data.date);
-
-    var _picker$getData = this.picker.getData(this.data.date),
-        dataList = _picker$getData.dataList,
-        selected = _picker$getData.selected;
-
-    // 鬼他么知道为什么 dataList, selected 不能一起 setData
-
-
-    this.setData({
-      use: this.use,
-      dataList: dataList
-    }, function () {
-      _this.setData({
-        selected: selected
-      });
-    });
-
-    this._indexs = selected;
+    !this._inited && this._init();
   },
 
 
   methods: {
+    _init: function _init() {
+      var _this = this;
+
+      this._inited = true;
+      this.use = {};
+
+      ['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach(function (item) {
+        if ((_this.data.notUse || []).indexOf(item) === -1) {
+          _this.use[item] = true;
+        }
+      });
+
+      this.picker = new DatePicker(this.data.date);
+
+      var _picker$getData = this.picker.getData(this.data.date),
+          dataList = _picker$getData.dataList,
+          selected = _picker$getData.selected;
+
+      // 鬼他么知道为什么 dataList, selected 不能一起 setData
+
+
+      this.setData({
+        use: this.use,
+        dataList: dataList
+      }, function () {
+        _this.setData({
+          selected: selected
+        });
+      });
+
+      this._indexs = selected;
+    },
     updatePicker: function updatePicker() {
       var updateData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
diff --git a/dist/index.js b/dist/index.js
index 7a2315da..59d2c3b8 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2,4 +2,4 @@
 
 exports.Dialog = require('./dialog/dialog');
 exports.Toast = require('./toast/toast');
-// exports.TopTips = require('./toptips/index');
\ No newline at end of file
+exports.TopTips = require('./toptips/toptips');
\ No newline at end of file
diff --git a/dist/switch/index.js b/dist/switch/index.js
index 76998c98..089c3286 100644
--- a/dist/switch/index.js
+++ b/dist/switch/index.js
@@ -1,6 +1,8 @@
 'use strict';
 
 Component({
+  externalClasses: ['custom-class', 'theme-class'],
+
   properties: {
     checked: {
       type: Boolean,
diff --git a/dist/switch/index.wxml b/dist/switch/index.wxml
index 9d8fa233..afd3468a 100644
--- a/dist/switch/index.wxml
+++ b/dist/switch/index.wxml
@@ -1,5 +1,5 @@
 <view
-  class="zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
+  class="custom-class theme-class zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
   checked="{{ checked }}"
   loading="{{ loading }}"
   disabled="{{ disabled }}"
diff --git a/dist/tab/index.js b/dist/tab/index.js
index 4142ce04..431f0a10 100644
--- a/dist/tab/index.js
+++ b/dist/tab/index.js
@@ -26,10 +26,31 @@ Component({
     }
   },
 
+  data: {
+    scrollLeft: 0
+  },
+
   methods: {
+    _handleScroll: function _handleScroll(selectedId) {
+      var _this = this;
+
+      var query = wx.createSelectorQuery().in(this);
+      query.select('#item-' + selectedId).boundingClientRect();
+      query.select('#scroll-view').boundingClientRect();
+      query.select('#scroll-view').scrollOffset();
+      query.exec(function (res) {
+        _this.setData({
+          scrollLeft: res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
+        });
+      });
+    },
     _handleZanTabChange: function _handleZanTabChange(e) {
       var selectedId = e.currentTarget.dataset.itemId;
 
+      if (this.data.scroll) {
+        this._handleScroll(selectedId);
+      }
+
       this.setData({
         selectedId: selectedId
       });
diff --git a/dist/tab/index.wxml b/dist/tab/index.wxml
index 1a52111e..340ef609 100644
--- a/dist/tab/index.wxml
+++ b/dist/tab/index.wxml
@@ -4,8 +4,11 @@
 >
   <block wx:if="{{ scroll }}">
     <scroll-view
+      id="scroll-view"
       class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
-      scroll-x="true"
+      scroll-x
+      scroll-with-animation
+      scroll-left="{{ scrollLeft }}"
       style="height: {{ height ? height + 'px' : 'auto' }}"
     >
       <template
@@ -34,6 +37,7 @@
     wx:for="{{ list }}"
     wx:key="id"
     class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
+    id="item-{{ item.id }}"
     data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >
diff --git a/dist/tag/index.js b/dist/tag/index.js
index 834c9e18..d175fa4b 100644
--- a/dist/tag/index.js
+++ b/dist/tag/index.js
@@ -1,6 +1,8 @@
-"use strict";
+'use strict';
 
 Component({
+  externalClasses: ['custom-class', 'theme-class'],
+
   properties: {
     type: {
       type: String
diff --git a/dist/tag/index.wxml b/dist/tag/index.wxml
index 194034d9..d012ada4 100644
--- a/dist/tag/index.wxml
+++ b/dist/tag/index.wxml
@@ -1,6 +1,6 @@
 
 <view 
-  class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
+  class="custom-class theme-class zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
 >
   <slot></slot>
 </view>
\ No newline at end of file