Merge branch 'master' into dev/badge_search

# Conflicts: # components.json # packages/zanui-css/src/index.css # src/index.js
2017-03-01 14:54:32 +08:00
parent 6808b06372 d4950678e6
commit 5b34ea74ec
152 changed files with 76771 additions and 19323 deletions
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "transform-runtime",
+    "transform-vue-jsx"
+  ]
+}
@@ -25,7 +25,7 @@ module.exports = {
    'no-new': 0
  },
  "globals": {
-    "oxygen": true,
+    "zanui": true,
    "location": true,
    "Swiper": true,
    "wysihtml5": true,
@@ -1,7 +1,7 @@
 ## 下载项目
 ```bash
-git@gitlab.qima-inc.com:fe/oxygen.git
-cd oxygen
+git@gitlab.qima-inc.com:fe/zanui-vue.git
+cd zanui-vue
 ```

 ## 安装组件依赖库
@@ -18,7 +18,7 @@ const install = function(Vue) {
 // auto install
 if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
-};
+}

 module.exports = {
  install,
@@ -44,14 +44,13 @@ ComponentNames.forEach(name => {
  }));

  if ([
-      // directives
-    'InfiniteScroll',
+    // directives
    'Lazyload',
+    'Waterfall',

-      // services
+    // services
    'Dialog',
-    'Toast',
-    'Indicator'
+    'Toast'
  ].indexOf(componentName) === -1) {
    installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
      name: componentName,
@@ -19,7 +19,7 @@ then
  echo "Releasing zanui-css $VERSION ..."
  cd packages/zanui-css
  npm version $VERSION --message "[release] $VERSION"
-  npm publish
+  npm publish --registry=http://registry.npm.qima-inc.com
  cd ../..

  # commit
@@ -30,9 +30,6 @@ then
  # publish
  git push origin master
  git push origin refs/tags/v$VERSION
-  git checkout dev
-  git rebase master
-  git push origin dev

-  npm publish
+  npm publish --registry=http://registry.npm.qima-inc.com
 fi
@@ -10,4 +10,10 @@ config.output = {
  libraryTarget: 'umd'
 };

+config.externals = {
+  vue: 'Vue'
+};
+
+delete config.devtool;
+
 module.exports = config;
@@ -3,13 +3,15 @@ var webpack = require('webpack');

 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');

-delete config.devtool;
-
 config.plugins = [
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+    debug: false
+  }),
  new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
-    drop_console: true,
+    comments: false,
    compress: {
+      drop_console: true,
      warnings: false
    }
  })
@@ -28,8 +28,8 @@ module.exports = {
    'zanui-examples': './docs/examples.js'
  },
  output: {
-    path: './docs/build',
-    publicPath: 'docs/build',
+    path: './docs/build/',
+    publicPath: 'docs/build/',
    filename: '[name].js'
  },
  resolve: {
@@ -53,7 +53,7 @@ module.exports = {
      },
      {
        test: /\.js$/,
-        exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
+        exclude: /node_modules|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel-loader'
      },
      {
@@ -88,8 +88,12 @@ if (process.env.NODE_ENV === 'production') {
    }),
    new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
    new webpack.optimize.UglifyJsPlugin({
-      compress: {warnings: false},
-      output: {comments: false},
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
      sourceMap: false
    }),
    new webpack.LoaderOptionsPlugin({
@@ -122,31 +126,6 @@ if (process.env.NODE_ENV === 'production') {
              slugify: slugify,
              permalink: true,
              permalinkBefore: true
-            }],
-            [require('markdown-it-container'), 'demo', {
-              validate: function(params) {
-                return params.trim().match(/^demo\s*(.*)$/);
-              },
-
-              render: function(tokens, idx) {
-                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-                if (tokens[idx].nesting === 1) {
-                  var description = (m && m.length > 1) ? m[1] : '';
-                  var content = tokens[idx + 1].content;
-                  var html = convert(striptags.strip(content, ['script', 'style']));
-                  var script = striptags.fetch(content, 'script');
-                  var style = striptags.fetch(content, 'style');
-                  var descriptionHTML = description
-                    ? md.render(description)
-                    : '';
-
-                  return `<demo-block class="demo-box">
-                            <div class="source" slot="source">${html}</div>
-                            ${descriptionHTML}
-                            <div class="highlight" slot="highlight">`;
-                }
-                return '</div></demo-block>\n';
-              }
            }]
          ],
          preprocess: function(MarkdownIt, source) {
@@ -10,8 +10,12 @@
  "dialog": "./packages/dialog/index.js",
  "picker": "./packages/picker/index.js",
  "radio-group": "./packages/radio-group/index.js",
+  "waterfall": "./packages/waterfall/index.js",
  "loading": "./packages/loading/index.js",
-  "badge": "./packages/badge/index.js",
-  "badge-group": "./packages/badge-group/index.js",
-  "search": "./packages/search/index.js"
+  "panel": "./packages/panel/index.js",
+  "card": "./packages/card/index.js",
+  "steps": "./packages/steps/index.js",
+  "tag": "./packages/tag/index.js",
+  "checkbox": "./packages/checkbox/index.js",
+  "checkbox-group": "./packages/checkbox-group/index.js"
 }
@@ -0,0 +1,79 @@
+<template>
+  <div class="examples-container">
+    <router-link class="page-back" v-if="visible" :to="'/'">
+      <i class="zan-icon zan-icon-arrow"></i>
+    </router-link>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    visible() {
+      return ['/'].indexOf(this.$route.path) < 0;
+    }
+  }
+};
+</script>
+
+<style>
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+
+  a {
+    color: #4078c0;
+    text-decoration: none;
+  }
+
+  .examples-container {
+    padding-bottom: 30px;
+  }
+
+  .page-back {
+    display: inline-block;
+    position: absolute;
+    top: 12px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    color: #333;
+    transform: rotate(180deg);
+
+    i {
+      font-size: 24px;
+      line-height: 40px;
+    }
+  }
+
+  .page-title {
+    font-size: 20px;
+    margin: 20px auto;
+    text-align: center;
+    display: block;
+    line-height: 1;
+  }
+
+  .page-sub-title {
+    font-size: 16px;
+    padding: 10px 0;
+  }
+</style>
@@ -1,9 +1,10 @@
 <template>
-  <div class="page-container">
+  <div class="page-container clearfix">
    <side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
    <div class="page-content">
      <router-view></router-view>
    </div>
+    <mobile></mobile>
  </div>
 </template>

@@ -24,9 +25,8 @@ export default {
  @import './assets/docs.css';

  .page-container {
-    width: 1140px;
-    padding: 0 30px;
-    margin: 0 auto;
+    height: 100%;
+    overflow: scroll;

    h2 {
      font-size: 28px;
@@ -34,10 +34,12 @@ export default {
      margin: 20px 0;
      line-height: 40px;
    }
+
    h3 {
      font-size: 22px;
      margin: 23px 0;
    }
+
    h2, h3, h4, h5 {
      font-weight: normal;
      color: #1f2f3d;
@@ -57,6 +59,7 @@ export default {
        }
      }
    }
+
    p {
      font-size: 14px;
      color: #5e6d82;
@@ -65,8 +68,32 @@ export default {
  }

  .page-content {
-    width: 75%;
+    width: 52%;
+    box-sizing: border-box;
    float: left;
+    padding: 0 15px;
+    overflow: auto;
+    height: inherit;
+  }
+
+  .mobile-wrapper {
+    float: left;
+    width: 30%;
+    height: 300px;
+    position: relative;
+  }
+
+  .mobile {
+    margin: 20px 20px 0;
+    height: 100%;
+    box-sizing: border-box;
+    width: 365px;
+  }
+
+  .demo-page {
+    width: 100%;
+    border: 5px solid #f5f5f5;
+    height: 580px;
  }

  .table {
@@ -77,16 +104,16 @@ export default {
    font-size: 14px;
    margin-bottom: 45px;

-    th:first-child {
-      padding-left: 10px;
-    }
-
    th {
      text-align: left;
      border-top: 1px solid #eaeefb;
      border-bottom: 1px solid #eaeefb;
      background-color: #eff2f7;
      padding: 10px;
+
+      &:first-child {
+        padding-left: 10px;
+      }
    }

    td {
@@ -18,11 +18,16 @@ time, mark, audio, video {
  vertical-align: baseline;
 }

+html {
+  height: 100%;
+}
+
 body {
  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-  overflow: auto;
+  overflow: hidden;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
+  height: 100%;
 }

 a {
@@ -53,4 +58,16 @@ ul {
  -webkit-font-smoothing: auto;
 }

+.clearfix {
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    content: "";
+    clear: both;
+  }
+}

@@ -1,241 +0,0 @@
-webpackJsonp([1],{
-
-/***/ 22:
-/***/ function(module, exports, __webpack_require__) {
-
-	var map = {
-		"./examples/sample.md": 23
-	};
-	function webpackContext(req) {
-		return __webpack_require__(webpackContextResolve(req));
-	};
-	function webpackContextResolve(req) {
-		return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
-	};
-	webpackContext.keys = function webpackContextKeys() {
-		return Object.keys(map);
-	};
-	webpackContext.resolve = webpackContextResolve;
-	module.exports = webpackContext;
-	webpackContext.id = 22;
-
-
-/***/ },
-
-/***/ 23:
-/***/ function(module, exports, __webpack_require__) {
-
-	module.exports = __webpack_require__(24);
-
-/***/ },
-
-/***/ 24:
-/***/ function(module, exports, __webpack_require__) {
-
-	var __vue_exports__, __vue_options__
-	var __vue_styles__ = {}
-	
-	/* script */
-	__vue_exports__ = __webpack_require__(25)
-	
-	/* template */
-	var __vue_template__ = __webpack_require__(26)
-	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
-	if (
-	  typeof __vue_exports__.default === "object" ||
-	  typeof __vue_exports__.default === "function"
-	) {
-	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
-	__vue_options__ = __vue_exports__ = __vue_exports__.default
-	}
-	if (typeof __vue_options__ === "function") {
-	  __vue_options__ = __vue_options__.options
-	}
-	__vue_options__.__file = "/Users/fenglai/project/oxygen/node_modules/vue-markdown-loader/.cache/sample-1.vue"
-	__vue_options__.render = __vue_template__.render
-	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
-	
-	/* hot reload */
-	if (false) {(function () {
-	  var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
-	  hotAPI.install(require("vue"), false)
-	  if (!hotAPI.compatible) return
-	  module.hot.accept()
-	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-94b78d06", __vue_options__)
-	  } else {
-	    hotAPI.reload("data-v-94b78d06", __vue_options__)
-	  }
-	})()}
-	if (__vue_options__.functional) {console.error("[vue-loader] sample-1.vue: functional components are not supported and should be defined in plain js files using render functions.")}
-	
-	module.exports = __vue_exports__
-
-
-/***/ },
-
-/***/ 25:
-/***/ function(module, exports) {
-
-	'use strict';
-	
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	//
-	
-	exports.default = {
-	  data: function data() {
-	    return {
-	      author: 'test'
-	    };
-	  }
-	};
-
-/***/ },
-
-/***/ 26:
-/***/ function(module, exports, __webpack_require__) {
-
-	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-	  return _c('section', [_vm._m(0), _vm._v(" "), _vm._m(1), _vm._v(" "), _c('p', [_vm._v("基础的按钮用法。")]), _vm._v(" "), _c('demo-block', {
-	    staticClass: "demo-box"
-	  }, [_c('div', {
-	    staticClass: "source",
-	    slot: "source"
-	  }, [_c('sample', {
-	    attrs: {
-	      "author": _vm.author
-	    }
-	  })], 1), _vm._v(" "), _c('p', [_vm._v("样例代码")]), _vm._v(" "), _c('div', {
-	    staticClass: "highlight",
-	    slot: "highlight"
-	  }, [_c('pre', [_c('code', {
-	    staticClass: "hljs language-html"
-	  }, [_c('span', {
-	    staticClass: "hljs-tag"
-	  }, [_vm._v("<"), _c('span', {
-	    staticClass: "hljs-name"
-	  }, [_vm._v("sample")]), _vm._v(" "), _c('span', {
-	    staticClass: "hljs-attr"
-	  }, [_vm._v(":author")]), _vm._v("="), _c('span', {
-	    staticClass: "hljs-string"
-	  }, [_vm._v("\"author\"")]), _vm._v(">")]), _c('span', {
-	    staticClass: "hljs-tag"
-	  }, [_vm._v("</"), _c('span', {
-	    staticClass: "hljs-name"
-	  }, [_vm._v("sample")]), _vm._v(">")]), _vm._v("\n")])])])]), _vm._v(" "), _vm._m(2), _vm._v(" "), _vm._m(3)], 1)
-	},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-	  return _c('h2', {
-	    attrs: {
-	      "id": "sample-zu-jian"
-	    }
-	  }, [_c('a', {
-	    staticClass: "header-anchor",
-	    attrs: {
-	      "href": "#sample-zu-jian",
-	      "aria-hidden": "true"
-	    }
-	  }, [_vm._v("¶")]), _vm._v(" sample组件")])
-	},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-	  return _c('h3', {
-	    attrs: {
-	      "id": "ji-chu-yong-fa"
-	    }
-	  }, [_c('a', {
-	    staticClass: "header-anchor",
-	    attrs: {
-	      "href": "#ji-chu-yong-fa",
-	      "aria-hidden": "true"
-	    }
-	  }, [_vm._v("¶")]), _vm._v(" 基础用法")])
-	},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-	  return _c('h3', {
-	    attrs: {
-	      "id": "attributes"
-	    }
-	  }, [_c('a', {
-	    staticClass: "header-anchor",
-	    attrs: {
-	      "href": "#attributes",
-	      "aria-hidden": "true"
-	    }
-	  }, [_vm._v("¶")]), _vm._v(" Attributes")])
-	},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-	  return _c('table', {
-	    staticClass: "table"
-	  }, [_c('thead', [_c('tr', [_c('th', [_vm._v("参数")]), _vm._v(" "), _c('th', [_vm._v("说明")]), _vm._v(" "), _c('th', [_vm._v("类型")]), _vm._v(" "), _c('th', [_vm._v("可选值")]), _vm._v(" "), _c('th', [_vm._v("默认值")])])]), _vm._v(" "), _c('tbody', [_c('tr', [_c('td', [_vm._v("size")]), _vm._v(" "), _c('td', [_vm._v("尺寸")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("large")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("type")]), _vm._v(" "), _c('td', [_vm._v("类型")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("primary,warning,text")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("disabled")]), _vm._v(" "), _c('td', [_vm._v("禁用")]), _vm._v(" "), _c('td', [_vm._v("boolean")]), _vm._v(" "), _c('td', [_vm._v("true, false")]), _vm._v(" "), _c('td', [_vm._v("false")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("icon")]), _vm._v(" "), _c('td', [_vm._v("图标，已有的图标库中的图标名")]), _vm._v(" "), _c('td', [_vm._v("string")]), _vm._v(" "), _c('td', [_vm._v("—")]), _vm._v(" "), _c('td', [_vm._v("—")])]), _vm._v(" "), _c('tr', [_c('td', [_vm._v("to")]), _vm._v(" "), _c('td', [_vm._v("路由跳转路径")]), _vm._v(" "), _c('td', [_vm._v("Object")]), _vm._v(" "), _c('td', [_vm._v("—")]), _vm._v(" "), _c('td', [_vm._v("—")])])])])
-	}]}
-	module.exports.render._withStripped = true
-	if (false) {
-	  module.hot.accept()
-	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-94b78d06", module.exports)
-	  }
-	}
-
-/***/ }
-
-});
-//# sourceMappingURL=1.1.js.map
@@ -0,0 +1,199 @@
+webpackJsonp([1],{
+
+/***/ 169:
+/***/ (function(module, exports, __webpack_require__) {
+
+
+/* styles */
+__webpack_require__(263)
+
+var Component = __webpack_require__(0)(
+  /* script */
+  __webpack_require__(179),
+  /* template */
+  __webpack_require__(237),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+
+module.exports = Component.exports
+
+
+/***/ }),
+
+/***/ 179:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _navConfig = __webpack_require__(7);
+
+var _navConfig2 = _interopRequireDefault(_navConfig);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  data: function data() {
+    return {
+      highlights: [],
+      navState: [],
+      data: _navConfig2.default['zh-CN'],
+      base: '/component'
+    };
+  }
+}; //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/***/ }),
+
+/***/ 197:
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(4)();
+// imports
+
+
+// module
+exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
+
+// exports
+
+
+/***/ }),
+
+/***/ 237:
+/***/ (function(module, exports) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    staticClass: "side-nav"
+  }, [_c('ul', _vm._l((_vm.data), function(item) {
+    return _c('li', {
+      staticClass: "nav-item"
+    }, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
+      attrs: {
+        "active-class": "active",
+        "to": _vm.base + item.path,
+        "exact": ""
+      },
+      domProps: {
+        "textContent": _vm._s(item.title || item.name)
+      }
+    }), _vm._v(" "), (item.children) ? _c('ul', {
+      staticClass: "pure-menu-list sub-nav"
+    }, _vm._l((item.children), function(navItem) {
+      return _c('li', {
+        staticClass: "nav-item"
+      }, [_c('router-link', {
+        attrs: {
+          "active-class": "active",
+          "to": _vm.base + navItem.path
+        },
+        domProps: {
+          "textContent": _vm._s(navItem.title || navItem.name)
+        }
+      })], 1)
+    })) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
+      return _c('div', {
+        staticClass: "nav-group"
+      }, [_c('div', {
+        staticClass: "nav-group__title"
+      }, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
+        staticClass: "pure-menu-list"
+      }, [_vm._l((group.list), function(navItem) {
+        return [(!navItem.disabled) ? _c('li', {
+          staticClass: "nav-item"
+        }, [_c('router-link', {
+          attrs: {
+            "active-class": "active",
+            "to": _vm.base + navItem.path
+          },
+          domProps: {
+            "textContent": _vm._s(navItem.title)
+          }
+        })], 1) : _vm._e()]
+      })], 2)])
+    }) : _vm._e()], 2)
+  }))])
+},staticRenderFns: []}
+
+/***/ }),
+
+/***/ 263:
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(197);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(14)("1517d9c0", content, true);
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
+     var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ })
+
+});
+//# sourceMappingURL=1.ce826a4b.js.map
@@ -0,0 +1,199 @@
+webpackJsonp([1],{
+
+/***/ 169:
+/***/ (function(module, exports, __webpack_require__) {
+
+
+/* styles */
+__webpack_require__(263)
+
+var Component = __webpack_require__(0)(
+  /* script */
+  __webpack_require__(179),
+  /* template */
+  __webpack_require__(237),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+
+module.exports = Component.exports
+
+
+/***/ }),
+
+/***/ 179:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _navConfig = __webpack_require__(7);
+
+var _navConfig2 = _interopRequireDefault(_navConfig);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  data: function data() {
+    return {
+      highlights: [],
+      navState: [],
+      data: _navConfig2.default['zh-CN'],
+      base: '/component'
+    };
+  }
+}; //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/***/ }),
+
+/***/ 197:
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(4)();
+// imports
+
+
+// module
+exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
+
+// exports
+
+
+/***/ }),
+
+/***/ 237:
+/***/ (function(module, exports) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    staticClass: "side-nav"
+  }, [_c('ul', _vm._l((_vm.data), function(item) {
+    return _c('li', {
+      staticClass: "nav-item"
+    }, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
+      attrs: {
+        "active-class": "active",
+        "to": _vm.base + item.path,
+        "exact": ""
+      },
+      domProps: {
+        "textContent": _vm._s(item.title || item.name)
+      }
+    }), _vm._v(" "), (item.children) ? _c('ul', {
+      staticClass: "pure-menu-list sub-nav"
+    }, _vm._l((item.children), function(navItem) {
+      return _c('li', {
+        staticClass: "nav-item"
+      }, [_c('router-link', {
+        attrs: {
+          "active-class": "active",
+          "to": _vm.base + navItem.path
+        },
+        domProps: {
+          "textContent": _vm._s(navItem.title || navItem.name)
+        }
+      })], 1)
+    })) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
+      return _c('div', {
+        staticClass: "nav-group"
+      }, [_c('div', {
+        staticClass: "nav-group__title"
+      }, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
+        staticClass: "pure-menu-list"
+      }, [_vm._l((group.list), function(navItem) {
+        return [(!navItem.disabled) ? _c('li', {
+          staticClass: "nav-item"
+        }, [_c('router-link', {
+          attrs: {
+            "active-class": "active",
+            "to": _vm.base + navItem.path
+          },
+          domProps: {
+            "textContent": _vm._s(navItem.title)
+          }
+        })], 1) : _vm._e()]
+      })], 2)])
+    }) : _vm._e()], 2)
+  }))])
+},staticRenderFns: []}
+
+/***/ }),
+
+/***/ 263:
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(197);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(14)("1517d9c0", content, true);
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
+     var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ })
+
+});
+//# sourceMappingURL=1.js.map
@@ -1,196 +0,0 @@
-<template>
-  <div
-    class="demo-block"
-    :class="[blockClass, { 'hover': hovering }]"
-    @mouseenter="hovering = true"
-    @mouseleave="hovering = false">
-    <slot name="source"></slot>
-    <div class="meta">
-      <div class="description">
-        <slot></slot>
-      </div>
-      <slot name="highlight">
-      </slot>
-    </div>
-    <div class="demo-block-control" @click="isExpanded = !isExpanded">
-      <span v-show="hovering">{{ controlText }}</span>
-    </div>
-  </div>
-</template>
-
-<script type="text/babel">
-  export default {
-    data() {
-      return {
-        hovering: false,
-        isExpanded: false
-      };
-    },
-
-    computed: {
-
-      blockClass() {
-        return `demo-${this.$route.path.split('/').pop()}`;
-      },
-
-      controlText() {
-        return this.isExpanded ? '隐藏代码' : '显示代码';
-      },
-
-      codeArea() {
-        return this.$el.getElementsByClassName('meta')[0];
-      },
-
-      codeAreaHeight() {
-        if (this.$el.getElementsByClassName('description').length > 0) {
-          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
-        }
-        return this.$el.getElementsByClassName('highlight')[0].clientHeight;
-      }
-    },
-
-    watch: {
-      isExpanded(val) {
-        this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
-      }
-    },
-
-    mounted() {
-      this.$nextTick(() => {
-        let highlight = this.$el.getElementsByClassName('highlight')[0];
-        if (this.$el.getElementsByClassName('description').length === 0) {
-          highlight.style.width = '100%';
-          highlight.borderRight = 'none';
-        }
-      });
-    }
-  };
-</script>
-
-<style lang="css">
-  .demo-block {
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-    transition: .2s;
-
-    &.hover {
-      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
-    }
-
-    code {
-      font-family: Menlo, Monaco, Consolas, Courier, monospace;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    .demo-button {
-      float: right;
-    }
-
-    .source {
-      padding: 24px;
-    }
-
-    .meta {
-      background-color: #f9fafc;
-      border-top: solid 1px #eaeefb;
-      clear: both;
-      overflow: hidden;
-      height: 0;
-      transition: height .2s;
-    }
-
-    .description {
-      padding: 18px 24px;
-      width: 40%;
-      box-sizing: border-box;
-      border-left: solid 1px #eaeefb;
-      float: right;
-      font-size: 14px;
-      line-height: 1.8;
-      color: #5e6d82;
-      word-break: break-word;
-
-      p {
-        margin: 0 0 12px;
-      }
-
-      code {
-        color: #5e6d82;
-        background-color: #e6effb;
-        margin: 0 4px;
-        transform: translateY(-2px);
-        display: inline-block;
-        padding: 1px 5px;
-        font-size: 12px;
-        border-radius: 3px;
-      }
-    }
-
-    .highlight {
-      width: 60%;
-      border-right: solid 1px #eaeefb;
-
-      pre {
-        margin: 0;
-      }
-
-      code.hljs {
-        margin: 0;
-        border: none;
-        max-height: none;
-        border-radius: 0;
-
-        &::before {
-          content: none;
-        }
-      }
-    }
-
-    .demo-block-control {
-      border-top: solid 1px #eaeefb;
-      height: 36px;
-      box-sizing: border-box;
-      background-color: #fff;
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      text-align: center;
-      margin-top: -1px;
-      color: #d3dce6;
-      cursor: pointer;
-      transition: .2s;
-      position: relative;
-
-      i {
-        font-size: 12px;
-        line-height: 36px;
-        transition: .3s;
-        &.hovering {
-          transform: translateX(-40px);
-        }
-      }
-
-      span {
-        position: absolute;
-        transform: translateX(-30px);
-        font-size: 14px;
-        line-height: 36px;
-        transition: .3s;
-        display: inline-block;
-      }
-
-      &:hover {
-        color: #20a0ff;
-        background-color: #f9fafc;
-      }
-
-      & .text-slide-enter,
-      & .text-slide-leave-active {
-        opacity: 0;
-        transform: translateX(10px);
-      }
-    }
-  }
-</style>
@@ -0,0 +1,116 @@
+<template>
+  <div class="side-nav">
+    <ul>
+      <li class="nav-item" v-for="item in data">
+        <a v-if="!item.path">{{item.name}}</a>
+        <router-link
+          v-else
+          active-class="active"
+          :to="base + item.path"
+          exact
+          v-text="item.title || item.name">
+        </router-link>
+        <ul class="pure-menu-list sub-nav" v-if="item.children">
+          <li class="nav-item" v-for="navItem in item.children">
+            <router-link
+              active-class="active"
+              :to="base + navItem.path"
+              v-text="navItem.title || navItem.name">
+            </router-link>
+          </li>
+        </ul>
+        <template v-if="item.groups">
+          <div class="nav-group" v-for="group in item.groups">
+            <div class="nav-group__title">{{group.groupName}}</div>
+            <ul class="pure-menu-list">
+              <template v-for="navItem in group.list">
+                <li
+                  class="nav-item"
+                  v-if="!navItem.disabled">
+                  <router-link
+                    active-class="active"
+                    :to="base + navItem.path"
+                    v-text="navItem.title">
+                  </router-link>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import navConfig from '../nav.config.json';
+
+export default {
+  data() {
+    return {
+      highlights: [],
+      navState: [],
+      data: navConfig['zh-CN'],
+      base: '/component'
+    };
+  }
+};
+</script>
+
+<style>
+  .side-nav {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40px 20px;
+    background: #f9fafb;
+
+    li {
+      list-style: none;
+    }
+    ul {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+
+    .nav-item {
+      a {
+        font-size: 16px;
+        color: #5e6d82;
+        line-height: 40px;
+        height: 40px;
+        margin: 0;
+        padding: 0;
+        text-decoration: none;
+        display: block;
+        position: relative;
+        transition: all .3s;
+
+        &.active {
+          color: #20a0ff;
+        }
+      }
+      .nav-item {
+        a {
+          display: block;
+          height: 40px;
+          line-height: 40px;
+          font-size: 13px;
+          padding-left: 24px;
+
+
+          &:hover {
+            color: #20a0ff;
+          }
+        }
+      }
+    }
+    .nav-group__title {
+      font-size: 12px;
+      color: #99a9bf;
+      padding-left: 8px;
+      line-height: 26px;
+      margin-top: 10px;
+    }
+  }
+</style>
@@ -0,0 +1,7 @@
+<template>
+  <div class="mobile-wrapper">
+    <div class="mobile">
+      <iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
+    </div>
+  </div>
+</template>
@@ -62,10 +62,13 @@

 <style lang="css">
  .side-nav {
-    width: 25%;
+    width: 18%;
    box-sizing: border-box;
-    padding-right: 30px;
+    padding: 40px 20px;
    float: left;
+    background: #f9fafb;
+    height: inherit;
+    overflow: auto;

    li {
      list-style: none;
@@ -1,92 +1,80 @@
-<style lang="css">
-  @component-namespace z {
-    @component button-group {
-      .z-button-1 {
-        margin-bottom: 15px;
-      }
-    }
-  }
-</style>
-
 ## Button组件

 ### 按钮功能

-:::demo 只接受primary, default, danger三种类型，默认default
+只接受primary, default, danger三种类型，默认default。
+
 ```html
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button>default</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button>default</zan-button>
  </div>
-  <div class="z-button-1">
-    <z-button type="primary">primary</z-button>
+  <div class="zan-button-1">
+    <zan-button type="primary">primary</zan-button>
  </div>
-  <div class="z-button-1">
-    <z-button type="danger">danger</z-button>
+  <div class="zan-button-1">
+    <zan-button type="danger">danger</zan-button>
  </div>
 </div>
 ```
-:::

 ### 禁用状态

-:::demo 
 ```html
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button disabled>diabled</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button disabled>diabled</zan-button>
  </div>
 </div>
 ```
-:::

 ### 按钮尺寸

-:::demo 只接受large, normal, small, mini四种尺寸，默认normal
+只接受large, normal, small, mini四种尺寸，默认normal。
+
 ```html 
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button size="large">large</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button size="large">large</zan-button>
  </div>
 </div>
-<div class="z-button-group" :style="{ width: '50%' }">
-  <div class="z-button-3">
-    <z-button type="primary">normal</z-button>
+<div class="zan-button-group" :style="{ width: '50%' }">
+  <div class="zan-button-3">
+    <zan-button type="primary">normal</zan-button>
  </div>
-  <div class="z-button-3">
-    <z-button size="small">small</z-button>
+  <div class="zan-button-3">
+    <zan-button size="small">small</zan-button>
  </div>
-  <div class="z-button-3">
-    <z-button size="mini">mini</z-button>
+  <div class="zan-button-3">
+    <zan-button size="mini">mini</zan-button>
  </div>
 </div>

 ```
-:::

 ### 自定义按钮标签

-:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
+按钮默认是button标签，可以使用tag属性修改为一个a标签。
+
 ```html 
-<div class="z-button-group">
-  <div class="z-button-1">
-    <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
  </div>
 </div>
 ```
-:::

 ### button group
-:::demo 一组按钮
+
+一组按钮。
+
 ```html 
-<div class="z-button-group">
-  <z-button type="primary" size="small">确认付款</z-button>
-  <z-button size="small">确认收货</z-button>
-  <z-button size="small">取消订单</z-button>
+<div class="zan-button-group">
+  <zan-button type="primary" size="small">确认付款</zan-button>
+  <zan-button size="small">确认收货</zan-button>
+  <zan-button size="small">取消订单</zan-button>
 </div>
 ```
-:::
-

 ### API

@@ -0,0 +1,56 @@
+## Card 图文组件
+
+### 基础用法
+
+当没有底部按钮时，右侧内容会居中显示。
+
+```html
+<zan-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="描述"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</zan-card>
+
+```
+
+### 高级用法
+
+可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+
+```html
+<zan-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="商品SKU1，商品SKU2"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="zan-card__row" slot="title">
+    <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="zan-card__price">¥ 2.00</span>
+  </div>
+  <div class="zan-card__row" slot="desc">
+    <h4 class="zan-card__desc">商品sku</h4>
+    <span class="zan-card__num">x 2</span>
+  </div>
+  <div class="zan-card__footer" slot="footer">
+    <zan-button size="mini">按钮一</zan-button>
+    <zan-button size="mini">按钮二</zan-button>
+  </div>
+</zan-card>
+```
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | 左侧图片 | string  | ''          | ''          |
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义tags |
+| footer | 自定义footer |
@@ -20,65 +20,61 @@ export default {

 ### 基础用法

-:::demo 样例代码
 ```html
-<z-cell-group>
-  <z-cell title="单元格1" value="单元格1内容"></z-cell>
-  <z-cell title="单元格2" value="单元格2内容"></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+  <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+</zan-cell-group>
 ```
-:::

 ### 标题带描述信息

-:::demo 传入`label`属性，属性值为描述信息的值。
+传入`label`属性，属性值为描述信息的值。
+
 ```html
-<z-cell-group>
-  <z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
-  <z-cell title="单元格2" label="描述信息"></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
+  <zan-cell title="单元格2" label="描述信息"></zan-cell>
+</zan-cell-group>
 ```
-:::

 ### 带图标

-:::demo 传入`icon`属性
+传入`icon`属性。
+
 ```html
-<z-cell-group>
-  <z-cell title="起码运动馆" icon="home"></z-cell>
-  <z-cell title="线下门店" icon="location"></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="起码运动馆" icon="home"></zan-cell>
+  <zan-cell title="线下门店" icon="location"></zan-cell>
+</zan-cell-group>
 ```
-:::

 ### 可点击的链接

-:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
+传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
+
 ```html
-<z-cell-group>
-  <z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
-  <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
-</z-cell-group>
+<zan-cell-group>
+  <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+</zan-cell-group>
 ```
-:::

 ### 高级用法

-如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
+如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。

-:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
 ```html
-<z-cell-group>
-  <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+<zan-cell-group>
+  <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
    <template slot="title">
-      <span class="z-cell-text">起码运动馆</span>
+      <span class="zan-cell-text">起码运动馆</span>
      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
    </template>
-  </z-cell>
-  <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
-</z-cell-group>
+  </zan-cell>
+  <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+</zan-cell-group>
 ```
-:::

 ### API

@@ -1 +1,131 @@
-## Checkbox组件
+## Checkbox组件
+
+### 基础用法
+
+```html
+<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true
+    };
+  }
+}; 
+</script>
+```
+
+### 禁用状态
+
+```html
+<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox2: true
+    };
+  }
+}; 
+</script>
+```
+
+### Checkbox组
+
+```html
+<zan-checkbox-group v-model="result">
+  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+```
+
+### 禁用Checkbox组
+
+```html
+<zan-checkbox-group v-model="result" disabled>
+  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+```
+
+### 与Cell组件一起使用
+
+```html
+<zan-checkbox-group v-model="result">
+  <zan-cell-group>
+    <zan-cell v-for="item in list">
+      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+    </zan-cell>
+  </zan-cell-group>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+```
+
+### Checkbox API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+
+### CheckboxGroup API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+
+### CheckboxGroup Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前组件的值 |
@@ -30,13 +30,39 @@ export default {

 ### 基础用法

-:::demo
 ```html
-<z-button @click="handleAlertClick">alert</z-button>
+<zan-button @click="handleAlertClick">alert</zan-button>

-<z-button @click="handleConfirmClick">confirm</z-button>
+<zan-button @click="handleConfirmClick">confirm</zan-button>
+
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
 ```
-:::

 ### API

@@ -1,54 +1,38 @@
-<script>
-export default {
-  data() {
-    return {
-      name: ''
-    };
-  },
-
-  methods: {
-    handleChange() {
-      console.log(this.name);
-    }
-  }
-};
-</script>
-
 ## Field组件

 表单中`input`或`textarea`的输入框。

 ### 基础用法

-:::demo 根据`type`属性显示不同的输入框。
+根据`type`属性显示不同的输入框。
+
 ```html
-<z-cell-group>
-  <z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
-  <z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
-  <z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
-</z-cell-group>
+<zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+  <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+</zan-cell-group>
 ```
-:::

 ### 无label的输入框

-:::demo 不传入`label`属性即可。
+不传入`label`属性即可。
+
 ```html
-<z-cell-group>
-  <z-field type="text" placeholder="请输入用户名"></z-field>
-</z-cell-group>
+<zan-cell-group>
+  <zan-field type="text" placeholder="请输入用户名"></zan-field>
+</zan-cell-group>
 ```
-:::

 ### 监听change事件

-:::demo 监听组件的`change`事件。
+监听组件的`change`事件。
+
 ```html
-<z-cell-group>
-  <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
-</z-cell-group>
+<zan-cell-group>
+  <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+</zan-cell-group>
 ```
-:::

 ### API

@@ -0,0 +1,80 @@
+## Panel 面板
+
+面板只是一个容器，里面可以放入自定义的内容。
+
+### 基础用法
+
+```html
+<zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
+    </div>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
+    </div>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
+    </div>
+  </zan-card>
+  <div class="zan-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+</zan-panel>
+```
+
+### 高级用法
+
+使用具名`slot`自定义内容。
+
+```html
+<zan-panel title="标题" desc="标题描述" status="状态">
+  <zan-card
+    title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+    desc="商品SKU1，商品SKU2"
+    thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    <div class="zan-card__row" slot="title">
+      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="zan-card__price">¥ 2.00</span>
+    </div>
+    <div class="zan-card__row" slot="desc">
+      <h4 class="zan-card__desc">商品sku</h4>
+      <span class="zan-card__num">x 2</span>
+    </div>
+    <div class="zan-card__footer" slot="footer">
+      <zan-button size="mini">按钮一</zan-button>
+      <zan-button size="mini">按钮二</zan-button>
+    </div>
+  </zan-card>
+  <div class="zan-panel-sum">
+    合计：<span>¥ 1999.90</span>
+  </div>
+  <div class="zan-panel-buttons" slot="footer">
+    <zan-button size="small">按钮一</zan-button>
+    <zan-button size="small" type="danger">按钮二</zan-button>
+  </div>
+</zan-panel>
+```
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+| status | 状态 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义内容 |
+| header | 自定义header |
+| footer | 自定义footer |
@@ -1,45 +1,12 @@
-<script>
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
-};
-
-export default {
-  data() {
-    return {
-      pickerColumns: [
-        {
-          values: Object.keys(citys),
-          className: 'column1'
-        },
-        {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-          className: 'column2'
-        }
-      ]
-    };
-  },
-
-  methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
-    }
-  }
-};
-</script>
-
 ## Picker组件

 模仿iOS中的`UIPickerView`。

 ### 基础用法

-:::demo 基础用法
 ```html
-<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
+<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
 ```
-:::

 ### API

@@ -1,3 +1,36 @@
+## Popup组件
+
+### 基础用法
+
+```html
+<div class="zan-button-1">
+  <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
+  xxxx
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
+  更新成功
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+  <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+</zan-popup>
+
+<div class="zan-button-1">
+  <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
+</div>
+<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
+  一些内容
+</zan-popup>
+
 <script>
 export default {
  data() {
@@ -20,62 +53,7 @@ export default {
  }
 };
 </script>
-
-<style>
-.z-popup-1 {
-  width: 100%;
-  height: 200px;
-}
-
-.z-popup-2 {
-  width: 100%;
-  line-height: 44px;
-  background-color: rgba(0, 0, 0, 0.701961);
-  text-align: center;
-  color: #fff;
-}
-
-.z-popup-3 {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-}
-
-.z-popup-4 {
-  width: 50%;
-  height: 200px;
-  background: #fff;
-  border-radius: 10px;
-}
-</style>
-
-## Popup组件
-
-### 基础用法
-
-:::demo
-```html
-<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
-<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
-  xxxx
-</z-popup>
-
-<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
-<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
-  更新成功
-</z-popup>
-
-<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
-<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
-  <z-button @click.native="popupShow3 = false">关闭 popup</z-button>
-</z-popup>
-
-<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
-<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
-  一些内容
-</z-popup>
 ```
-:::

 ### API

@@ -12,14 +12,93 @@ export default {

 ### 基础用法

-:::demo
 ```html
-<z-radio v-model="radio"></z-radio>
-```
-:::
+<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+<zan-radio name="2" v-model="radio1">单选框2</zan-radio>

-### API
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  }
+};
+</script>
+```
+
+### 禁用状态
+
+```html
+<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+
+<script>
+export default {
+  data() {
+    return {
+      radio2: '2'
+    }
+  }
+};
+</script>
+```
+
+### radio组
+
+```html
+<zan-radio-group v-model="radio3">
+  <zan-radio name="1">单选框1</zan-radio>
+  <zan-radio name="2">单选框2</zan-radio>
+</zan-radio-group>
+
+<script>
+export default {
+  data() {
+    return {
+      radio3: '1'
+    }
+  }
+};
+</script>
+```
+
+### 与Cell组件一起使用
+
+```html
+<zan-radio-group v-model="radio4">
+  <zan-cell-group>
+    <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+    <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+  </zan-cell-group>
+</zan-radio-group>
+
+<script>
+export default {
+  data() {
+    return {
+      radio4: '1'
+    }
+  }
+};
+</script>
+```
+
+### Radio API

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | 是否禁用单选框 | Boolean  | false |   |
+| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+
+### RadioGroup API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+
+### RadioGroup Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前组件的值 |
@@ -0,0 +1,4 @@
+## Steps 步骤条
+
+
+
@@ -1,46 +1,7 @@
-<script>
-export default {
-  data() {
-    return {
-      switchState: true
-    };
-  },
-  computed: {
-    switchStateText() {
-      return this.switchState ? 'ON' : 'OFF';
-    }
-  },
-  methods: {
-    updateState(newState) {
-      this.switchState = newState;
-    }
-  }
-};
-</script>
-<style lang="css">
-  @component-namespace page {
-    @component switch {
-      padding: 0 15px 15px;
-
-      @descendent wrapper {
-        margin: 30px;
-        width: 100px;
-        float: left;
-        text-align: center;
-      }
-
-      @descendent text {
-        margin: 20px 0;
-      }
-    }
-  }
-</style>
-
 ## Switch组件

 ### 基础用法

-:::demo 样例代码
 ```html
 <div class="page-switch">
  <div class="page-switch__wrapper">
@@ -56,10 +17,8 @@ export default {
    <div class="page-switch__text">OFF, DISABLED</div>
  </div>
 </div>
-```

-
-```javascript
+<script>
 export default {
  data() {
    return {
@@ -76,9 +35,9 @@ export default {
      this.switchState = newState;
    }
  }
-};
+};  
+</script>
 ```
-:::

 ### API

@@ -0,0 +1,28 @@
+## Tag 组件
+
+### 基础用法
+```html
+<zan-tag>返现</zan-tag>
+<zan-tag :plain="true">返现</zan-tag>
+```
+
+### 高级用法
+```html
+<zan-tag type="danger">返现</zan-tag>
+<zan-tag type="success">返现</zan-tag>
+<zan-tag type="success" :plain="true">返现</zan-tag>
+```
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| plain | 是否是空心tag | boolean  | false          | ''          |
+| mark | 是否是标记 | boolean  | false          | ''          |
+| type | tag类型 | string  | ''          | 'primary', 'success', 'danger' |
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义tag显示内容 |
@@ -0,0 +1,72 @@
+## Waterfall 瀑布流
+
+### 基础用法
+
+```html
+<div class="waterfall">
+  <div
+    v-waterfall-lower="loadMore"
+    v-waterfall-upper="loadMoreUpper"
+    waterfall-disabled="isWaterfallDisabled"
+    waterfall-offset="400"
+  >
+    <div
+      class="waterfall-item"
+      v-for="item in list"
+      style="text-align: center;"
+    >
+      {{ item }}
+    </div>
+    <div v-if="loading" style="text-align: center;">
+      loading
+    </div>
+  </div>
+</div>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5],
+      loading: false,
+      finished: false
+    };
+  },
+  methods: {
+    loadMore() {
+      if (this.list.length >= 200) {
+        this.finished = true;
+        return;
+      }
+
+      this.loading = true;
+      setTimeout(() => {
+        let lastNumber = this.list[this.list.length - 1];
+        for (let i = 0; i < 5; i ++) {
+          lastNumber += 1;
+          this.list.push(lastNumber);
+        }
+        this.loading = false;
+      }, 2500);
+    },
+    loadMoreUpper() {
+      if (this.list[0] < 0) return;
+      this.list.unshift(-1);
+    }
+  },
+  computed: {
+    isWaterfallDisabled: function() {
+      return this.loading || this.finished;
+    }
+  }
+};
+</script>
+```
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| waterfall-disabled | 是否禁止瀑布流触发 | Boolean  | false |  |
+| waterfall-offset | 触发瀑布流加载的阈值 | Number  | 300 |   |
+
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import App from './ExamplesApp';
+import navConfig from './nav.config.json';
+import routes from './router.config';
+import ZanUI from '../src/index';
+
+import 'packages/zanui-css/src/index.css';
+
+Vue.use(ZanUI);
+Vue.use(VueRouter);
+
+let routesConfig = routes(navConfig, true);
+routesConfig.push({
+  path: '/',
+  component: function(resolve) {
+    require(['./components/demo-list.vue'], resolve);
+  }
+});
+const router = new VueRouter({
+  mode: 'hash',
+  base: __dirname,
+  routes: routesConfig
+});
+
+let indexScrollTop = 0;
+router.beforeEach((route, redirect, next) => {
+  if (route.path !== '/') {
+    indexScrollTop = document.body.scrollTop;
+  }
+  document.title = route.meta.title || document.title;
+  next();
+});
+
+router.afterEach(route => {
+  if (route.path !== '/') {
+    document.body.scrollTop = 0;
+  } else {
+    Vue.nextTick(() => {
+      document.body.scrollTop = indexScrollTop;
+    });
+  }
+});
+
+new Vue({ // eslint-disable-line
+  render: h => h(App),
+  router
+}).$mount('#app-container');
@@ -1,10 +1,72 @@
 <template>
-  <div class="button-demos">
+  <div class="page-button">
+    <h1 class="page-title">Button</h1>
+    <h2 class="page-sub-title">按钮功能</h2>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button>default</zan-button>
+      </div>
+      <div class="zan-button-1">
+        <zan-button type="primary">primary</zan-button>
+      </div>
+      <div class="zan-button-1">
+        <zan-button type="danger">danger</zan-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">禁用状态</h2>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button disabled>diabled</zan-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">按钮尺寸</h2>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button size="large">large</zan-button>
+      </div>
+    </div>
+    <div class="zan-button-group">
+      <div class="zan-button-3">
+        <zan-button type="primary">normal</zan-button>
+      </div>
+      <div class="zan-button-3">
+        <zan-button size="small">small</zan-button>
+      </div>
+      <div class="zan-button-3">
+        <zan-button size="mini">mini</zan-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">自定义按钮标签</h2>
+    <div class="zan-button-group">
+      <div class="zan-button-1">
+        <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
+      </div>
+    </div>
+
+    <h2 class="page-sub-title">button group</h2>
+    <div class="zan-button-group">
+      <zan-button type="primary" size="small">确认付款</zan-button>
+      <zan-button size="small">确认收货</zan-button>
+      <zan-button size="small">取消订单</zan-button>
+    </div>
  </div>
 </template>

-<script>
-export default {
+<style>
+  @component-namespace page {
+    @b button {
+      padding: 0 20px;
+    }
+  }
+  @component-namespace zan {
+    @b button-group {
+      .zan-button-1 {
+        margin-bottom: 10px;
+      }
+    }
+  }

-};
-</script>
+</style>
@@ -0,0 +1,37 @@
+<template>
+  <div class="page-card">
+    <h1 class="page-title">Card</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-card
+      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+      desc="描述"
+      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+    </zan-card>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <zan-card
+      title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+      desc="商品SKU1，商品SKU2"
+      thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+      <div class="zan-card__row" slot="title">
+        <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+        <span class="zan-card__price">¥ 2.00</span>
+      </div>
+      <div class="zan-card__row" slot="desc">
+        <h4 class="zan-card__desc">商品sku</h4>
+        <span class="zan-card__num">x 2</span>
+      </div>
+      <div class="zan-card__footer" slot="footer">
+        <zan-button size="mini">按钮一</zan-button>
+        <zan-button size="mini">按钮二</zan-button>
+      </div>
+    </zan-card>
+  </div>
+</template>
+
+<style>
+.page-sub-title {
+  padding: 15px;
+}
+</style>
@@ -0,0 +1,62 @@
+<template>
+  <div class="page-cell">
+    <h1 class="page-title">Cell</h1>
+    
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-cell-group>
+      <zan-cell title="单元格1" value="单元格1内容"></zan-cell>
+      <zan-cell title="单元格2" value="单元格2内容"></zan-cell>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">标题带描述信息</h2>
+    <zan-cell-group>
+      <zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
+      <zan-cell title="单元格2" label="描述信息"></zan-cell>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">带图标</h2>
+    <zan-cell-group>
+      <zan-cell title="起码运动馆" icon="home"></zan-cell>
+      <zan-cell title="线下门店" icon="location"></zan-cell>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">可点击的链接</h2>
+    <zan-cell-group>
+      <zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
+      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <zan-cell-group>
+      <zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+        <template slot="title">
+          <span class="zan-cell-text">起码运动馆</span>
+          <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+        </template>
+      </zan-cell>
+      <zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
+    </zan-cell-group>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>
+
+<style>
+.official-img {
+  width: 31px;
+  vertical-align: middle;
+  border: 0;
+}
+
+.page-sub-title {
+  padding: 25px 15px;
+}
+</style>
@@ -0,0 +1,66 @@
+<template>
+  <div class="page-checkbox">
+    <h1 class="page-title">Checkbox</h1>
+
+    <div class="checkbox-demo-wrapper">
+      <h2 class="page-sub-title">基础用法</h2>
+      <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+
+      <h2 class="page-sub-title">禁用状态</h2>
+      <zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
+
+      <h2 class="page-sub-title">Checkbox组</h2>
+      <zan-checkbox-group v-model="result">
+        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+      </zan-checkbox-group>
+
+      <h2 class="page-sub-title">禁用Checkbox组</h2>
+      <zan-checkbox-group v-model="result" disabled>
+        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+      </zan-checkbox-group>
+
+      <h2 class="page-sub-title">与Cell组件一起使用</h2>
+    </div>
+
+    <zan-checkbox-group v-model="result">
+      <zan-cell-group>
+        <zan-cell v-for="item in list">
+          <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+        </zan-cell>
+      </zan-cell-group>
+    </zan-checkbox-group>
+  </div>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+
+<style>
+.checkbox-demo-wrapper {
+  padding: 0 15px;
+
+  .zan-checkbox {
+    margin: 10px 0;
+  }
+}
+</style>
@@ -0,0 +1,54 @@
+<template>
+  <div class="page-dialog">
+    <h1 class="page-title">Dialog</h1>
+
+    <div class="zan-button-1">
+      <zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
+    </div>
+
+    <div class="zan-button-1">
+      <zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
+
+<style>
+@component-namespace page {
+  @b dialog {
+    padding: 0 15px;
+
+    .zan-button-1 {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,44 @@
+<template>
+  <div class="page-field">
+    <h1 class="page-title">Field</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-cell-group>
+      <zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
+      <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
+      <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">无label的输入框</h2>
+    <zan-cell-group>
+      <zan-field type="text" placeholder="请输入用户名"></zan-field>
+    </zan-cell-group>
+
+    <h2 class="page-sub-title">监听change事件</h2>
+    <zan-cell-group>
+      <zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
+    </zan-cell-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: ''
+    };
+  },
+
+  methods: {
+    handleChange() {
+      console.log(this.name);
+    }
+  }
+};
+</script>
+
+<style>
+.page-sub-title {
+  padding: 20px 15px;
+}
+</style>
@@ -0,0 +1,80 @@
+<template>
+  <div class="page-panel">
+    <h1 class="page-title">Panel</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-panel title="标题" desc="标题描述" status="状态">
+      <zan-card
+        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+        desc="商品SKU1，商品SKU2"
+        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+        <div class="zan-card__row" slot="title">
+          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="zan-card__price">¥ 2.00</span>
+        </div>
+        <div class="zan-card__row" slot="desc">
+          <h4 class="zan-card__desc">商品sku</h4>
+          <span class="zan-card__num">x 2</span>
+        </div>
+        <div class="zan-card__footer" slot="footer">
+          <zan-button size="mini">按钮一</zan-button>
+          <zan-button size="mini">按钮二</zan-button>
+        </div>
+      </zan-card>
+      <div class="zan-panel-sum">
+        合计：<span>¥ 1999.90</span>
+      </div>
+    </zan-panel>
+
+    <h2 class="page-sub-title">高级用法</h2>
+    <zan-panel title="标题" desc="标题描述" status="状态">
+      <zan-card
+        title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+        desc="商品SKU1，商品SKU2"
+        thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+        <div class="zan-card__row" slot="title">
+          <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+          <span class="zan-card__price">¥ 2.00</span>
+        </div>
+        <div class="zan-card__row" slot="desc">
+          <h4 class="zan-card__desc">商品sku</h4>
+          <span class="zan-card__num">x 2</span>
+        </div>
+        <div class="zan-card__footer" slot="footer">
+          <zan-button size="mini">按钮一</zan-button>
+          <zan-button size="mini">按钮二</zan-button>
+        </div>
+      </zan-card>
+      <div class="zan-panel-sum">
+        合计：<span>¥ 1999.90</span>
+      </div>
+      <div class="zan-panel-buttons" slot="footer">
+        <zan-button size="small">按钮一</zan-button>
+        <zan-button size="small" type="danger">按钮二</zan-button>
+      </div>
+    </zan-panel>
+  </div>  
+</template>
+
+<style>
+.zan-panel-sum {
+  background: #fff;
+  text-align: right;
+  font-size: 14px;
+  color: #333;
+  line-height: 30px;
+  padding-right: 15px;
+
+  span {
+    color: red;
+  }
+}
+
+.zan-panel-buttons {
+  text-align: right;
+
+  .zan-button {
+    margin-left: 5px;
+  }
+}
+</style>
@@ -0,0 +1,39 @@
+<template>
+  <div class="page-picker">
+    <h1 class="page-title">Picker</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+  </div>  
+</template>
+
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+</script>
@@ -0,0 +1,93 @@
+<template>
+  <div class="page-popup">
+    <h1 class="page-title">Popup</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div class="zan-button-1">
+      <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
+    </div>
+    <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
+      xxxx
+    </zan-popup>
+
+    <div class="zan-button-1">
+      <zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
+    </div>
+    <zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
+      更新成功
+    </zan-popup>
+
+    <div class="zan-button-1">
+      <zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
+    </div>
+    <zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
+      <zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
+    </zan-popup>
+
+    <div class="zan-button-1">
+      <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
+    </div>
+    <zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
+      一些内容
+    </zan-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false
+    }
+  },
+
+  watch: {
+    popupShow2(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow2 = false;
+        }, 2000);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.zan-popup-1 {
+  width: 100%;
+  height: 200px;
+}
+
+.zan-popup-2 {
+  width: 100%;
+  line-height: 44px;
+  background-color: rgba(0, 0, 0, 0.701961);
+  text-align: center;
+  color: #fff;
+}
+
+.zan-popup-3 {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.zan-popup-4 {
+  width: 50%;
+  height: 200px;
+  background: #fff;
+  border-radius: 10px;
+}
+
+.page-popup .zan-button-1 {
+  margin-bottom: 10px;
+}
+
+.page-sub-title {
+  padding: 20px 15px;
+}
+</style>
@@ -0,0 +1,59 @@
+<template>
+  <div class="page-radio">
+    <h1 class="page-title">Radio</h1>
+
+    <div class="radio-demo-wrapper">
+      <h2 class="page-sub-title">基础用法</h2>
+      <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
+      <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
+
+      <h2 class="page-sub-title">禁用状态</h2>
+      <zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
+      <zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
+
+      <h2 class="page-sub-title">radio组</h2>
+      <zan-radio-group v-model="radio3">
+        <zan-radio name="1">单选框1</zan-radio>
+        <zan-radio name="2">单选框2</zan-radio>
+      </zan-radio-group>
+
+      <h2 class="page-sub-title">禁用radio组</h2>
+      <zan-radio-group v-model="radio3" disabled>
+        <zan-radio name="1">单选框1</zan-radio>
+        <zan-radio name="2">单选框2</zan-radio>
+      </zan-radio-group>
+
+      <h2 class="page-sub-title">与Cell组件一起使用</h2>
+    </div>
+
+    <zan-radio-group v-model="radio4">
+      <zan-cell-group>
+        <zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
+        <zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
+      </zan-cell-group>
+    </zan-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>
+
+<style>
+.radio-demo-wrapper {
+  padding: 0 15px;
+
+  .zan-radio {
+    margin: 10px 0;
+  }
+}
+</style>
@@ -0,0 +1,59 @@
+<template>
+  <div class="page-switch">
+    <h1 class="page-title">Switch</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div class="page-switch">
+      <div class="page-switch__wrapper">
+        <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+        <div class="page-switch__text">{{switchStateText}}</div>
+      </div>
+      <div class="page-switch__wrapper">
+        <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+        <div class="page-switch__text">ON, DISABLED</div>
+      </div>
+      <div class="page-switch__wrapper">
+        <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+        <div class="page-switch__text">OFF, DISABLED</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      switchState: true
+    };
+  },
+  computed: {
+    switchStateText() {
+      return this.switchState ? 'ON' : 'OFF';
+    }
+  },
+  methods: {
+    updateState(newState) {
+      this.switchState = newState;
+    }
+  }
+};
+</script>
+
+<style>
+  @component-namespace page {
+    @component switch {
+      padding: 0 15px 15px;
+
+      @descendent wrapper {
+        width: 33.33%;
+        float: left;
+        text-align: center;
+      }
+
+      @descendent text {
+        margin: 20px 0;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,52 @@
+<template>
+  <div class="page-cell">
+    <h1 class="page-title">Tag</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div>
+      <div class="tags-container">
+        <zan-tag>返现</zan-tag>
+        <zan-tag :plain="true">返现</zan-tag>
+      </div>
+      <div class="tags-container">
+        <zan-tag type="danger">返现</zan-tag>
+        <zan-tag type="danger">四字标签</zan-tag>
+        <zan-tag type="danger">一</zan-tag>
+      </div>
+      <div class="tags-container">
+        <zan-tag type="danger">返现</zan-tag>
+        <zan-tag :plain="true" type="danger">返现</zan-tag>
+      </div>
+      <div class="tags-container">
+        <zan-tag type="primary">返现</zan-tag>
+        <zan-tag :plain="true" type="primary">返现</zan-tag>
+      </div>
+      <div class="tags-container">
+        <zan-tag type="success">返现</zan-tag>
+        <zan-tag :plain="true" type="success">返现</zan-tag>
+      </div>
+      <div class="tags-container">
+        <zan-tag type="danger" :mark="true">返现</zan-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {}
+};
+</script>
+
+<style>
+.page-sub-title {
+  padding: 25px 15px;
+}
+.tags-container {
+  padding: 5px 15px;
+
+  .zan-tag + .zan-tag {
+    margin-left: 10px;
+  }
+}
+</style>
@@ -0,0 +1,64 @@
+<template>
+  <div class="page-card">
+    <h1 class="page-title">Waterfall</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div>
+      <div
+        v-waterfall-lower="loadMore"
+        v-waterfall-upper="loadMoreUpper"
+        waterfall-disabled="isWaterfallDisabled"
+        waterfall-offset="400"
+      >
+        <div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
+        <!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
+        <div style="text-align: center;">loading</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5],
+      loading: false,
+      finished: false
+    };
+  },
+  methods: {
+    loadMore() {
+      if (this.list.length >= 200) {
+        this.finished = true;
+        return;
+      }
+
+      this.loading = true;
+      setTimeout(() => {
+        let lastNumber = this.list[this.list.length - 1];
+        for (let i = 0; i < 5; i++) {
+          lastNumber += 1;
+          this.list.push(lastNumber);
+        }
+        this.loading = false;
+      }, 2500);
+    },
+    loadMoreUpper() {
+      if (this.list[0] < 0) return;
+      this.list.unshift(-1);
+    }
+  },
+  computed: {
+    isWaterfallDisabled: function() {
+      return this.loading || this.finished;
+    }
+  }
+};
+</script>
+
+<style>
+.page-sub-title {
+  padding: 15px;
+}
+</style>
@@ -1,22 +1,25 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
+import navConfig from './nav.config.json';
 import routes from './router.config';
-import demoBlock from './components/demo-block';
 import SideNav from './components/side-nav';
-import Oxygen from '../src/index';
+import Mobile from './components/mobile';

-import 'packages/zanui-css/src/index.css';
-
-Vue.use(Oxygen);
 Vue.use(VueRouter);
-Vue.component('demo-block', demoBlock);
 Vue.component('side-nav', SideNav);
+Vue.component('mobile', Mobile);
+
+let routesConfig = routes(navConfig);
+routesConfig.push({
+  path: '/',
+  redirect: '/component/button'
+});

 const router = new VueRouter({
  mode: 'hash',
  base: __dirname,
-  routes
+  routes: routesConfig
 });

 let indexScrollTop = 0;
@@ -35,6 +38,7 @@ router.afterEach(route => {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop;
    });
+
  }
 });

@@ -1,7 +1,7 @@
 {
  "zh-CN": [
    {
-      "name": "oxygen组件",
+      "name": "ZanUI组件",
      "groups": [
        {
          "groupName": "CSS组件",
@@ -14,14 +14,14 @@
              "path": "/cell",
              "title": "Cell"
            },
-            {
-              "path": "/loading",
-              "title": "Loading"
-            },
            {
              "path": "/progress",
              "title": "Progress"
            },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
            {
              "path": "/card",
              "title": "Card"
@@ -34,6 +34,10 @@
              "path": "/steps",
              "title": "Steps"
            },
+            {
+              "path": "/tag",
+              "title": "Tag"
+            },
            {
              "path": "/badge",
              "title": "Badge"
@@ -1,6 +1,4 @@
-import navConfig from './nav.config.json';
-
-const registerRoute = (navConfig) => {
+const registerRoute = (navConfig, isExample) => {
  let route = [];
  let navs = navConfig['zh-CN'];
  navs.forEach(nav => {
@@ -23,14 +21,14 @@ const registerRoute = (navConfig) => {
    route.push({
      path: '/component' + page.path,
      component: function(resolve) {
-        require([`./examples-docs${page.path}.md`], resolve);
+        require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
      }
    });
  }

+  // console.log(route);
+
  return route;
 };

-let route = registerRoute(navConfig);
-
-export default route;
+export default registerRoute;
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Oxygen</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>ZanUI</title>
 </head>
 <body>

@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Oxygen</title>
+  <title>ZanUI</title>
 </head>
 <body>

@@ -1,9 +1,9 @@
 {
-  "name": "@youzan/oxygen",
-  "version": "0.0.1",
+  "name": "@youzan/zanui-vue",
+  "version": "0.0.7",
  "description": "有赞vue wap组件库",
  "main": "lib/zanui.js",
-  "style": "lib/zanui-css.css",
+  "style": "lib/zanui-css/index.css",
  "files": [
    "lib",
    "src",
@@ -13,16 +13,17 @@
    "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
    "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
    "build:file": "node build/bin/build-entry.js",
+    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
-    "build:zanui": "webpack --progress --hide-modules --config  build/webpack.build.js && webpack --progress --hide-modules --config  build/webpack.build.min.js",
-    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:zanui-css",
+    "build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
+    "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
    "builddocs": "webpack --progress --hide-modules --config  build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
    "clean": "rimraf lib && rimraf packages/*/lib",
    "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet"
  },
  "repository": {
    "type": "git",
-    "url": "git@gitlab.qima-inc.com:fe/oxygen.git"
+    "url": "git@gitlab.qima-inc.com:fe/zanui-vue.git"
  },
  "keywords": [
    "youzan",
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-button",
+  "name": "@youzan/zan-button",
  "version": "0.0.1",
  "description": "button component",
  "main": "./index.js",
@@ -8,14 +8,14 @@
 * @param {slot} - 显示文本
 *
 * @example
- * <z-button size="large" type="primary">按钮</z-button>
+ * <zan-button size="large" type="primary">按钮</zan-button>
 */

 const allowedSize = ['mini', 'small', 'normal', 'large'];
 const allowedType = ['default', 'danger', 'primary'];

 export default {
-  name: 'z-button',
+  name: 'zan-button',

  props: {
    disabled: Boolean,
@@ -52,6 +52,27 @@ export default {
    let { type, nativeType, size, disabled, loading, block } = this;
    let Tag = this.tag;

-    
+    return (
+      <Tag
+        type={nativeType}
+        disabled={disabled}
+        class={[
+          'zan-button',
+          'zan-button--' + type,
+          'zan-button--' + size,
+          {
+            'is-disabled': disabled,
+            'is-loading': loading,
+            'is-block': block
+          }
+        ]}
+        onClick={this.handleClick}
+      >
+        {
+          loading ? <i class="zan-icon-loading"></i> : null
+        }
+        <span class="zan-button-text">{this.$slots.default}</span>
+      </Tag>
+    );
  }
 };
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
@@ -0,0 +1,3 @@
+import Card from './src/card';
+
+export default Card;
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-card",
+  "version": "0.0.1",
+  "description": "card component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
@@ -0,0 +1,31 @@
+<template>
+  <div class="zan-card">
+    <img :src="thumb" alt="" class="zan-card__img">
+    <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="zan-card__info">
+        <slot name="title">
+          <h4 v-text="title" class="zan-card__title"></h4>
+        </slot>
+        <slot name="desc">
+          <p v-if="desc" v-text="desc" class="zan-card__title"></p>
+        </slot>
+        <slot name="tags"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-card',
+  props: {
+    thumb: {
+      type: String,
+      required: true
+    },
+    title: String,
+    desc: String
+  }
+};
+</script>
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-cell",
+  "name": "@youzan/zan-cell",
  "version": "0.0.1",
  "description": "cell component",
  "main": "./index.js",
@@ -1,11 +1,11 @@
 <template>
-  <div class="z-cell-group">
+  <div class="zan-cell-group">
    <slot></slot>
  </div>
 </template>

 <script>
 export default {
-  name: 'z-cell-group'
+  name: 'zan-cell-group'
 };
 </script>
@@ -1,31 +1,34 @@
 <template>
-  <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell__title">
+  <a class="zan-cell" :href="url" @click="handleClick">
+    <div class="zan-cell__title">
      <slot name="icon">
-        <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
+        <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
      </slot>
      <slot name="title">
-        <span class="z-cell__text" v-text="title"></span>
-        <span class="z-cell__label" v-if="label" v-text="label"></span>
+        <span class="zan-cell__text" v-text="title"></span>
+        <span class="zan-cell__label" v-if="label" v-text="label"></span>
      </slot>
    </div>
-    <div class="z-cell__value" :class="{ 'is-link' : isLink }">
+    <div class="zan-cell__value" :class="{
+      'is-link': isLink,
+      'is-alone': !title && !label
+    }">
      <slot>
        <span v-text="value"></span>
      </slot>
    </div>
-    <i class="zui-icon zui-icon-arrow" v-if="isLink"></i>
+    <i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
  </a>
 </template>

 <script>
 export default {
-  name: 'z-cell',
+  name: 'zan-cell',

  props: {
    icon: String,
    title: String,
-    value: String,
+    value: [String, Number],
    url: String,
    label: String,
    isLink: Boolean
@@ -0,0 +1,3 @@
+import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
+
+export default CheckboxGroup;
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
@@ -0,0 +1,3 @@
+import Checkbox from './src/checkbox';
+
+export default Checkbox;
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-checkbox",
+  "version": "0.0.1",
+  "description": "checkbox component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
@@ -0,0 +1,22 @@
+<template>
+  <div class="zan-checkbox-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-checkbox-group',
+
+  props: {
+    value: {},
+    disabled: Boolean
+  },
+
+  watch: {
+    value(val) {
+      this.$emit('change', val);
+    }
+  }
+};
+</script>
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="zan-checkbox"
+    :class="{
+      'is-disabled': isDisabled
+    }">
+    <span class="zan-checkbox__input">
+      <input
+        v-model="currentValue"
+        type="checkbox"
+        class="zan-checkbox__control"
+        :disabled="isDisabled">
+      <span class="zan-icon" :class="{
+        'zan-icon-checked': isChecked,
+        'zan-icon-check': !isChecked
+      }">
+      </span>
+    </span>
+    <span class="zan-checkbox__label">
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import findParent from 'src/mixins/findParent';
+
+export default {
+  name: 'zan-checkbox',
+
+  mixins: [findParent],
+
+  props: {
+    disabled: Boolean,
+    value: {},
+    name: [String, Number]
+  },
+
+  computed: {
+    /**
+     * `checkbox`是否在`zan-checkbox-group`中
+     */
+    isGroup() {
+      return !!this.findParentByComponentName('zan-checkbox-group');
+    },
+
+    /**
+     * `checkbox`当前值
+     */
+    currentValue: {
+      get() {
+        return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
+      },
+
+      set(val) {
+        if (this.isGroup && this.parentGroup) {
+          let parentValue = this.parentGroup.value.slice();
+          if (val) {
+            if (parentValue.indexOf(this.name) === -1) {
+              parentValue.push(this.name);
+              this.parentGroup.$emit('input', parentValue);
+            }
+          } else {
+            let index = parentValue.indexOf(this.name);
+            if (index !== -1) {
+              parentValue.splice(index, 1);
+              this.parentGroup.$emit('input', parentValue);
+            }
+          }
+        } else {
+          this.$emit('input', val);
+        }
+      }
+    },
+
+    /**
+     * `checkbox`是否被选中
+     */
+    isChecked() {
+      if ({}.toString.call(this.currentValue) === '[object Boolean]') {
+        return this.currentValue;
+      } else if (Array.isArray(this.currentValue)) {
+        return this.currentValue.indexOf(this.name) > -1;
+      }
+    },
+
+    /**
+     * `checkbox`是否被禁用
+     */
+    isDisabled() {
+      return this.isGroup && this.parentGroup
+          ? this.parentGroup.disabled || this.disabled
+          : this.disabled;
+    }
+  }
+};
+</script>
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-dialog",
+  "name": "@youzan/zan-dialog",
  "version": "0.0.1",
  "description": "dialog component",
  "main": "./index.js",
@@ -1,16 +1,16 @@
 <template>
  <transition name="dialog-bounce">
-    <div class="z-dialog-wrapper">
-      <div class="z-dialog" v-show="value">
-        <div class="z-dialog__header" v-if="title">
-          <div class="z-dialog__title" v-text="title"></div>
+    <div class="zan-dialog-wrapper">
+      <div class="zan-dialog" v-show="value">
+        <div class="zan-dialog__header" v-if="title">
+          <div class="zan-dialog__title" v-text="title"></div>
        </div>
-        <div class="z-dialog__content" v-if="message">
-          <div class="z-dialog__message" v-html="message"></div>
+        <div class="zan-dialog__content" v-if="message">
+          <div class="zan-dialog__message" v-html="message"></div>
        </div>
-        <div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="zan-dialog__btn zan-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
        </div>
      </div>
    </div>
@@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';

 export default {
-  name: 'z-dialog',
+  name: 'zan-dialog',

  mixins: [Popup],

@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-field",
+  "name": "@youzan/zan-field",
  "version": "0.0.1",
  "description": "form field component",
  "main": "./index.js",
@@ -1,6 +1,6 @@
 <template>
-  <z-cell
-    class="z-field"
+  <zan-cell
+    class="zan-field"
    :title="label"
    :class="{
      'is-textarea': type === 'textarea',
@@ -8,7 +8,7 @@
    }">
    <textarea
      v-if="type === 'textarea'"
-      class="z-field__control"
+      class="zan-field__control"
      v-model="currentValue"
      @change="$emit('change', currentValue)"
      :placeholder="placeholder"
@@ -18,7 +18,7 @@
    </textarea>
    <input
      v-else
-      class="z-field__control"
+      class="zan-field__control"
      :value="currentValue"
      @change="$emit('change', currentValue)"
      @input="handleInput"
@@ -27,14 +27,14 @@
      :maxlength="maxlength"
      :disabled="disabled"
      :readonly="readonly">
-  </z-cell>
+  </zan-cell>
 </template>

 <script>
 import zCell from 'packages/cell';

 export default {
-  name: 'z-field',
+  name: 'zan-field',

  components: {
    zCell
@@ -1,7 +1,7 @@
 {
-  "name": "@youzan/z-icon",
+  "name": "@youzan/zan-icon",
  "version": "0.0.1",
-  "description": "z-icon",
+  "description": "zan-icon",
  "main": "index.js",
  "author": "zhangmin <zhangmin@youzan.com>",
  "devDependencies": {},
@@ -1,10 +1,10 @@
 <template>
-  <i :class="'zenui-icon-' + name"></i>
+  <i class="zanui-icon" :class="'zan-icon-' + name"></i>
 </template>

 <script>
  export default {
-    name: 'z-icon',
+    name: 'zan-icon',

    props: {
      name: String
@@ -1,5 +1,5 @@
 {
-  "name": "@youzan/z-loading",
+  "name": "@youzan/zan-loading",
  "version": "0.0.1",
  "description": "loading component",
  "main": "./lib/index.js",
@@ -1,9 +1,9 @@
 <template>
-  <div class="z-loading"></div>
+  <div class="zan-loading"></div>
 </template>

 <script>
 export default {
-  name: 'z-loading'
+  name: 'zan-loading'
 };
 </script>
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
@@ -0,0 +1,3 @@
+import Panel from './src/panel';
+
+export default Panel;
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-panel",
+  "version": "0.0.1",
+  "description": "panel component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
@@ -0,0 +1,28 @@
+<template>
+  <div class="zan-panel">
+    <div class="zan-panel__header">
+      <slot name="header">
+        <h4 class="zan-panel__title" v-text="title"></h4>
+        <span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
+        <span class="zan-panel__status" v-if="status" v-text="status"></span>
+      </slot>
+    </div>
+    <div class="zan-panel__content">
+      <slot></slot>
+    </div>
+    <div class="zan-panel__footer" v-if="this.$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-panel',
+  props: {
+    title: String,
+    desc: String,
+    status: String
+  }
+};
+</script>
--- a/Show More
+++ b/Show More