diff --git a/README.md b/README.md
index fc0c3baf..4ae1968a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,14 @@
     </a>
 </p>
 
-# iView  [![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) [![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview) [![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview) [![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# iView 
+[![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) 
+[![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview)
+[![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
+[![NPM downloads](https://img.shields.io/npm/dt/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
+![JS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/iview.min.js?compression=gzip&label=gzip%20size:%20JS&style=flat-square)
+![CSS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/styles/iview.css?compression=gzip&label=gzip%20size:%20CSS&style=flat-square)
+[![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 ### A high quality  UI Toolkit built on Vue.js.
 
@@ -82,6 +89,7 @@ Normal browsers and Internet Explorer 9+.
 |  [Aresn](https://github.com/icarusion) |  ![](https://avatars3.githubusercontent.com/u/5370542?v=3&s=60)  |
 |  [jingsam](https://github.com/jingsam) |  ![](https://avatars3.githubusercontent.com/u/1522494?v=3&s=60)  |  
 |  [rijn](https://github.com/rijn)       |  ![](https://avatars2.githubusercontent.com/u/6976367?v=3&s=60)  |
+|  [lcx960324](https://github.com/lcx960324)       |  ![](https://avatars3.githubusercontent.com/u/9768245?v=3&s=60)  |
 |  [GITleonine1989](https://github.com/GITleonine1989) |  ![](https://avatars1.githubusercontent.com/u/7582490?v=3&s=60)  |
 |  [huixisheng](https://github.com/huixisheng) |  ![](https://avatars1.githubusercontent.com/u/1518967?v=3&s=60)  |
 
diff --git a/examples/routers/badge.vue b/examples/routers/badge.vue
index 241e2677..7074ba1b 100644
--- a/examples/routers/badge.vue
+++ b/examples/routers/badge.vue
@@ -14,37 +14,24 @@
 </style>
 <template>
     <div>
-        <Badge count="3">
+        <Badge dot :count="count">
             <a href="#" class="demo-badge"></a>
         </Badge>
-        <Badge dot>
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <Badge dot>
-            <Icon type="ios-bell-outline" size="26"></Icon>
-        </Badge>
-        <Badge dot>
-            <a href="#">可以是一个链接</a>
-        </Badge>
-        <Badge count="100">
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <Badge count="1000" overflow-count="999">
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <br>
-        <Badge count="10"></Badge>
-        <br><br>
-        <Badge count="20" class-name="demo-badge-alone"></Badge>
+        <Button @click="setCount">set count</Button>
     </div>
 </template>
 <script>
     export default {
         props: {},
         data () {
-            return {};
+            return {
+                count: 50
+            };
         },
-        computed: {},
-        methods: {}
+        methods: {
+            setCount () {
+                this.count = 10;
+            }
+        }
     };
 </script>
\ No newline at end of file
diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index d494cf3e..b4b3a82e 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -2,12 +2,7 @@
     <div style="width: 300px;">
         <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
             <Form-item label="爱好" prop="interest">
-                <Checkbox-group v-model="formValidate.interest">
-                    <Checkbox label="吃饭"></Checkbox>
-                    <Checkbox label="睡觉"></Checkbox>
-                    <Checkbox label="跑步"></Checkbox>
-                    <Checkbox label="看电影"></Checkbox>
-                </Checkbox-group>
+                <Input v-model="formValidate.interest" number></Input>
             </Form-item>
             <Form-item>
                 <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
@@ -21,12 +16,15 @@
         data () {
             return {
                 formValidate: {
-                    interest: ['吃饭', '跑步']
+                    interest: ''
                 },
                 ruleValidate: {
                     interest: [
-                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
-                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
+                        {
+                            required: true,
+                            type: 'number',
+                            trigger: 'change'
+                        }
                     ]
                 }
             }
diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index 3d2f8251..8190a9e6 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -1,44 +1,48 @@
 <template>
     <div>
-        <Menu mode="horizontal" :theme="theme1" @on-select="s">
-            <Row type="flex" justify="center" align="middle">
-                <i-col span="12">
-                    <Menu-item name="1">
+        <Row>
+            <i-col span="8">
+            <Menu :theme="theme2">
+                <Submenu name="1">
+                    <template slot="title">
                         <Icon type="ios-paper"></Icon>
                         内容管理
-                    </Menu-item>
-                    <Menu-item name="2">
+                    </template>
+                    <Menu-item name="1-1">文章管理</Menu-item>
+                    <Menu-item name="1-2">评论管理</Menu-item>
+                    <Menu-item name="1-3">举报管理</Menu-item>
+                </Submenu>
+                <Submenu name="2">
+                    <template slot="title">
                         <Icon type="ios-people"></Icon>
                         用户管理
-                    </Menu-item>
-                    <Submenu name="3">
-                        <template slot="title">
-                            <Icon type="stats-bars"></Icon>
-                            统计分析
-                        </template>
-                        <Menu-group title="使用">
-                            <Menu-item name="3-1">新增和启动</Menu-item>
-                            <Menu-item name="3-2">活跃分析</Menu-item>
-                            <Menu-item name="3-3">时段分析</Menu-item>
-                        </Menu-group>
-                        <Menu-group title="留存">
-                            <Menu-item name="3-4">用户留存</Menu-item>
-                            <Menu-item name="3-5">流失用户</Menu-item>
-                        </Menu-group>
-                    </Submenu>
-                    <Menu-item name="4">
-                        <Icon type="settings"></Icon>
-                        综合设置
-                    </Menu-item>
-                </i-col>
-            </Row>
-        </Menu>
+                    </template>
+                    <Menu-item name="2-1">新增用户</Menu-item>
+                    <Menu-item name="2-2">活跃用户</Menu-item>
+                </Submenu>
+                <Submenu name="3">
+                    <template slot="title">
+                        <Icon type="stats-bars"></Icon>
+                        统计分析
+                    </template>
+                    <Menu-group title="使用">
+                        <Menu-item name="3-1">新增和启动</Menu-item>
+                        <Menu-item name="3-2">活跃分析</Menu-item>
+                        <Menu-item name="3-3">时段分析</Menu-item>
+                    </Menu-group>
+                    <Menu-group title="留存">
+                        <Menu-item name="3-4">用户留存</Menu-item>
+                        <Menu-item name="3-5">流失用户</Menu-item>
+                    </Menu-group>
+                </Submenu>
+            </Menu>
+            </i-col>
+        </Row>
         <br>
         <p>切换主题</p>
-        <Radio-group v-model="theme1">
+        <Radio-group v-model="theme2">
             <Radio label="light"></Radio>
             <Radio label="dark"></Radio>
-            <Radio label="primary"></Radio>
         </Radio-group>
     </div>
 </template>
@@ -46,149 +50,8 @@
     export default {
         data () {
             return {
-                theme1: 'light'
-            }
-        },
-        methods: {
-            s (s) {
-                console.log(s)
+                theme2: 'light'
             }
         }
     }
 </script>
-
-
-<!--<template>-->
-    <!--<div>-->
-        <!--<Row>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-        <!--</Row>-->
-        <!--<br>-->
-        <!--<p>切换主题</p>-->
-        <!--<Radio-group v-model="theme2">-->
-            <!--<Radio label="light"></Radio>-->
-            <!--<Radio label="dark"></Radio>-->
-        <!--</Radio-group>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--theme2: 'light'-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--s (s) {-->
-                <!--console.log(s);-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 335473d0..680b5279 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,17 +1,53 @@
 <template>
     <div>
+        {{ val }}
         <Button @click="confirm">标准</Button>
         <Button @click="custom">自定义按钮文字</Button>
         <Button @click="async">异步关闭</Button>
+        <Button type="primary" @click="modal1 = true">显示对话框</Button>
+        <Modal
+                v-model="modal1"
+                title="普通的Modal对话框标题"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                modal1: false,
+                val: ''
+            }
+        },
         methods: {
+            ok () {
+                this.$Message.info('点击了确定');
+            },
+            cancel () {
+                this.$Message.info('点击了取消');
+            },
             confirm () {
                 this.$Modal.confirm({
                     title: '确认对话框标题',
                     content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    render: (h) => {
+                        return h('Input', {
+                            props: {
+                                value: this.val,
+                                autofocus: true
+                            },
+                            on: {
+                                input: (val) => {
+                                    this.val = val;
+                                }
+                            }
+                        }, '一个按钮')
+                    },
                     onOk: () => {
                         this.$Message.info('点击了确定');
                     },
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 6f52f0c1..41b5c4ad 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -84,7 +84,8 @@
                     {
                         name: '张小刚',
                         age: 25,
-                        address: '北京市海淀区西二旗'
+                        address: '北京市海淀区西二旗',
+                        _disableExpand: true
                     },
                     {
                         name: '李小红',
diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 72dd6500..ea1f6be8 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,6 +1,6 @@
 <template>
-    <Tabs value="name1" :animated="false">
-        <Tab-pane label="标签一" name="name1">
+    <Tabs value="name1" :animated="true">
+        <Tab-pane :label="label1" name="name1">
             <Table :columns="columns1" :data="data1"></Table>
         </Tab-pane>
         <Tab-pane label="标签二" name="name2">
@@ -15,6 +15,12 @@
     export default {
         data () {
             return {
+                label1: (h) => {
+                    return h('div', [
+                        h('span', '标签一'),
+                        h('Button', 'button')
+                    ]);
+                },
                 columns1: [
                     {
                         title: '姓名',
diff --git a/package.json b/package.json
index 18419777..38d09bdb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "2.0.0-rc.15",
+  "version": "2.0.0-rc.16",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",
diff --git a/src/components/badge/badge.vue b/src/components/badge/badge.vue
index cc1880d6..688b4626 100644
--- a/src/components/badge/badge.vue
+++ b/src/components/badge/badge.vue
@@ -61,17 +61,9 @@
                 }
 
                 return status;
-            }
-        },
-        data () {
-            return {
-                alone: false
-            };
-        },
-        mounted () {
-            const child_length = this.$refs.badge.children.length;
-            if (child_length === 1) {
-                this.alone = true;
+            },
+            alone () {
+                return this.$slots.default === undefined;
             }
         }
     };
diff --git a/src/components/base/collapse-transition.js b/src/components/base/collapse-transition.js
new file mode 100644
index 00000000..4c3c43dc
--- /dev/null
+++ b/src/components/base/collapse-transition.js
@@ -0,0 +1,79 @@
+// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
+
+import { addClass, removeClass } from '../../utils/assist';
+
+const Transition = {
+    beforeEnter(el) {
+        addClass(el, 'collapse-transition');
+        if (!el.dataset) el.dataset = {};
+
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+        el.style.height = '0';
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+    },
+
+    enter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+            el.style.height = el.scrollHeight + 'px';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        } else {
+            el.style.height = '';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+
+        el.style.overflow = 'hidden';
+    },
+
+    afterEnter(el) {
+        // for safari: remove class then reset height is necessary
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+    },
+
+    beforeLeave(el) {
+        if (!el.dataset) el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+
+        el.style.height = el.scrollHeight + 'px';
+        el.style.overflow = 'hidden';
+    },
+
+    leave(el) {
+        if (el.scrollHeight !== 0) {
+            // for safari: add class after set height, or it will jump to zero height suddenly, weired
+            addClass(el, 'collapse-transition');
+            el.style.height = 0;
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+        }
+    },
+
+    afterLeave(el) {
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+};
+
+export default {
+    name: 'CollapseTransition',
+    functional: true,
+    render(h, { children }) {
+        const data = {
+            on: Transition
+        };
+
+        return h('transition', data, children);
+    }
+};
diff --git a/src/components/base/render.vue b/src/components/base/render.vue
new file mode 100644
index 00000000..7f2209c4
--- /dev/null
+++ b/src/components/base/render.vue
@@ -0,0 +1,30 @@
+<template>
+    <div ref="cell"></div>
+</template>
+<script>
+    import Vue from 'vue';
+    export default {
+        name: 'RenderCell',
+        props: {
+            render: Function
+        },
+        methods: {
+            compile () {
+                if (this.render) {
+                    this.$el.innerHTML = '';
+                    const component = new Vue({
+                        functional: true,
+                        render: (h) => {
+                            return this.render(h);
+                        }
+                    });
+                    const Cell = component.$mount();
+                    this.$refs.cell.appendChild(Cell.$el);
+                }
+            }
+        },
+        mounted () {
+            this.compile();
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 5bc52c2e..9f633f05 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -105,7 +105,7 @@
                 this.$emit('input', checked);
 
                 if (this.group) {
-                    this.$parent.change(this.model);
+                    this.parent.change(this.model);
                 } else {
                     this.$emit('on-change', checked);
                     this.dispatch('FormItem', 'on-form-change', checked);
diff --git a/src/components/collapse/panel.vue b/src/components/collapse/panel.vue
index f6c0ae0f..80c955ae 100644
--- a/src/components/collapse/panel.vue
+++ b/src/components/collapse/panel.vue
@@ -4,18 +4,21 @@
             <Icon type="arrow-right-b"></Icon>
             <slot></slot>
         </div>
-        <div :class="contentClasses" v-show="isActive">
-            <div :class="boxClasses"><slot name="content"></slot></div>
-        </div>
+        <collapse-transition>
+            <div :class="contentClasses" v-show="isActive">
+                <div :class="boxClasses"><slot name="content"></slot></div>
+            </div>
+        </collapse-transition>
     </div>
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     const prefixCls = 'ivu-collapse';
 
     export default {
         name: 'Panel',
-        components: { Icon },
+        components: { Icon, CollapseTransition },
         props: {
             name: {
                 type: String
diff --git a/src/components/loading-bar/loading-bar.js b/src/components/loading-bar/loading-bar.js
index eb30043f..deea7d3f 100644
--- a/src/components/loading-bar/loading-bar.js
+++ b/src/components/loading-bar/loading-bar.js
@@ -31,9 +31,7 @@ LoadingBar.newInstance = properties => {
         },
         component: loading_bar,
         destroy () {
-            setTimeout(function() {
-                document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0].parentElement);
-            }, 500);
+            document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
         }
     };
 };
diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue
index b0cba7db..1fcdc55b 100644
--- a/src/components/menu/submenu.vue
+++ b/src/components/menu/submenu.vue
@@ -4,7 +4,9 @@
             <slot name="title"></slot>
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
-        <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
+        <collapse-transition v-if="mode === 'vertical'">
+            <ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
+        </collapse-transition>
         <transition name="slide-up" v-else>
             <Drop
                 v-show="opened"
@@ -17,6 +19,7 @@
 <script>
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     import { getStyle, findComponentUpward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -25,7 +28,7 @@
     export default {
         name: 'Submenu',
         mixins: [ Emitter ],
-        components: { Icon, Drop },
+        components: { Icon, Drop, CollapseTransition },
         props: {
             name: {
                 type: [String, Number],
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index edef2fc1..31f858c6 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -8,31 +8,6 @@ const prefixCls = 'ivu-modal-confirm';
 Modal.newInstance = properties => {
     const _props = properties || {};
 
-    // let props = '';
-    // Object.keys(_props).forEach(prop => {
-    //     props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
-    // });
-    //
-    // const div = document.createElement('div');
-    // div.innerHTML = `
-    //     <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
-    //         <div class="${prefixCls}">
-    //             <div class="${prefixCls}-head">
-    //                 <div class="${prefixCls}-head-title" v-html="title"></div>
-    //             </div>
-    //             <div class="${prefixCls}-body">
-    //                 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
-    //                 <div v-html="body"></div>
-    //             </div>
-    //             <div class="${prefixCls}-footer">
-    //                 <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
-    //                 <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
-    //             </div>
-    //         </div>
-    //     </Modal>
-    // `;
-    // document.body.appendChild(div);
-
     const Instance = new Vue({
         mixins: [ Locale ],
         data: Object.assign({}, _props, {
@@ -73,6 +48,35 @@ Modal.newInstance = properties => {
                 }
             }, this.localeOkText));
 
+            // render content
+            let body_render;
+            if (this.render) {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body ${prefixCls}-body-render`
+                    }
+                }, [this.render(h)]);
+            } else {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body`
+                    }
+                }, [
+                    h('div', {
+                        class: this.iconTypeCls
+                    }, [
+                        h('i', {
+                            class: this.iconNameCls
+                        })
+                    ]),
+                    h('div', {
+                        domProps: {
+                            innerHTML: this.body
+                        }
+                    })
+                ]);
+            }
+
             return h(Modal, {
                 props: Object.assign({}, _props, {
                     width: this.width,
@@ -106,24 +110,7 @@ Modal.newInstance = properties => {
                             }
                         })
                     ]),
-                    h('div', {
-                        attrs: {
-                            class: `${prefixCls}-body`
-                        }
-                    }, [
-                        h('div', {
-                            class: this.iconTypeCls
-                        }, [
-                            h('i', {
-                                class: this.iconNameCls
-                            })
-                        ]),
-                        h('div', {
-                            domProps: {
-                                innerHTML: this.body
-                            }
-                        })
-                    ]),
+                    body_render,
                     h('div', {
                         attrs: {
                             class: `${prefixCls}-footer`
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index a817fdfd..9fc4c809 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -2,18 +2,20 @@ import Modal from './confirm';
 
 let modalInstance;
 
-function getModalInstance () {
+function getModalInstance (render = undefined) {
     modalInstance = modalInstance || Modal.newInstance({
         closable: false,
         maskClosable: false,
-        footerHide: true
+        footerHide: true,
+        render: render
     });
 
     return modalInstance;
 }
 
 function confirm (options) {
-    let instance  = getModalInstance();
+    const render = ('render' in options) ? options.render : undefined;
+    let instance  = getModalInstance(render);
 
     options.onRemove = function () {
         modalInstance = null;
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 7840e9bb..b27b6ac6 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-transfer-dom>
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" @click="mask"></div>
         </transition>
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 50f5a3b3..abd61bc9 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -5,7 +5,7 @@
             <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
-        <template v-if="renderType === 'expand'">
+        <template v-if="renderType === 'expand' && !row._disableExpand">
             <div :class="expandCls" @click="toggleExpand">
                 <Icon type="ios-arrow-right"></Icon>
             </div>
diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue
index 07f4c82a..234c3ee7 100644
--- a/src/components/tabs/pane.vue
+++ b/src/components/tabs/pane.vue
@@ -11,7 +11,7 @@
                 type: String
             },
             label: {
-                type: String,
+                type: [String, Function],
                 default: ''
             },
             icon: {
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index cc882acc..30f8a293 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -8,7 +8,8 @@
                             <div :class="barClasses" :style="barStyle"></div>
                             <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
-                                {{ item.label }}
+                                <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
+                                <template v-else>{{ item.label }}</template>
                                 <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
                             </div>
                         </div>
@@ -22,6 +23,7 @@
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import Render from '../base/render.vue';
     import { oneOf, getStyle } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -30,7 +32,7 @@
     export default {
         name: 'Tabs',
         mixins: [ Emitter ],
-        components: { Icon },
+        components: { Icon, Render },
         props: {
             value: {
                 type: [String, Number]
@@ -128,6 +130,7 @@
                 this.navList = [];
                 this.getTabs().forEach((pane, index) => {
                     this.navList.push({
+                        labelType: typeof pane.label,
                         label: pane.label,
                         icon: pane.icon || '',
                         name: pane.currentName || index,
diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue
index 4c7be821..1ecfd3fa 100644
--- a/src/components/tree/node.vue
+++ b/src/components/tree/node.vue
@@ -1,32 +1,33 @@
 <template>
-    <transition name="slide-up">
+    <collapse-transition>
         <ul :class="classes" v-show="visible">
             <li>
                 <span :class="arrowClasses" @click="handleExpand">
                     <Icon type="arrow-right-b"></Icon>
                 </span>
                 <Checkbox
-                    v-if="showCheckbox"
-                    :value="data.checked"
-                    :indeterminate="indeterminate"
-                    :disabled="data.disabled || data.disableCheckbox"
-                    @click.native.prevent="handleCheck"></Checkbox>
+                        v-if="showCheckbox"
+                        :value="data.checked"
+                        :indeterminate="indeterminate"
+                        :disabled="data.disabled || data.disableCheckbox"
+                        @click.native.prevent="handleCheck"></Checkbox>
                 <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
                 <Tree-node
-                    v-for="item in data.children"
-                    :key="item"
-                    :data="item"
-                    :visible="data.expand"
-                    :multiple="multiple"
-                    :show-checkbox="showCheckbox">
+                        v-for="item in data.children"
+                        :key="item"
+                        :data="item"
+                        :visible="data.expand"
+                        :multiple="multiple"
+                        :show-checkbox="showCheckbox">
                 </Tree-node>
             </li>
         </ul>
-    </transition>
+    </collapse-transition>
 </template>
 <script>
     import Checkbox from '../checkbox/checkbox.vue';
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     import Emitter from '../../mixins/emitter';
     import { findComponentsDownward } from '../../utils/assist';
 
@@ -35,7 +36,7 @@
     export default {
         name: 'TreeNode',
         mixins: [ Emitter ],
-        components: { Checkbox, Icon },
+        components: { Checkbox, Icon, CollapseTransition },
         props: {
             data: {
                 type: Object,
diff --git a/src/directives/transfer-dom.js b/src/directives/transfer-dom.js
index d1357b96..76e6012e 100644
--- a/src/directives/transfer-dom.js
+++ b/src/directives/transfer-dom.js
@@ -18,6 +18,7 @@ const directive = {
     inserted (el, { value }, vnode) {
         el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
         const parentNode = el.parentNode;
+        if (!parentNode) return;
         const home = document.createComment('');
         let hasMovedOut = false;
 
@@ -38,6 +39,7 @@ const directive = {
     componentUpdated (el, { value }) {
         // need to make sure children are done updating (vs. `update`)
         const ref$1 = el.__transferDomData;
+        if (!ref$1) return;
         // homes.get(el)
         const parentNode = ref$1.parentNode;
         const home = ref$1.home;
@@ -59,7 +61,9 @@ const directive = {
         }
     },
     unbind: function unbind (el, binding) {
-        el.className = el.className.replace('v-transfer-dom', '')
+        el.className = el.className.replace('v-transfer-dom', '');
+        const ref$1 = el.__transferDomData;
+        if (!ref$1) return;
         if (el.__transferDomData.hasMovedOut === true) {
             el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
         }
diff --git a/src/locale/lang/fr-FR.js b/src/locale/lang/fr-FR.js
new file mode 100644
index 00000000..f31ef297
--- /dev/null
+++ b/src/locale/lang/fr-FR.js
@@ -0,0 +1,96 @@
+export default {
+    i: {
+        select: {
+            placeholder: 'Sélectionnez',
+            noMatch: 'Aucun résultat',
+            loading: 'Chargement'
+        },
+        table: {
+            noDataText: 'Aucune donnée',
+            noFilteredDataText: 'No filter data',
+            confirmFilter: 'Confirmez',
+            resetFilter: 'Reset',
+            clearFilter: 'Tout'
+        },
+        datepicker: {
+            selectDate: 'Sélectionnez une date',
+            selectTime: 'Sélectionnez une heure',
+            startTime: 'Heure de début',
+            endTime: 'Heure de fin',
+            clear: 'Annuler',
+            ok: 'OK',
+            month: '',
+            month1: 'Janvier',
+            month2: 'Février',
+            month3: 'Mars',
+            month4: 'Avril',
+            month5: 'Mai',
+            month6: 'Juin',
+            month7: 'Juillet',
+            month8: 'Août',
+            month9: 'Septembre',
+            month10: 'Octobre',
+            month11: 'Novembre',
+            month12: 'Decembre',
+            year: '',
+            weeks: {
+                sun: 'Dim',
+                mon: 'Lun',
+                tue: 'Mar',
+                wed: 'Mer',
+                thu: 'Jeu',
+                fri: 'Ven',
+                sat: 'Sam'
+            },
+            months: {
+                m1: 'Jan',
+                m2: 'Fev',
+                m3: 'Mar',
+                m4: 'Avr',
+                m5: 'Mai',
+                m6: 'Jun',
+                m7: 'Jul',
+                m8: 'Aoû',
+                m9: 'Sep',
+                m10: 'Oct',
+                m11: 'Nov',
+                m12: 'Déc'
+            }
+        },
+        transfer: {
+            titles: {
+                source: 'Source',
+                target: 'Cible'
+            },
+            filterPlaceholder: 'Recherche',
+            notFoundText: 'Pas de résultat'
+        },
+        modal: {
+            okText: 'OK',
+            cancelText: 'Annuler'
+        },
+        poptip: {
+            okText: 'OK',
+            cancelText: 'Annuler'
+        },
+        page: {
+            prev: 'Page Précédente',
+            next: 'Page Suivante',
+            total: 'Total',
+            item: 'élément',
+            items: 'éléments',
+            prev5: '5 Pages en Avant',
+            next5: '5 Pages en Arrière',
+            page: '/page',
+            goto: 'Aller à',
+            p: ''
+        },
+        rate: {
+            star: 'Étoile',
+            stars: 'Étoiles'
+        },
+        tree: {
+            emptyText: 'Aucune donnée'
+        }
+    }
+};
diff --git a/src/styles/animation/index.less b/src/styles/animation/index.less
index 66033203..116f9b69 100644
--- a/src/styles/animation/index.less
+++ b/src/styles/animation/index.less
@@ -25,4 +25,8 @@
 @import "fade";
 @import "move";
 @import "ease";
-@import "slide";
\ No newline at end of file
+@import "slide";
+
+.collapse-transition {
+    transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
+}
\ No newline at end of file
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 6728b3c6..c68e0a11 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -98,6 +98,11 @@
         color: @text-color;
         position: relative;
 
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
+
         &-icon {
             font-size: 36px;
             position: absolute;
diff --git a/src/utils/assist.js b/src/utils/assist.js
index daabffd7..71ece1cf 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -232,4 +232,66 @@ function findComponentsDownward (context, componentName, components = []) {
     }
     return components;
 }
-export {findComponentsDownward};
\ No newline at end of file
+export {findComponentsDownward};
+
+/* istanbul ignore next */
+const trim = function(string) {
+    return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+    if (!el || !cls) return false;
+    if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+    if (el.classList) {
+        return el.classList.contains(cls);
+    } else {
+        return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+    }
+}
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+    if (!el) return;
+    let curClass = el.className;
+    const classes = (cls || '').split(' ');
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.add(clsName);
+        } else {
+            if (!hasClass(el, clsName)) {
+                curClass += ' ' + clsName;
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = curClass;
+    }
+}
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+    if (!el || !cls) return;
+    const classes = cls.split(' ');
+    let curClass = ' ' + el.className + ' ';
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.remove(clsName);
+        } else {
+            if (hasClass(el, clsName)) {
+                curClass = curClass.replace(' ' + clsName + ' ', ' ');
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = trim(curClass);
+    }
+}
\ No newline at end of file