ES6 syntax for demo code

fix antd.notification

components/affix/demo/basic.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Affix = antd.Affix;
+import { Affix, Button } from 'antd';
-var Button = antd.Button;
 
 ReactDOM.render(
   <Affix>

components/affix/demo/offset.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Affix = antd.Affix;
+import { Affix, Button } from 'antd';
-var Button = antd.Button;
 
 ReactDOM.render(
   <Affix offset={75}>

components/alert/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
 ReactDOM.render(<Alert message="成功提示的文案" type="success" />
 , document.getElementById('components-alert-demo-basic'));

components/alert/demo/closable.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
-var onClose = function(e) {
+const onClose = function(e) {
   console.log(e, '我要被关闭啦！');
 };
 

components/alert/demo/close-type.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
-var link = <a href="javascript:;">不再提醒</a>
+const link = <a href="javascript:;">不再提醒</a>;
 
 ReactDOM.render(
 <Alert message="消息提示的文案" type="info" closeText={link} />

components/alert/demo/description.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
 ReactDOM.render(<div>
   <Alert message="成功提示的文案"

components/alert/demo/style.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Alert = antd.Alert;
+import { Alert } from 'antd';
 
 ReactDOM.render(<div>
   <Alert message="成功提示的文案" type="success" />

components/badge/demo/99plus.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
 ReactDOM.render(<div>
   <Badge count="99">

components/badge/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
 ReactDOM.render(
   <Badge count="5">

components/badge/demo/dot.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge, Icon } from 'antd';
-var Icon = antd.Icon;
 
 ReactDOM.render(<div>
   <Badge dot={true}>

components/badge/demo/link.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Badge = antd.Badge;
+import { Badge } from 'antd';
 
 ReactDOM.render(
   <a href="#">

components/breadcrumb/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Breadcrumb = require('antd/lib/breadcrumb');
+import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
   <Breadcrumb>

components/breadcrumb/demo/router.md

@@ -7,13 +7,11 @@
 ---
 
 ````jsx
-var ReactRouter = require('react-router');
+const ReactRouter = require('react-router');
-var Router = ReactRouter.Router;
+let { Router, Route, Link } = ReactRouter;
-var Route = ReactRouter.Route;
+import { Breadcrumb } from 'antd';
-var Link = ReactRouter.Link;
-var Breadcrumb = require('antd').Breadcrumb;
 
-var Apps = React.createClass({
+const Apps = React.createClass({
   render() {
     return <ul className="app-list">
       <li><Link to="/apps/1">应用1</Link></li>
@@ -22,7 +20,7 @@ var Apps = React.createClass({
   }
 });
 
-var Home = React.createClass({
+const Home = React.createClass({
   render() {
     return (<div>
       <div className="demo-nav">

components/breadcrumb/demo/withIcon.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Breadcrumb = require('antd/lib/breadcrumb');
+import { Breadcrumb, Icon } from 'antd';
-var Icon = require('antd').iconfont;
 
 ReactDOM.render(
   <Breadcrumb>

components/button/demo/basic.md

@@ -11,7 +11,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button } from 'antd';
 
 ReactDOM.render(<div>
   <Button type="primary">主按钮</Button>

components/button/demo/button-group.md

@@ -9,9 +9,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button, ButtonGroup, Icon } from 'antd';
-var ButtonGroup = antd.ButtonGroup;
-var Icon = antd.Icon;
 
 ReactDOM.render(<div>
 <h4>基本组合</h4>
@@ -31,7 +29,7 @@ ReactDOM.render(<div>
   <Button>右</Button>
 </ButtonGroup>
 
-<h4>带图标按钮组合 </h4>
+<h4>带图标按钮组合</h4>
 <ButtonGroup>
   <Button type="primary">
     <Icon type="left" />

components/button/demo/icon.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button, Icon } from 'antd';
-var Icon = antd.Icon;
 
 ReactDOM.render(<div>
   <Button type="primary" shape="circle" size="large">

components/button/demo/loading.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button } from 'antd';
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       loading: false

components/button/demo/shape.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button, Icon } from 'antd';
-var Icon = antd.Icon;
 
 ReactDOM.render(<div>
   <Button type="primary" shape="circle" size="large">

components/button/demo/size.md

@@ -9,7 +9,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button } from 'antd';
 
 ReactDOM.render(<div>
   <Button type="primary" size="large">大号按钮</Button>

components/button/demo/status.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { Button } from 'antd';
 
 ReactDOM.render(<div>
   <h4>使用 `disabled` 属性</h4>

components/carousel/demo/autoplay.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
 ReactDOM.render(
   <Carousel autoplay="true">

components/carousel/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
 ReactDOM.render(
   <Carousel>

components/carousel/demo/fade.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
 ReactDOM.render(
   <Carousel effect="fade">

components/carousel/demo/vertical.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Carousel = antd.Carousel;
+import { Carousel } from 'antd';
 
 ReactDOM.render(
   <Carousel vertical="true">

components/checkbox/demo/basic.md

@@ -7,8 +7,9 @@
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
+import { Checkbox } from 'antd';
-var container = document.getElementById('components-checkbox-demo-basic');
+const container = document.getElementById('components-checkbox-demo-basic');
+
 function onChange(e) {
   console.log('checked = ' + e.target.checked);
 }

components/checkbox/demo/controller.md

@@ -7,16 +7,15 @@
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
+import { Checkbox, Button } from 'antd';
-var Button = antd.Button;
+const container = document.getElementById('components-checkbox-demo-controller');
-var container = document.getElementById('components-checkbox-demo-controller');
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       checked: true,
       disabled: false
-    }
+    };
   },
   render() {
     var label = (this.state.checked ? '选中' : '取消') + '-' +

components/checkbox/demo/disable.md

@@ -7,8 +7,8 @@ checkbox 不可用。
 ---
 
 ````jsx
-var Checkbox = antd.Checkbox;
+import { Checkbox } from 'antd';
-var container = document.getElementById('components-checkbox-demo-disable');
+const container = document.getElementById('components-checkbox-demo-disable');
 
 ReactDOM.render(<div>
   <Checkbox defaultChecked={false} disabled={true}/>

components/collapse/demo/accordion.md

@@ -7,10 +7,10 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
+import { Collapse } from 'antd';
-var Panel = Collapse.Panel;
+const Panel = Collapse.Panel;
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.

components/collapse/demo/basic.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
+import { Collapse } from 'antd';
-var Panel = Collapse.Panel;
+const Panel = Collapse.Panel;
 
 function callback(key) {
   console.log(key);
 }
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.

components/collapse/demo/mix.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-var Collapse = antd.Collapse;
+import { Collapse } from 'antd';
-var Panel = Collapse.Panel;
+const Panel = Collapse.Panel;
 
 function callback(key) {
   console.log(key);
 }
 
-var text = `
+const text = `
   A dog is a type of domesticated animal.
   Known for its loyalty and faithfulness,
   it can be found as a welcome guest in many households across the world.

components/datepicker/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
 ReactDOM.render(
   <Datepicker defaultValue="2015-12-12" />

components/datepicker/demo/disabled.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
 ReactDOM.render(
   <Datepicker defaultValue="2015-06-06" disabled={true} />

components/datepicker/demo/formatter.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
 ReactDOM.render(
   <Datepicker defaultValue="2015/01/01" format="yyyy/MM/dd" />

components/datepicker/demo/locale.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       locale: {

components/datepicker/demo/range.md

@@ -9,8 +9,9 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
-var disabledDate = function(current, value) {
+
+const disabledDate = function(current, value) {
   // can not select days after today
   return current.getTime() > Date.now();
 };

components/datepicker/demo/select.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
-var Picker = React.createClass({
+const Picker = React.createClass({
   handleChange: function(value) {
     console.log(new Date(value.getTime()));
   },

components/datepicker/demo/size.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
 ReactDOM.render(
   <div>

components/datepicker/demo/start-end.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
-var DateRange = React.createClass({
+const DateRange = React.createClass({
   getInitialState() {
     return {
       startValue: null,

components/datepicker/demo/time.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Datepicker = antd.Datepicker;
+import { Datepicker } from 'antd';
 
 ReactDOM.render(
   <Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" />

components/dropdown/demo/basic.md

@@ -7,12 +7,9 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Dropdown, Button, Icon } from 'antd';
-var Dropdown = antd.Dropdown;
-var Button = antd.Button;
-var Icon = antd.Icon;
 
-var menu = <Menu>
+const menu = <Menu>
   <Menu.Item>
     <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
   </Menu.Item>

components/dropdown/demo/event.md

@@ -7,15 +7,12 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Dropdown, Button, Icon } from 'antd';
-var Dropdown = antd.Dropdown;
+const onSelect = function ({key}){
-var Button = antd.Button;
-var Icon = antd.Icon;
-var onSelect = function ({key}){
   alert('选中了菜单' + key);
 };
 
-var menu = <Menu onSelect={onSelect}>
+const menu = <Menu onSelect={onSelect}>
   <Menu.Item key="1">第一个菜单项</Menu.Item>
   <Menu.Item key="2">第二个菜单项</Menu.Item>
   <Menu.Item key="3">第三个菜单项</Menu.Item>

components/dropdown/demo/item.md

@@ -7,12 +7,9 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Dropdown, Button, Icon } from 'antd';
-var Dropdown = antd.Dropdown;
-var Button = antd.Button;
-var Icon = antd.Icon;
 
-var menu = <Menu>
+const menu = <Menu>
   <Menu.Item key="0">
     <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
   </Menu.Item>

components/dropdown/demo/trigger.md

@@ -7,12 +7,9 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Dropdown, Button, Icon } from 'antd';
-var Dropdown = antd.Dropdown;
-var Button = antd.Button;
-var Icon = antd.Icon;
 
-var menu = <Menu>
+const menu = <Menu>
   <Menu.Item key="0">
     <a href="http://www.alipay.com/">第一个菜单项</a>
   </Menu.Item>

components/input-number/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var InputNumber = antd.InputNumber;
+import { InputNumber } from 'antd';
 
 function onChange(value) {
   console.log('changed', value);

components/input-number/demo/disabled.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var InputNumber = antd.InputNumber;
+import { InputNumber, Button } from 'antd';
-var Button = antd.Button;
 
 var Test = React.createClass({
   getInitialState() {

components/input-number/demo/size.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var InputNumber = antd.InputNumber;
+import { InputNumber } from 'antd';
 
 function onChange(value) {
   console.log('changed', value);

components/layout/demo/basic.md

@@ -1,6 +1,6 @@
 # 基础布局
 
-- order: 1 
+- order: 1
 
 从堆叠到水平排列。
 
@@ -9,8 +9,7 @@
 ---
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 ReactDOM.render(
   <div>
@@ -41,4 +40,4 @@ ReactDOM.render(
 div.testColClassName {
 	background: rgba(24, 115, 216, 0.9);
 }
-</style>
+</style>

components/layout/demo/flex-align.md

@@ -1,6 +1,6 @@
 # Flex对齐
 
-- order: 5 
+- order: 5
 
 Flex 子元素垂直对齐。
 
@@ -8,8 +8,7 @@ Flex 子元素垂直对齐。
 ---
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 var DemoBox = React.createClass({
   render() {
@@ -30,7 +29,7 @@ ReactDOM.render(
       <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
       <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
     </Row>
-    
+
     <p>居中对齐</p>
     <Row type="flex" justify="space-around" align="middle">
       <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
@@ -38,7 +37,7 @@ ReactDOM.render(
       <Col span="4"><DemoBox value="120">.col-4</DemoBox></Col>
       <Col span="4"><DemoBox value="80">.col-4</DemoBox></Col>
     </Row>
-    
+
     <p>底部对齐</p>
     <Row type="flex" justify="space-between" align="bottom">
       <Col span="4"><DemoBox value="100">.col-4</DemoBox></Col>
@@ -50,6 +49,3 @@ ReactDOM.render(
   document.getElementById('components-layout-demo-flex-align')
 );
 ````
-
-
-

components/layout/demo/flex-order.md

@@ -1,6 +1,6 @@
 # Flex排序
 
-- order: 6 
+- order: 6
 
 通过 Flex 布局的 Order 来改变元素的排序。
 
@@ -9,8 +9,7 @@
 
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 ReactDOM.render(
   <div>
@@ -23,9 +22,4 @@ ReactDOM.render(
   </div>,
   document.getElementById('components-layout-demo-flex-order')
 );
-
 ````
-
-
-
-

components/layout/demo/flex.md

@@ -1,6 +1,6 @@
 # Flex布局
 
-- order: 4 
+- order: 4
 
 Flex 布局基础。
 
@@ -9,8 +9,7 @@ Flex 布局基础。
 ---
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 ReactDOM.render(
   <div>
@@ -21,7 +20,7 @@ ReactDOM.render(
       <Col span="4">.col-4</Col>
       <Col span="4">.col-4</Col>
     </Row>
-    
+
     <p>子元素居中排列</p>
     <Row type="flex" justify="center">
       <Col span="4">.col-4</Col>

components/layout/demo/offset.md

@@ -1,6 +1,6 @@
 # 左右偏移
 
-- order: 2 
+- order: 2
 
 列偏移。
 
@@ -9,8 +9,7 @@
 ---
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 ReactDOM.render(
   <div>
@@ -29,4 +28,3 @@ ReactDOM.render(
   document.getElementById('components-layout-demo-offset')
 );
 ````
-

components/layout/demo/sort.md

@@ -1,6 +1,6 @@
 # 布局排序
 
-- order: 3 
+- order: 3
 
 列排序。
 
@@ -9,8 +9,7 @@
 ---
 
 ````jsx
-var Row = antd.Row;
+import { Row, Col } from 'antd';
-var Col = antd.Col;
 
 ReactDOM.render(
   <div>
@@ -21,4 +20,4 @@ ReactDOM.render(
   </div>,
   document.getElementById('components-layout-demo-sort')
 );
-````
+````

components/menu/demo/horizontal.md

@@ -7,11 +7,10 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Icon } from 'antd';
-var SubMenu = Menu.SubMenu;
+const SubMenu = Menu.SubMenu;
-var Icon = antd.Icon;
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return {
       current: 'mail'
@@ -25,22 +24,22 @@ var App = React.createClass({
   },
   render() {
     return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
-    <Menu.Item key="mail">
+      <Menu.Item key="mail">
-      <Icon type="mail" />导航一
+        <Icon type="mail" />导航一
-    </Menu.Item>
+      </Menu.Item>
-    <Menu.Item key="app">
+      <Menu.Item key="app">
-      <Icon type="appstore" />导航二
+        <Icon type="appstore" />导航二
-    </Menu.Item>
+      </Menu.Item>
-    <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
+      <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
-      <Menu.Item key="setting:1">选项1</Menu.Item>
+        <Menu.Item key="setting:1">选项1</Menu.Item>
-      <Menu.Item key="setting:2">选项2</Menu.Item>
+        <Menu.Item key="setting:2">选项2</Menu.Item>
-      <Menu.Item key="setting:3">选项3</Menu.Item>
+        <Menu.Item key="setting:3">选项3</Menu.Item>
-      <Menu.Item key="setting:4">选项4</Menu.Item>
+        <Menu.Item key="setting:4">选项4</Menu.Item>
-    </SubMenu>
+      </SubMenu>
-    <Menu.Item key="alipay">
+      <Menu.Item key="alipay">
-      <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
+        <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
-    </Menu.Item>
+      </Menu.Item>
-  </Menu>
+    </Menu>;
   }
 });
 

components/menu/demo/sider-current.md

@@ -7,9 +7,8 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Icon } from 'antd';
-var SubMenu = Menu.SubMenu;
+const SubMenu = Menu.SubMenu;
-var Icon = antd.Icon;
 
 var Sider = React.createClass({
   getInitialState() {

components/menu/demo/sider.md

@@ -7,9 +7,8 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Icon } from 'antd';
-var SubMenu = Menu.SubMenu;
+const SubMenu = Menu.SubMenu;
-var Icon = antd.Icon;
 
 var Sider = React.createClass({
   getInitialState() {

components/menu/demo/vertical.md

@@ -7,10 +7,8 @@
 ---
 
 ````jsx
-var Menu = antd.Menu;
+import { Menu, Icon } from 'antd';
-var MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
-var SubMenu = Menu.SubMenu;
-var Icon = antd.Icon;
 
 function handleClick(e) {
   console.log('click', e);
@@ -18,24 +16,24 @@ function handleClick(e) {
 
 ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
   <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
-    <MenuItem key="1">选项1</MenuItem>
+    <Menu.Item key="1">选项1</Menu.Item>
-    <MenuItem key="2">选项2</MenuItem>
+    <Menu.Item key="2">选项2</Menu.Item>
-    <MenuItem key="3">选项3</MenuItem>
+    <Menu.Item key="3">选项3</Menu.Item>
-    <MenuItem key="4">选项4</MenuItem>
+    <Menu.Item key="4">选项4</Menu.Item>
   </SubMenu>
   <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
-    <MenuItem key="5">选项5</MenuItem>
+    <Menu.Item key="5">选项5</Menu.Item>
-    <MenuItem key="6">选项6</MenuItem>
+    <Menu.Item key="6">选项6</Menu.Item>
     <SubMenu key="sub3" title="三级导航">
-      <MenuItem key="7">选项7</MenuItem>
+      <Menu.Item key="7">选项7</Menu.Item>
-      <MenuItem key="8">选项8</MenuItem>
+      <Menu.Item key="8">选项8</Menu.Item>
     </SubMenu>
   </SubMenu>
   <SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
-    <MenuItem key="9">选项9</MenuItem>
+    <Menu.Item key="9">选项9</Menu.Item>
-    <MenuItem key="10">选项10</MenuItem>
+    <Menu.Item key="10">选项10</Menu.Item>
-    <MenuItem key="11">选项11</MenuItem>
+    <Menu.Item key="11">选项11</Menu.Item>
-    <MenuItem key="12">选项12</MenuItem>
+    <Menu.Item key="12">选项12</Menu.Item>
   </SubMenu>
 </Menu>
 , document.getElementById('components-menu-demo-vertical'));

components/message/demo/duration.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { message, Button } from 'antd';
 
-var message = antd.message;
+const success = function() {
-var success = function() {
   message.success('这是一条成功的提示,并将于10秒后消失', 10);
 };
 

components/message/demo/error.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { message, Button } from 'antd';
 
-var message = antd.message;
+const error = function() {
-var error = function() {
   message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
 };
 

components/message/demo/info.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { message, Button } from 'antd';
 
-var message = antd.message;
+const info = function() {
-var info = function() {
   message.info('这是一条普通的提醒');
 };
 

components/message/demo/loading.md

@@ -7,11 +7,10 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { message, Button } from 'antd';
 
-var message = antd.message;
+const success = function() {
-var success = function() {
+  let hide = message.loading('正在执行中...', 0);
-  var hide = message.loading('正在执行中...', 0);
   // 异步手动移除
   setTimeout(hide, 2500);
 };

components/message/demo/success.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Button = antd.Button;
+import { message, Button } from 'antd';
 
-var message = antd.message;
+const success = function() {
-var success = function() {
   message.success('这是一条成功的提示');
 };
 

components/modal/demo/async.md

@@ -7,12 +7,11 @@
 ---
 
 ````jsx
-var Modal = antd.Modal;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
 
-var ModalText = '对话框的内容';
+const ModalText = '对话框的内容';
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       ModalText: '对话框的内容',

components/modal/demo/basic.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Modal = antd.Modal;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
 
-var App = React.createClass({
+const App = React.createClass({
   getInitialState() {
     return { visible: false };
   },

components/modal/demo/confirm-promise.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var confirm = antd.Modal.confirm;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
+const confirm = antd.Modal.confirm;
 
 function showConfirm(){
   confirm({

components/modal/demo/confirm.md

@@ -7,8 +7,8 @@
 ---
 
 ````jsx
-var confirm = antd.Modal.confirm;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
+const confirm = antd.Modal.confirm;
 
 function showConfirm(){
   confirm({

components/modal/demo/footer.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Modal = antd.Modal;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState: function() {
     return {
       loading: false,

components/modal/demo/info.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Modal = antd.Modal;
+import { Modal, Button } from 'antd';
-var Button = antd.Button;
 
 function info() {
   Modal.info({

components/notification/demo/basic.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var notification = antd.Notification;
+import { Button, notification } from 'antd';
-var Button = antd.Button;
 
-var openNotification = function() {
+const openNotification = function() {
   notification.open({
     message: "这是标题",
     description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
@@ -18,8 +17,6 @@ var openNotification = function() {
 };
 
 ReactDOM.render(
-  <div>
+  <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
-    <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
+,document.getElementById('components-notification-demo-basic'));
-  </div>,
-document.getElementById('components-notification-demo-basic'));
 ````

components/notification/demo/duration.md

@@ -7,11 +7,10 @@
 ---
 
 ````jsx
-var notification = antd.Notification;
+import { Button, notification } from 'antd';
-var Button = antd.Button;
 
-var openNotification = function() {
+const openNotification = function() {
-  var args = {
+  const args = {
     message: "这是标题",
     description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
     duration: 10

components/notification/demo/onclose.md

@@ -7,15 +7,14 @@
 ---
 
 ````jsx
-var notification = antd.Notification;
+import { Button, notification } from 'antd';
-var Button = antd.Button;
 
-var close = function() {
+const close = function() {
   console.log("我被默认的关闭按钮关闭了！");
 };
 
-var openNotification = function() {
+const openNotification = function() {
-  var args = {
+  const args = {
     message: "这是标题",
     description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
     onClose: close

components/notification/demo/with-btn.md

@@ -7,20 +7,19 @@
 ---
 
 ````jsx
-var notification = antd.Notification;
+import { Button, notification } from 'antd';
-var Button = antd.Button;
 
-var close = function(){
+const close = function(){
   console.log('我被默认的关闭按钮关闭了！');
 }
 
-var openNotification = function() {
+const openNotification = function() {
-  var key='open'+Date.now();
+  const key='open'+Date.now();
-  var btnClick = function() {
+  const btnClick = function() {
     // 隐藏提醒框
     notification.close(key);
   };
-  var btn = <Button type="primary" size="small" onClick={btnClick}>
+  const btn = <Button type="primary" size="small" onClick={btnClick}>
     自定义关闭按钮并触发回调函数
   </Button>;
   notification.open({

components/notification/demo/with-icon.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var notification = antd.Notification;
+import { Button, notification } from 'antd';
-var Button = antd.Button;
 
-var openNotificationWithIcon = function(type) {
+const openNotificationWithIcon = function(type) {
   return function(){
     notification[type]({
       message: "这是标题",

components/pagination/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/pagination/demo/changer.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/pagination/demo/jump.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/pagination/demo/mini.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/pagination/demo/more.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/pagination/demo/simple.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Pagination = antd.Pagination;
+import { Pagination } from 'antd';
 
 function onChange(page) {
   console.log(page);

components/popconfirm/demo/basic.md

@@ -7,8 +7,7 @@
 ---
 
 ````jsx
-var Popconfirm = antd.Popconfirm;
+import { Popconfirm, message } from 'antd';
-var message = antd.message;
 
 function confirm() {
   message.success('点击了确定');

components/popconfirm/demo/placement.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var Popconfirm = antd.Popconfirm;
+import { Popconfirm, message } from 'antd';
-var message = antd.message;
+
-var text = '确定要删除这个任务吗？';
+const text = '确定要删除这个任务吗？';
 
 function confirm() {
   message.info('点击了确定');

components/popover/demo/basic.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Popover = antd.Popover;
+import { Popover, Button } from 'antd';
-var Button = antd.Button;
 
-var content = <div>
+const content = <div>
   <p>内容</p>
   <p>内容</p>
 </div>;

components/popover/demo/placement.md

@@ -7,11 +7,10 @@
 ---
 
 ````jsx
-var Popover = antd.Popover;
+import { Popover, Button } from 'antd';
-var Button = antd.Button;
 
-var text = <span>标题</span>;
+const text = <span>标题</span>;
-var content = <div>
+const content = <div>
   <p>内容</p>
   <p>内容</p>
 </div>;

components/popover/demo/triggerType.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var Popover = antd.Popover;
+import { Popover, Button } from 'antd';
-var Button = antd.Button;
 
-var content = <div>
+const content = <div>
   <p>内容</p>
   <p>内容</p>
 </div>;

components/progress/demo/circle-dynamic.md

@@ -7,12 +7,10 @@
 ---
 
 ````jsx
-var ProgressCircle = antd.Progress.Circle;
+import { Progress, Button, ButtonGroup, Icon } from 'antd';
-var Button = antd.Button;
+const ProgressCircle = Progress.Circle;
-var ButtonGroup = antd.ButtonGroup;
-var Icon = antd.Icon;
 
-var MyProgress = React.createClass({
+const MyProgress = React.createClass({
   getInitialState() {
     return {
       percent: 0

components/progress/demo/circle-mini.md

@@ -7,7 +7,8 @@
 ---
 
 ````jsx
-var ProgressCircle = antd.Progress.Circle;
+import { Progress } from 'antd';
+const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>

components/progress/demo/circle.md

@@ -7,7 +7,8 @@
 ---
 
 ````jsx
-var ProgressCircle = antd.Progress.Circle;
+import { Progress } from 'antd';
+const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>

components/progress/demo/dynamic.md

@@ -7,12 +7,10 @@
 ---
 
 ````jsx
-var Progress = antd.Progress.Line;
+import { Progress, Button, ButtonGroup, Icon } from 'antd';
-var Button = antd.Button;
+const ProgressLine = Progress.Line;
-var ButtonGroup = antd.ButtonGroup;
-var Icon = antd.Icon;
 
-var MyProgress = React.createClass({
+const MyProgress = React.createClass({
   getInitialState() {
     return {
       percent: 0
@@ -34,7 +32,7 @@ var MyProgress = React.createClass({
   },
   render() {
     return <div>
-      <Progress percent={this.state.percent} />
+      <ProgressLine percent={this.state.percent} />
       <ButtonGroup>
         <Button type="ghost" onClick={this.decline}>
           <Icon type="minus" />

components/progress/demo/line-mini.md

@@ -7,14 +7,15 @@
 ---
 
 ````jsx
-var Progress = antd.Progress.Line;
+import { Progress } from 'antd';
+const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div style={{ width: 170 }}>
-    <Progress percent={30} strokeWidth={5} />
+    <ProgressLine percent={30} strokeWidth={5} />
-    <Progress percent={50} strokeWidth={5} status="active" />
+    <ProgressLine percent={50} strokeWidth={5} status="active" />
-    <Progress percent={70} strokeWidth={5} status="exception" />
+    <ProgressLine percent={70} strokeWidth={5} status="exception" />
-    <Progress percent={100} strokeWidth={5} />
+    <ProgressLine percent={100} strokeWidth={5} />
   </div>
-  , document.getElementById('components-progress-demo-line-mini'));
+, document.getElementById('components-progress-demo-line-mini'));
 ````

components/progress/demo/line.md

@@ -7,15 +7,16 @@
 ---
 
 ````jsx
-var Progress = antd.Progress.Line;
+import { Progress } from 'antd';
+const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div>
-    <Progress percent={30} />
+    <ProgressLine percent={30} />
-    <Progress percent={50} status="active" />
+    <ProgressLine percent={50} status="active" />
-    <Progress percent={70} status="exception" />
+    <ProgressLine percent={70} status="exception" />
-    <Progress percent={100} />
+    <ProgressLine percent={100} />
-    <Progress percent={50} showInfo={false} />
+    <ProgressLine percent={50} showInfo={false} />
   </div>
-  , document.getElementById('components-progress-demo-line'));
+, document.getElementById('components-progress-demo-line'));
 ````

components/progress/index.md

@@ -17,7 +17,7 @@
 
 ## API
 
-## Progress Bar
+## Progress Line
 
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|---------------|----------|-------------|

components/queue-anim/demo/basic.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button } from 'antd';
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true

components/queue-anim/demo/change.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button } from 'antd';
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true,
@@ -27,7 +26,7 @@ var Test = React.createClass({
     });
   },
   onAdd() {
-    var items = this.state.items;
+    let items = this.state.items;
     items.push(<li key={Date.now()}></li>);
     this.setState({
       show: true,
@@ -35,7 +34,7 @@ var Test = React.createClass({
     });
   },
   onRemove() {
-    var items = this.state.items;
+    let items = this.state.items;
     items.splice(items.length - 1, 1);
     this.setState({
       show: true,

components/queue-anim/demo/custom.md

@@ -7,9 +7,9 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button } from 'antd';
-var Button = antd.Button;
+
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true,

components/queue-anim/demo/enter-leave.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button } from 'antd';
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true

components/queue-anim/demo/form.md

@@ -7,15 +7,11 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button, Select, Checkbox, Radio } from 'antd';
-var Select = antd.Select;
+const Option = Select.Option;
-var Option = Select.Option;
+const RadioGroup = Radio.Group;
-var Checkbox = antd.Checkbox;
-var Radio = antd.Radio;
-var RadioGroup = antd.Radio.Group;
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true

components/queue-anim/demo/page.md

@@ -7,10 +7,9 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim, Button } from 'antd';
-var Button = antd.Button;
 
-var Test = React.createClass({
+const Test = React.createClass({
   getInitialState() {
     return {
       show: true

components/queue-anim/demo/router.md

@@ -7,17 +7,14 @@ router 组合的进场与出场动画。
 ---
 
 ````jsx
-var ReactRouter = require('react-router');
+const ReactRouter = require('react-router');
-var Router = ReactRouter.Router;
+let { Router, Route, Link } = ReactRouter;
-var Route = ReactRouter.Route;
+import { QueueAnim, Menu } from 'antd';
-var Link = ReactRouter.Link;
-var QueueAnim = antd.QueueAnim;
-var Menu = antd.Menu;
 
-var App = React.createClass({
+const App = React.createClass({
   render() {
-    var key = this.props.location.pathname;
+    const key = this.props.location.pathname;
-    var keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ];
+    const keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ];
     return (
       <div>
         <Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
@@ -39,7 +36,7 @@ var App = React.createClass({
   }
 });
 
-var Home = React.createClass({
+const Home = React.createClass({
   render() {
     return (
       <div className="demo-router-child">
@@ -71,7 +68,7 @@ var Home = React.createClass({
   }
 });
 
-var Page1 = React.createClass({
+const Page1 = React.createClass({
   render() {
     return (
       <div className="demo-router-child">
@@ -99,7 +96,7 @@ var Page1 = React.createClass({
   }
 });
 
-var Page2 = React.createClass({
+const Page2 = React.createClass({
   render() {
     return (
       <div className="demo-router-child">

components/queue-anim/demo/simple.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var QueueAnim = antd.QueueAnim;
+import { QueueAnim } from 'antd';
 
 ReactDOM.render(
   <QueueAnim delay={500}>

components/radio/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-var Radio = antd.Radio;
+import { Radio } from 'antd';
 
 ReactDOM.render(<Radio>Radio</Radio>
 , document.getElementById('components-radio-demo-basic'));