diff --git a/components/checkbox/demo/layout.vue b/components/checkbox/demo/layout.vue
index c4e4708d0..9da57ce8e 100644
--- a/components/checkbox/demo/layout.vue
+++ b/components/checkbox/demo/layout.vue
@@ -1,12 +1,12 @@
 <template>
   <CheckboxGroup @change="onChange">
-    <Row>
-      <Col :span="8"><Checkbox value="A">A</Checkbox></Col>
-      <Col :span="8"><Checkbox value="B">B</Checkbox></Col>
-      <Col :span="8"><Checkbox value="C">C</Checkbox></Col>
-      <Col :span="8"><Checkbox value="D">D</Checkbox></Col>
-      <Col :span="8"><Checkbox value="E">E</Checkbox></Col>
-    </Row>
+    <AntRow>
+      <AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
+      <AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
+      <AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
+      <AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
+      <AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
+    </AntRow>
   </CheckboxGroup>
 </template>
 <script>
@@ -19,8 +19,8 @@ export default {
   },
   components: {
     Checkbox,
-    Row,
-    Col,
+    AntRow: Row,
+    AntCol: Col,
     CheckboxGroup: Checkbox.Group,
   },
 }
diff --git a/components/grid/col.vue b/components/grid/Col.vue
similarity index 89%
rename from components/grid/col.vue
rename to components/grid/Col.vue
index 6a01bacfb..b35e35882 100644
--- a/components/grid/col.vue
+++ b/components/grid/Col.vue
@@ -10,7 +10,7 @@
   }
 
   export default {
-    name: 'Col',
+    name: 'Ant-Col',
     props: {
       prefixCls: {
         'default': 'ant-col',
@@ -27,6 +27,9 @@
       lg: [Number, Object],
       xl: [Number, Object],
     },
+    inject: {
+      parentRow: { 'default': undefined },
+    },
     computed: {
       classes () {
         const { prefixCls, span, order, offset, push, pull } = this
@@ -59,12 +62,8 @@
         }
       },
       gutter () {
-        let parent = this.$parent
-        while (parent && parent.$options.name !== 'Row') {
-          console.info(parent.$options.name)
-          parent = parent.$parent
-        }
-        return parent ? parent.gutter : 0
+        const parent = this.parentRow
+        return parent ? +parent.gutter : 0
       },
     },
     render (h) {
@@ -73,7 +72,6 @@
         style.paddingLeft = this.gutter / 2 + 'px'
         style.paddingRight = style.paddingLeft
       }
-      console.info(style)
       // why only unnamed slots
       return h('div', {
         'class': this.classes,
diff --git a/components/grid/row.vue b/components/grid/Row.vue
similarity index 95%
rename from components/grid/row.vue
rename to components/grid/Row.vue
index 65f76f579..df1ee6d7a 100644
--- a/components/grid/row.vue
+++ b/components/grid/Row.vue
@@ -5,7 +5,7 @@
 </template>
 <script>
   export default {
-    name: 'Row',
+    name: 'Ant-Row',
     props: {
       prefixCls: {
         'default': 'ant-row',
@@ -47,6 +47,11 @@
         },
       }
     },
+    provide() {
+      return {
+        parentRow: this,
+      }
+    },
     computed: {
       classes () {
         const { prefixCls, type, align, justify } = this
diff --git a/components/grid/demo/align.vue b/components/grid/demo/align.vue
new file mode 100644
index 000000000..403634e5c
--- /dev/null
+++ b/components/grid/demo/align.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="grid">
+    <ant-row type="flex" justify="center" align="top">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+
+    <p>Align Center</p>
+    <ant-row type="flex" justify="space-around" align="middle">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+
+    <p>Align Bottom</p>
+    <ant-row type="flex" justify="space-between" align="bottom">
+      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
+      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  const DemoBox = Vue.component('DemoBox', {
+    props: ['value'],
+    template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
+  })
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col,
+      DemoBox,
+    },
+  }
+
+
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+  .height-100 {
+    height: 100px;
+  }
+</style>
diff --git a/components/grid/demo/basic.vue b/components/grid/demo/basic.vue
new file mode 100644
index 000000000..dd6b80617
--- /dev/null
+++ b/components/grid/demo/basic.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="basic">
+    <ant-row>
+      <ant-col class="color1" :span="24" >100%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="6" >25%</ant-col>
+      <ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="8" >33.33%</ant-col>
+      <ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="12" >50%</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="18" >66.66%</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .basic {
+    background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
+  }
+  .basic div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .show-block {
+    margin: 20px 0;
+  }
+  .color1 {
+    background: rgba(0, 191, 255, 0.52);
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/complex.vue b/components/grid/demo/complex.vue
new file mode 100644
index 000000000..490bbb4c7
--- /dev/null
+++ b/components/grid/demo/complex.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
+      <ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
+      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/flex-order.vue b/components/grid/demo/flex-order.vue
new file mode 100644
index 000000000..2f680b396
--- /dev/null
+++ b/components/grid/demo/flex-order.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="grid">
+    <ant-row type="flex">
+      <ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
+      <ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
+      <ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
+      <ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/flex.vue b/components/grid/demo/flex.vue
new file mode 100644
index 000000000..d7deb1566
--- /dev/null
+++ b/components/grid/demo/flex.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="grid">
+    <p>sub-element align left</p>
+    <ant-row type="flex" justify="start">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align center</p>
+    <ant-row type="flex" justify="center">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align right</p>
+    <ant-row type="flex" justify="end">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element monospaced arrangement</p>
+    <ant-row type="flex" justify="space-between">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+
+    <p>sub-element align full</p>
+    <ant-row type="flex" justify="space-around">
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+      <ant-col :span="4" class="color1">col-4</ant-col>
+      <ant-col :span="4" class="color2">col-4</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/flexible.vue b/components/grid/demo/flexible.vue
new file mode 100644
index 000000000..96a5c6a01
--- /dev/null
+++ b/components/grid/demo/flexible.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
+      <ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
+      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/gutter.vue b/components/grid/demo/gutter.vue
new file mode 100644
index 000000000..b9ce3d289
--- /dev/null
+++ b/components/grid/demo/gutter.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="grid" style="overflow: hidden;">
+    <ant-row :gutter="24">
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue
new file mode 100644
index 000000000..9d25299d3
--- /dev/null
+++ b/components/grid/demo/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="topLevel">
+    <h1>基础布局</h1>
+    <basic/>
+    <h1>恩。基础</h1>
+    <layout/>
+    <h1>区块间隔</h1>
+    <gutter/>
+    <h1>偏移</h1>
+    <offset/>
+    <h1>栅格排序</h1>
+    <pull/>
+    <h1>FLEX</h1>
+    <flex/>
+    <h1>对齐</h1>
+    <align/>
+    <h1>Flex排序</h1>
+    <flex-order/>
+    <h1>响应式设计</h1>
+    <flexible/>
+    <h1>复杂一点</h1>
+    <complex/>
+  </div>
+</template>
+<script>
+import { Grid } from 'antd'
+const { Row, Col } = Grid
+import Basic from './basic.vue'
+import Layout from './layout.vue'
+import Gutter from './gutter.vue'
+import Offset from './offset.vue'
+import Pull from './pull.vue'
+import Flex from './flex.vue'
+import Align from './align.vue'
+import FlexOrder from './flex-order.vue'
+import Flexible from './flexible.vue'
+import Complex from './complex.vue'
+export default {
+  components: {
+    AntRow: Row,
+    AntCol: Col,
+    Basic,
+    Layout,
+    Gutter,
+    Offset,
+    Pull,
+    Flex,
+    Align,
+    FlexOrder,
+    Flexible,
+    Complex,
+  },
+}
+</script>
+<style lang="less">
+  .topLevel .ant-row{
+    margin: 10px 0;
+  }
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .show-block {
+    margin: 20px 0;
+  }
+  .color1 {
+    background: #00bfff;
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/layout.vue b/components/grid/demo/layout.vue
new file mode 100644
index 000000000..58ca44de9
--- /dev/null
+++ b/components/grid/demo/layout.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col class="color1" :span="12" >col-12</ant-col>
+      <ant-col class="color2" :span="12" >col-12</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="8" >col-8</ant-col>
+      <ant-col class="color2" :span="8" >col-8</ant-col>
+      <ant-col class="color1" :span="8" >col-8</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col class="color1" :span="6" >col-6</ant-col>
+      <ant-col class="color2" :span="6" >col-6</ant-col>
+      <ant-col class="color1" :span="6" >col-6</ant-col>
+      <ant-col class="color2" :span="6" >col-6</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/offset.vue b/components/grid/demo/offset.vue
new file mode 100644
index 000000000..293141411
--- /dev/null
+++ b/components/grid/demo/offset.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :span="8" class="color1">col-8</ant-col>
+      <ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
+      <ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
+    </ant-row>
+    <ant-row>
+      <ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/demo/pull.vue b/components/grid/demo/pull.vue
new file mode 100644
index 000000000..1b249d074
--- /dev/null
+++ b/components/grid/demo/pull.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="grid">
+    <ant-row>
+      <ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
+      <ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
+    </ant-row>
+  </div>
+</template>
+<script>
+  import { Grid } from 'antd'
+  const { Row, Col } = Grid
+  export default {
+    components: {
+      AntRow: Row,
+      AntCol: Col
+    },
+  }
+</script>
+<style lang="less">
+  .grid div {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+  }
+  .color1 {
+    background: rgb(0, 191, 255);
+    color: white;
+  }
+  .color2 {
+    background: #0e77ca;
+    color: white;
+  }
+</style>
diff --git a/components/grid/index.js b/components/grid/index.js
index 352a384d8..cd65231b0 100644
--- a/components/grid/index.js
+++ b/components/grid/index.js
@@ -1,7 +1,6 @@
-import Row from './row.vue'
-import Col from './col.vue'
+import Row from './Row.vue'
+import Col from './Col.vue'
 
 export default {
   Col, Row,
 }
-
diff --git a/components/index.js b/components/index.js
index ca29ac8f5..be9cf66de 100644
--- a/components/index.js
+++ b/components/index.js
@@ -12,6 +12,6 @@ export { default as Rate } from './rate'
 
 export { default as ToolTip } from './tooltip'
 
-export { default as Row } from './grid/row'
+export { default as Row } from './grid/Row'
 
-export { default as Col } from './grid/col'
+export { default as Col } from './grid/Col'
diff --git a/components/switch/Switch.vue b/components/switch/Switch.vue
new file mode 100644
index 000000000..3f3a22ab5
--- /dev/null
+++ b/components/switch/Switch.vue
@@ -0,0 +1,87 @@
+<template>
+  <span>
+    <span class={`${prefixCls}-inner`}>
+      <component></component>
+    </span>
+  </span>
+</template>
+<script>
+export default {
+  name: 'Radio',
+  props: {
+    prefixCls: {
+      default: 'ant-radio',
+      type: String,
+    },
+    defaultChecked: Boolean,
+    checked: { type: Boolean, default: undefined },
+    disabled: Boolean,
+    isGroup: Boolean,
+    value: [String, Number, Boolean],
+    name: String,
+    onGroupChange: Function,
+  },
+  model: {
+    prop: 'checked',
+  },
+  data () {
+    const { checked, defaultChecked } = this
+    return {
+      stateChecked: checked === undefined ? defaultChecked : checked,
+    }
+  },
+  computed: {
+    hasDefaultSlot () {
+      return !!this.$slots.default
+    },
+    classes () {
+      const { prefixCls, disabled, stateChecked } = this
+      return {
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-wrapper-checked`]: stateChecked,
+        [`${prefixCls}-wrapper-disabled`]: disabled,
+      }
+    },
+    checkboxClass () {
+      const { prefixCls, disabled, stateChecked } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-checked`]: stateChecked,
+        [`${prefixCls}-disabled`]: disabled,
+      }
+    },
+  },
+  methods: {
+    handleChange (event) {
+      const targetChecked = event.target.checked
+      const { name, value, checked } = this
+      if (checked === undefined) {
+        this.stateChecked = targetChecked
+      }
+      this.$emit('input', targetChecked)
+      const target = {
+        name,
+        value,
+        checked: targetChecked,
+      }
+      this.$emit('change', {
+        target,
+        stopPropagation () {
+          event.stopPropagation()
+        },
+        preventDefault () {
+          event.preventDefault()
+        },
+      })
+      if (this.isGroup) {
+        this.onGroupChange({ target })
+      }
+    },
+  },
+  watch: {
+    checked (val) {
+      this.stateChecked = val
+    },
+  },
+}
+</script>
diff --git a/components/switch/index.js b/components/switch/index.js
new file mode 100644
index 000000000..54acb541f
--- /dev/null
+++ b/components/switch/index.js
@@ -0,0 +1,2 @@
+import Switch from './Switch.vue'
+export default Switch
diff --git a/components/switch/style/index.js b/components/switch/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/switch/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/switch/style/index.less b/components/switch/style/index.less
new file mode 100644
index 000000000..8d3bcc552
--- /dev/null
+++ b/components/switch/style/index.less
@@ -0,0 +1,126 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@switch-prefix-cls: ~"@{ant-prefix}-switch";
+@switch-duration: .36s;
+
+.@{switch-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: 22px;
+  min-width: 44px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 20px;
+  border: 1px solid transparent;
+  background-color: @disabled-color;
+  cursor: pointer;
+  transition: all @switch-duration;
+  user-select: none;
+
+  &-inner {
+    color: #fff;
+    font-size: @font-size-base;
+    margin-left: 24px;
+    margin-right: 6px;
+    display: block;
+  }
+
+  &:after {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 1px;
+    top: 1px;
+
+    border-radius: 18px;
+    background-color: @component-background;
+    content: " ";
+    cursor: pointer;
+    transition: all @switch-duration @ease-in-out-circ;
+  }
+
+  &:active:after {
+    width: 24px;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+    outline: 0;
+  }
+
+  &:focus:hover {
+    box-shadow: none;
+  }
+
+  &-small {
+    height: 14px;
+    min-width: 28px;
+    line-height: 12px;
+
+    .@{switch-prefix-cls}-inner {
+      margin-left: 18px;
+      margin-right: 3px;
+    }
+
+    &:after {
+      width: 12px;
+      height: 12px;
+      top: 0;
+      left: 0.5px;
+    }
+
+    &:active:after {
+      width: 16px;
+    }
+  }
+
+  &-small&-checked {
+    &:after {
+      left: 100%;
+      margin-left: -12.5px;
+    }
+
+    .@{switch-prefix-cls}-inner {
+      margin-left: 3px;
+      margin-right: 18px;
+    }
+  }
+
+  &-small:active&-checked:after {
+    margin-left: -16.5px;
+  }
+
+  &-checked {
+    background-color: @primary-color;
+
+    .@{switch-prefix-cls}-inner {
+      margin-left: 6px;
+      margin-right: 24px;
+    }
+
+    &:after {
+      left: 100%;
+      margin-left: -19px;
+    }
+
+    &:active:after {
+      margin-left: -25px;
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    background: #f4f4f4;
+
+    &:after {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .@{switch-prefix-cls}-inner {
+      color: @disabled-color;
+    }
+  }
+}
diff --git a/examples/grid.vue b/examples/grid.vue
deleted file mode 100644
index a721853b9..000000000
--- a/examples/grid.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="grid">
-    <div class="show-block">
-      <ant-row gutter="10">
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">1</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">2</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">3</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6">
-          <div :style="style2">4</div>
-        </ant-col>
-      </ant-row>
-    </div>
-    <div class="show-block">
-      <ant-row gutter="10">
-        <ant-col :style="style1" :span="6" :offset="2">
-          <div :style="style2">offset = 2</div>
-        </ant-col>
-        <ant-col :style="style1" :span="6" :offset="2">
-          <div :style="style2">offset = 2</div>
-        </ant-col>
-      </ant-row>
-    </div>
-    <div class="show-block">
-      <ant-row gutter="10" type="flex">
-        <ant-col class="height1 color1" :span="6">
-          <div class="">F</div>
-        </ant-col>
-        <ant-col class="height2 color2" :span="6">
-          <div class="">L</div>
-        </ant-col>
-        <ant-col class="height3 color1" :span="6">
-          <div class="">E</div>
-        </ant-col>
-        <ant-col class="height4 color2" :span="6">
-          <div class="">X</div>
-        </ant-col>
-      </ant-row>
-    </div>
-  </div>
-</template>
-<script>
-import { Grid } from '../components'
-const { Row, Col } = Grid
-export default {
-  data () {
-    return {
-      style1: { height: 40 + 'px' },
-      style2: { background: '#00bfff', height: 40 + 'px' }
-    }
-  },
-  methods: {
-    handleClick (event) {
-      console.log(event)
-      this.type = this.type === 'primary' ? 'danger' : 'primary'
-    },
-  },
-  components: {
-    AntRow: Row,
-    AntCol: Col
-  },
-}
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .height1 {
-    height: 60px;
-  }
-  .height2 {
-    height: 40px;
-  }
-  .height3 {
-    height: 80px;
-  }
-  .height4 {
-    height: 50px;
-  }
-  .color1 {
-    background: #00bfff;
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>