From a971c2146012a6a3cc2d4bf5fbc9fbf78c10c204 Mon Sep 17 00:00:00 2001
From: wangxueliang <sandianbaozi@163.com>
Date: Fri, 3 Nov 2017 17:10:38 +0800
Subject: [PATCH 1/2] add rate demo

---
 components/rate/demo/rate.vue | 71 +++++++++++++++++++++++++++++++++++
 components/util/util.js       | 49 ++++++++++++------------
 2 files changed, 95 insertions(+), 25 deletions(-)
 create mode 100644 components/rate/demo/rate.vue

diff --git a/components/rate/demo/rate.vue b/components/rate/demo/rate.vue
new file mode 100644
index 000000000..31f3a2fe3
--- /dev/null
+++ b/components/rate/demo/rate.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    基本
+    <Rate class="custom"></Rate>
+    </br>
+    半星
+    <Rate :allowHalf="allowHalf"></Rate>
+    </br>
+    默认3颗星
+    <Rate v-model="initValue"></Rate>
+    <AntButton type="primary" @click="changeValue">改变</AntButton>
+    <AntButton type="primary" @click="getValue">当前值</AntButton>
+    </br>
+    只读
+    <Rate :value="initValue" :disabled="disabled"></Rate>
+    </br>
+    回调函数
+    <Rate
+      :onChange="onChange"
+      :onHoverChange="onHoverChange"></Rate>
+    <span v-if="hoverValue">{{hoverValue}}stars</span>
+    <span v-if="rValue">{{rValue}}stars</span>
+    <br/>
+    <Rate
+      :allowHalf="allowHalf"
+      :onHoverChange="onHoverChangeAH"></Rate>
+    <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
+    </br>
+    自定义
+    <Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
+  </div>
+</template>
+<script>
+import '../style'
+import { Rate, Icon, Button } from 'antd/index'
+export default {
+  data () {
+    return {
+      allowHalf: true,
+      initValue: 3,
+      disabled: true,
+      hoverValue: undefined,
+      rValue: undefined,
+      hoverValueAH: undefined,
+      character: '好',
+    }
+  },
+  methods: {
+    onHoverChange (val) {
+      this.hoverValue = val
+    },
+    onChange (val) {
+      this.rValue = val
+    },
+    onHoverChangeAH (val) {
+      this.hoverValueAH = val
+    },
+    changeValue () {
+      this.initValue = undefined
+    },
+    getValue () {
+      console.log(this.initValue)
+    },
+  },
+  components: {
+    Rate,
+    Icon,
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/util/util.js b/components/util/util.js
index 6d0070323..bef8da463 100644
--- a/components/util/util.js
+++ b/components/util/util.js
@@ -1,40 +1,39 @@
-function getScroll(w, top) {
-  let ret = top ? w.pageYOffset : w.pageXOffset;
-  const method = top ? 'scrollTop' : 'scrollLeft';
+function getScroll (w, top) {
+  let ret = top ? w.pageYOffset : w.pageXOffset
+  const method = top ? 'scrollTop' : 'scrollLeft'
   if (typeof ret !== 'number') {
-    const d = w.document;
+    const d = w.document
     // ie6,7,8 standard mode
-    ret = d.documentElement[method];
+    ret = d.documentElement[method]
     if (typeof ret !== 'number') {
       // quirks mode
-      ret = d.body[method];
+      ret = d.body[method]
     }
   }
-  return ret;
+  return ret
 }
 
-function getClientPosition(elem) {
-  let box;
-  let x;
-  let y;
-  const doc = elem.ownerDocument;
-  const body = doc.body;
-  const docElem = doc && doc.documentElement;
-  box = elem.getBoundingClientRect();
-  x = box.left;
-  y = box.top;
-  x -= docElem.clientLeft || body.clientLeft || 0;
-  y -= docElem.clientTop || body.clientTop || 0;
+function getClientPosition (elem) {
+  let x
+  let y
+  const doc = elem.ownerDocument
+  const body = doc.body
+  const docElem = doc && doc.documentElement
+  const box = elem.getBoundingClientRect()
+  x = box.left
+  y = box.top
+  x -= docElem.clientLeft || body.clientLeft || 0
+  y -= docElem.clientTop || body.clientTop || 0
   return {
     left: x,
     top: y,
-  };
+  }
 }
 
 export const getOffsetLeft = (el) => {
-  const pos = getClientPosition(el);
-  const doc = el.ownerDocument;
-  const w = doc.defaultView || doc.parentWindow;
-  pos.left += getScroll(w);
-  return pos.left;
+  const pos = getClientPosition(el)
+  const doc = el.ownerDocument
+  const w = doc.defaultView || doc.parentWindow
+  pos.left += getScroll(w)
+  return pos.left
 }

From ba79c3eee183614ade2273d00bad1711b2dea714 Mon Sep 17 00:00:00 2001
From: tangjinzhou <tangjinzhou@yidian-inc.com>
Date: Fri, 3 Nov 2017 18:46:18 +0800
Subject: [PATCH 2/2] fix demo

---
 components/button/demo/basic.vue        |  1 -
 components/button/demo/button-group.vue | 58 +++++++++++++++
 components/button/demo/button.vue       | 96 -------------------------
 components/button/demo/disabled.vue     | 23 ++++++
 components/button/demo/ghost.vue        | 16 +++++
 components/button/demo/icon.vue         | 21 ++++++
 components/button/demo/index.vue        | 42 +++++++++++
 components/button/demo/loading.vue      | 42 +++++++++++
 components/button/demo/multiple.vue     | 17 +++++
 components/button/demo/size.vue         | 48 +++++++++++++
 components/checkbox/Group.vue           | 14 ++--
 components/checkbox/demo/basic.vue      | 18 +++++
 components/checkbox/demo/check-all.vue  | 47 ++++++++++++
 components/checkbox/demo/controller.vue | 18 +++++
 components/checkbox/demo/disabled.vue   | 15 ++++
 components/checkbox/demo/group.vue      | 45 ++++++++++++
 components/checkbox/demo/layout.vue     | 18 +++++
 components/radio/Group.vue              |  2 +-
 components/style.js                     |  4 ++
 examples/button.vue                     | 95 ------------------------
 examples/index.js                       |  1 +
 examples/routes.js                      |  2 +-
 22 files changed, 445 insertions(+), 198 deletions(-)
 create mode 100644 components/button/demo/button-group.vue
 delete mode 100644 components/button/demo/button.vue
 create mode 100644 components/button/demo/disabled.vue
 create mode 100644 components/button/demo/ghost.vue
 create mode 100644 components/button/demo/icon.vue
 create mode 100644 components/button/demo/index.vue
 create mode 100644 components/button/demo/loading.vue
 create mode 100644 components/button/demo/multiple.vue
 create mode 100644 components/button/demo/size.vue
 create mode 100644 components/checkbox/demo/basic.vue
 create mode 100644 components/checkbox/demo/check-all.vue
 create mode 100644 components/checkbox/demo/controller.vue
 create mode 100644 components/checkbox/demo/disabled.vue
 create mode 100644 components/checkbox/demo/group.vue
 create mode 100644 components/checkbox/demo/layout.vue
 create mode 100644 components/style.js
 delete mode 100644 examples/button.vue

diff --git a/components/button/demo/basic.vue b/components/button/demo/basic.vue
index 065e842df..d79bb4641 100644
--- a/components/button/demo/basic.vue
+++ b/components/button/demo/basic.vue
@@ -7,7 +7,6 @@
   </div>
 </template>
 <script>
-import '../style'
 import { Button } from 'antd'
 export default {
   components: {
diff --git a/components/button/demo/button-group.vue b/components/button/demo/button-group.vue
new file mode 100644
index 000000000..8c8d41ea1
--- /dev/null
+++ b/components/button/demo/button-group.vue
@@ -0,0 +1,58 @@
+<template>
+  <div id="components-button-demo-button-group">
+    <h4>Basic</h4>
+    <ButtonGroup>
+      <AntButton>Cancel</AntButton>
+      <AntButton type="primary">OK</AntButton>
+    </ButtonGroup>
+    <ButtonGroup>
+      <AntButton disabled>L</AntButton>
+      <AntButton disabled>M</AntButton>
+      <AntButton disabled>R</AntButton>
+    </ButtonGroup>
+    <ButtonGroup>
+      <AntButton type="primary">L</AntButton>
+      <AntButton>M</AntButton>
+      <AntButton>M</AntButton>
+      <AntButton type="dashed">R</AntButton>
+    </ButtonGroup>
+
+    <h4>With Icon</h4>
+    <ButtonGroup>
+      <AntButton type="primary">
+        <Icon type="left" />Go back
+      </AntButton>
+      <AntButton type="primary">
+        Go forward<Icon type="right" />
+      </AntButton>
+    </ButtonGroup>
+    <ButtonGroup>
+      <AntButton type="primary" icon="cloud" />
+      <AntButton type="primary" icon="cloud-download" />
+    </ButtonGroup>
+  </div>
+</template>
+<script>
+import { Button, Icon } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+    ButtonGroup: Button.Group,
+    Icon,
+  },
+}
+</script>
+<style>
+#components-button-demo-button-group h4 {
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: normal;
+}
+#components-button-demo-button-group h4:first-child {
+  margin-top: 0;
+}
+#components-button-demo-button-group .ant-btn-group {
+  margin-right: 8px;
+}
+</style>
diff --git a/components/button/demo/button.vue b/components/button/demo/button.vue
deleted file mode 100644
index a1545a162..000000000
--- a/components/button/demo/button.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <AntButton :type="this.type" @click="handleClick" class="test">
-      primary
-    </AntButton>
-    <AntButton @mouseover="handleClick" @mouseout="handleClick">Default</AntButton>
-    <AntButton type="dashed">Dashed</AntButton>
-    <AntButton type="danger">Danger</AntButton>
-    <br />
-    <AntButton type="primary" shape="circle" icon="search" />
-    <AntButton type="primary" icon="search">Search</AntButton>
-    <AntButton shape="circle" icon="search" />
-    <AntButton icon="search">Search</AntButton>
-    <br />
-    <AntButton shape="circle" icon="search" />
-    <AntButton icon="search">Search</AntButton>
-    <AntButton type="dashed" shape="circle" icon="search" />
-    <AntButton type="dashed" icon="search">Search</AntButton>
-    <div>
-      <AntButton type="primary">Primary</AntButton>
-      <AntButton type="primary" disabled>Primary(disabled)</AntButton>
-      <br />
-      <AntButton>Default</AntButton>
-      <AntButton disabled>Default(disabled)</AntButton>
-      <br />
-      <AntButton>Ghost</AntButton>
-      <AntButton disabled>Ghost(disabled)</AntButton>
-      <br />
-      <AntButton type="dashed">Dashed</AntButton>
-      <AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
-    </div>
-    <div :style="{background: 'rgb(190, 200, 200)', padding: '26px 16px 16px'}">
-      <AntButton type="primary" ghost>Primary</AntButton>
-      <AntButton ghost>Default</AntButton>
-      <AntButton type="dashed" ghost>Dashed</AntButton>
-      <AntButton type="danger" ghost>danger</AntButton>
-    </div>
-    <div>
-      <AntButton type="primary" loading>
-        Loading
-      </AntButton>
-      <AntButton type="primary" size="small" loading>
-        Loading
-      </AntButton>
-      <br />
-      <AntButton type="primary">
-        Click me!
-      </AntButton>
-      <AntButton type="primary" icon="poweroff">
-        Click me!
-      </AntButton>
-      <br />
-      <AntButton shape="circle" loading />
-      <AntButton type="primary" shape="circle" loading />
-    </div>
-    <div>
-      <ButtonGroup>
-        <AntButton>Cancel</AntButton>
-        <AntButton type="primary">OK</AntButton>
-      </ButtonGroup>
-      <ButtonGroup size="large">
-        <AntButton disabled>L</AntButton>
-        <AntButton disabled>M</AntButton>
-        <AntButton disabled>R</AntButton>
-      </ButtonGroup>
-      <ButtonGroup size="small">
-        <AntButton type="primary">L</AntButton>
-        <AntButton>M</AntButton>
-        <AntButton>M</AntButton>
-        <AntButton type="dashed">R</AntButton>
-      </ButtonGroup>
-    </div>
-  </div>
-</template>
-<script>
-import '../style'
-import { Button } from 'antd'
-const ButtonGroup = Button.Group
-export default {
-  data () {
-    return {
-      type: 'primary',
-    }
-  },
-  methods: {
-    handleClick (event) {
-      console.log(event)
-      this.type = this.type === 'primary' ? 'danger' : 'primary'
-    },
-  },
-  components: {
-    AntButton: Button,
-    ButtonGroup,
-  },
-}
-</script>
diff --git a/components/button/demo/disabled.vue b/components/button/demo/disabled.vue
new file mode 100644
index 000000000..1ae12909f
--- /dev/null
+++ b/components/button/demo/disabled.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <AntButton type="primary">Primary</AntButton>
+    <AntButton type="primary" disabled>Primary(disabled)</AntButton>
+    <br />
+    <AntButton>Default</AntButton>
+    <AntButton disabled>Default(disabled)</AntButton>
+    <br />
+    <AntButton>Ghost</AntButton>
+    <AntButton disabled>Ghost(disabled)</AntButton>
+    <br />
+    <AntButton type="dashed">Dashed</AntButton>
+    <AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
+  </div>
+</template>
+<script>
+import { Button } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/button/demo/ghost.vue b/components/button/demo/ghost.vue
new file mode 100644
index 000000000..3b474225b
--- /dev/null
+++ b/components/button/demo/ghost.vue
@@ -0,0 +1,16 @@
+<template>
+  <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
+    <AntButton type="primary" ghost>Primary</AntButton>
+    <AntButton ghost>Default</AntButton>
+    <AntButton type="dashed" ghost>Dashed</AntButton>
+    <AntButton type="danger" ghost>danger</AntButton>
+  </div>
+</template>
+<script>
+import { Button } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/button/demo/icon.vue b/components/button/demo/icon.vue
new file mode 100644
index 000000000..471b07a80
--- /dev/null
+++ b/components/button/demo/icon.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <AntButton type="primary" shape="circle" icon="search" />
+    <AntButton type="primary" icon="search">Search</AntButton>
+    <AntButton shape="circle" icon="search" />
+    <AntButton icon="search">Search</AntButton>
+    <br />
+    <AntButton shape="circle" icon="search" />
+    <AntButton icon="search">Search</AntButton>
+    <AntButton type="dashed" shape="circle" icon="search" />
+    <AntButton type="dashed" icon="search">Search</AntButton>
+  </div>
+</template>
+<script>
+import { Button } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
new file mode 100644
index 000000000..1c633c5f9
--- /dev/null
+++ b/components/button/demo/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>ButtonGroup</h1>
+    <ButtonGroup />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>Ghost</h1>
+    <Ghost />
+    <h1>Icon</h1>
+    <Icon />
+    <h1>Loading</h1>
+    <Loading />
+    <h1>TODO ： Multiple</h1>
+    <Multiple />
+    <h1>Size</h1>
+    <Size />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import ButtonGroup from './button-group'
+import Disabled from './disabled'
+import Ghost from './ghost'
+import Icon from './icon'
+import Loading from './loading'
+import Multiple from './multiple'
+import Size from './size'
+export default {
+  components: {
+    Basic,
+    ButtonGroup,
+    Disabled,
+    Ghost,
+    Icon,
+    Loading,
+    Multiple,
+    Size,
+  },
+}
+</script>
diff --git a/components/button/demo/loading.vue b/components/button/demo/loading.vue
new file mode 100644
index 000000000..842bdf260
--- /dev/null
+++ b/components/button/demo/loading.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <AntButton type="primary" loading>
+      Loading
+    </AntButton>
+    <AntButton type="primary" size="small" loading>
+      Loading
+    </AntButton>
+    <br />
+    <AntButton type="primary" :loading="loading" @click="enterLoading">
+      Click me!
+    </AntButton>
+    <AntButton type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
+      Click me!
+    </AntButton>
+    <br />
+    <AntButton shape="circle" loading />
+    <AntButton type="primary" shape="circle" loading />
+  </div>
+</template>
+<script>
+import { Button } from 'antd'
+export default {
+  data () {
+    return {
+      loading: false,
+      iconLoading: false,
+    }
+  },
+  methods: {
+    enterLoading () {
+      this.loading = true
+    },
+    enterIconLoading () {
+      this.iconLoading = true
+    },
+  },
+  components: {
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
new file mode 100644
index 000000000..f27a4fb5e
--- /dev/null
+++ b/components/button/demo/multiple.vue
@@ -0,0 +1,17 @@
+// TODO: 依赖组件开发中
+<template>
+  <div>
+    <AntButton type="primary">Primary</AntButton>
+    <AntButton>Default</AntButton>
+    <AntButton type="dashed">Dashed</AntButton>
+    <AntButton type="danger">Danger</AntButton>
+  </div>
+</template>
+<script>
+import { Button } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/button/demo/size.vue b/components/button/demo/size.vue
new file mode 100644
index 000000000..50fafe069
--- /dev/null
+++ b/components/button/demo/size.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <RadioGroup :value="size" @change="handleSizeChange">
+      <RadioButton value="large">Large</RadioButton>
+      <RadioButton value="default">Default</RadioButton>
+      <RadioButton value="small">Small</RadioButton>
+    </RadioGroup>
+    <br /><br />
+    <AntButton type="primary" :size="size">Primary</AntButton>
+    <AntButton :size="size">Normal</AntButton>
+    <AntButton type="dashed" :size="size">Dashed</AntButton>
+    <AntButton type="danger" :size="size">Danger</AntButton>
+    <br />
+    <AntButton type="primary" shape="circle" icon="download" :size="size" />
+    <AntButton type="primary" icon="download" :size="size">Download</AntButton>
+    <br />
+    <ButtonGroup :size="size">
+      <AntButton type="primary">
+        <Icon type="left" />Backward
+      </AntButton>
+      <AntButton type="primary">
+        Forward<Icon type="right" />
+      </AntButton>
+    </ButtonGroup>
+  </div>
+</template>
+<script>
+import { Button, Radio, Icon } from 'antd'
+export default {
+  data () {
+    return {
+      size: 'large',
+    }
+  },
+  methods: {
+    handleSizeChange (e) {
+      this.size = e.target.value
+    },
+  },
+  components: {
+    AntButton: Button,
+    ButtonGroup: Button.Group,
+    RadioButton: Radio.Button,
+    RadioGroup: Radio.Group,
+    Icon,
+  },
+}
+</script>
diff --git a/components/checkbox/Group.vue b/components/checkbox/Group.vue
index 7408105e5..ef2518833 100644
--- a/components/checkbox/Group.vue
+++ b/components/checkbox/Group.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="`${prefixCls}`">
-    <Checkbox v-for="item in options" :key="item.value" :checked="checkedStatus.has(item.value)"
+    <Checkbox v-for="item in checkOptions" :key="item.value" :checked="checkedStatus.has(item.value)"
       :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox>
     <slot v-if="options.length === 0"></slot>
   </div>
@@ -26,6 +26,7 @@ export default {
       default: () => [],
       type: Array,
     },
+    disabled: Boolean,
   },
   model: {
     prop: 'value',
@@ -40,15 +41,20 @@ export default {
     checkedStatus () {
       return new Set(this.stateValue)
     },
+    checkOptions () {
+      const { disabled } = this
+      return this.options.map(option => {
+        return typeof option === 'string'
+          ? { label: option, value: option }
+          : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
+      })
+    },
   },
   created () {
     this.setChildCheckbox(this.$slots.default)
   },
   methods: {
     handleChange (event) {
-      if (this.disabled) {
-        return false
-      }
       const target = event.target
       const { value: targetValue, checked } = target
       const { stateValue, value } = this
diff --git a/components/checkbox/demo/basic.vue b/components/checkbox/demo/basic.vue
new file mode 100644
index 000000000..825ff1fd4
--- /dev/null
+++ b/components/checkbox/demo/basic.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Checkbox @change="onChange">Checkbox</Checkbox>
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.checked}`)
+    },
+  },
+  components: {
+    Checkbox,
+  },
+}
+</script>
diff --git a/components/checkbox/demo/check-all.vue b/components/checkbox/demo/check-all.vue
new file mode 100644
index 000000000..44b6b3e84
--- /dev/null
+++ b/components/checkbox/demo/check-all.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
+      <Checkbox
+        :indeterminate="indeterminate"
+        @change="onCheckAllChange"
+        :checked="checkAll"
+      >
+        Check all
+      </Checkbox>
+    </div>
+    <br />
+    <CheckboxGroup :options="plainOptions" v-model="checkedList" @change="onChange" />
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+const plainOptions = ['Apple', 'Pear', 'Orange']
+const defaultCheckedList = ['Apple', 'Orange']
+export default {
+  data () {
+    return {
+      checkedList: defaultCheckedList,
+      indeterminate: true,
+      checkAll: false,
+      plainOptions,
+    }
+  },
+  methods: {
+    onChange (checkedList) {
+      this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
+      this.checkAll = checkedList.length === plainOptions.length
+    },
+    onCheckAllChange (e) {
+      Object.assign(this, {
+        checkedList: e.target.checked ? plainOptions : [],
+        indeterminate: false,
+        checkAll: e.target.checked,
+      })
+    },
+  },
+  components: {
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
+  },
+}
+</script>
diff --git a/components/checkbox/demo/controller.vue b/components/checkbox/demo/controller.vue
new file mode 100644
index 000000000..825ff1fd4
--- /dev/null
+++ b/components/checkbox/demo/controller.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Checkbox @change="onChange">Checkbox</Checkbox>
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.checked}`)
+    },
+  },
+  components: {
+    Checkbox,
+  },
+}
+</script>
diff --git a/components/checkbox/demo/disabled.vue b/components/checkbox/demo/disabled.vue
new file mode 100644
index 000000000..3bcf0837c
--- /dev/null
+++ b/components/checkbox/demo/disabled.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <Checkbox :defaultChecked="false" disabled />
+    <br />
+    <Checkbox defaultChecked disabled />
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+export default {
+  components: {
+    Checkbox,
+  },
+}
+</script>
diff --git a/components/checkbox/demo/group.vue b/components/checkbox/demo/group.vue
new file mode 100644
index 000000000..f037068aa
--- /dev/null
+++ b/components/checkbox/demo/group.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <CheckboxGroup :options="plainOptions" v-model="value" @change="onChange" />
+    <br />
+    <CheckboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
+    <br />
+    <CheckboxGroup :options="options" :defaultValue="['Pear']" @change="onChange" />
+    <br />
+    <CheckboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+const plainOptions = ['Apple', 'Pear', 'Orange']
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+]
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+]
+export default {
+  data () {
+    return {
+      plainOptions,
+      options,
+      optionsWithDisabled,
+      value: [],
+    }
+  },
+  methods: {
+    onChange (checkedValues) {
+      console.log('checked = ', checkedValues)
+      console.log('value = ', this.value)
+    },
+  },
+  components: {
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
+  },
+}
+</script>
diff --git a/components/checkbox/demo/layout.vue b/components/checkbox/demo/layout.vue
new file mode 100644
index 000000000..825ff1fd4
--- /dev/null
+++ b/components/checkbox/demo/layout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Checkbox @change="onChange">Checkbox</Checkbox>
+  </div>
+</template>
+<script>
+import { Checkbox } from 'antd'
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.checked}`)
+    },
+  },
+  components: {
+    Checkbox,
+  },
+}
+</script>
diff --git a/components/radio/Group.vue b/components/radio/Group.vue
index 9391090e9..0eba0f5ee 100644
--- a/components/radio/Group.vue
+++ b/components/radio/Group.vue
@@ -59,7 +59,7 @@ export default {
         this.stateValue = targetValue
       }
       this.$emit('input', targetValue)
-      this.$emit('change', targetValue)
+      this.$emit('change', event)
     },
     setChildRadio (children = []) {
       const { options, $slots, stateValue } = this
diff --git a/components/style.js b/components/style.js
new file mode 100644
index 000000000..fd37c82f3
--- /dev/null
+++ b/components/style.js
@@ -0,0 +1,4 @@
+import './button/style'
+import './icon/style'
+import './radio/style'
+import './checkbox/style'
diff --git a/examples/button.vue b/examples/button.vue
deleted file mode 100644
index edfc45114..000000000
--- a/examples/button.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <AntButton :type="this.type" @click="handleClick" class="test">
-      primary
-    </AntButton>
-    <AntButton @mouseover="handleClick" @mouseout="handleClick">Default</AntButton>
-    <AntButton type="dashed">Dashed</AntButton>
-    <AntButton type="danger">Danger</AntButton>
-    <br />
-    <AntButton type="primary" shape="circle" icon="search" />
-    <AntButton type="primary" icon="search">Search</AntButton>
-    <AntButton shape="circle" icon="search" />
-    <AntButton icon="search">Search</AntButton>
-    <br />
-    <AntButton shape="circle" icon="search" />
-    <AntButton icon="search">Search</AntButton>
-    <AntButton type="dashed" shape="circle" icon="search" />
-    <AntButton type="dashed" icon="search">Search</AntButton>
-    <div>
-      <AntButton type="primary">Primary</AntButton>
-      <AntButton type="primary" disabled>Primary(disabled)</AntButton>
-      <br />
-      <AntButton>Default</AntButton>
-      <AntButton disabled>Default(disabled)</AntButton>
-      <br />
-      <AntButton>Ghost</AntButton>
-      <AntButton disabled>Ghost(disabled)</AntButton>
-      <br />
-      <AntButton type="dashed">Dashed</AntButton>
-      <AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
-    </div>
-    <div :style="{background: 'rgb(190, 200, 200)', padding: '26px 16px 16px'}">
-      <AntButton type="primary" ghost>Primary</AntButton>
-      <AntButton ghost>Default</AntButton>
-      <AntButton type="dashed" ghost>Dashed</AntButton>
-      <AntButton type="danger" ghost>danger</AntButton>
-    </div>
-    <div>
-      <AntButton type="primary" loading>
-        Loading
-      </AntButton>
-      <AntButton type="primary" size="small" loading>
-        Loading
-      </AntButton>
-      <br />
-      <AntButton type="primary">
-        Click me!
-      </AntButton>
-      <AntButton type="primary" icon="poweroff">
-        Click me!
-      </AntButton>
-      <br />
-      <AntButton shape="circle" loading />
-      <AntButton type="primary" shape="circle" loading />
-    </div>
-    <div>
-      <ButtonGroup>
-        <AntButton>Cancel</AntButton>
-        <AntButton type="primary">OK</AntButton>
-      </ButtonGroup>
-      <ButtonGroup size="large">
-        <AntButton disabled>L</AntButton>
-        <AntButton disabled>M</AntButton>
-        <AntButton disabled>R</AntButton>
-      </ButtonGroup>
-      <ButtonGroup size="small">
-        <AntButton type="primary">L</AntButton>
-        <AntButton>M</AntButton>
-        <AntButton>M</AntButton>
-        <AntButton type="dashed">R</AntButton>
-      </ButtonGroup>
-    </div>
-  </div>
-</template>
-<script>
-import { Button } from 'antd/index'
-const ButtonGroup = Button.Group
-export default {
-  data () {
-    return {
-      type: 'primary',
-    }
-  },
-  methods: {
-    handleClick (event) {
-      console.log(event)
-      this.type = this.type === 'primary' ? 'danger' : 'primary'
-    },
-  },
-  components: {
-    AntButton: Button,
-    ButtonGroup,
-  },
-}
-</script>
diff --git a/examples/index.js b/examples/index.js
index 4048dc6cc..369d143d3 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -1,3 +1,4 @@
+import 'antd/style.js'
 import './index.less'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
diff --git a/examples/routes.js b/examples/routes.js
index c9304af3b..e34276ff7 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -1,7 +1,7 @@
 const AsyncComp = () => {
   const pathnameArr = window.location.pathname.split('/')
   const com = pathnameArr[1] || 'button'
-  const demo = pathnameArr[2] || 'basic'
+  const demo = pathnameArr[2] || 'index'
   return {
     component: import(`../components/${com}/demo/${demo}.vue`),
   }