mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

style: update demo code style to please lint

Browse Source
This commit is contained in:
Benjy Cui 2016-01-07 16:29:12 +08:00
parent 711d2d7413
commit 209170e813
67 changed files with 724 additions and 617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/badge/demo/change.md
View File

@ -40,30 +40,32 @@ const Test = React.createClass({
});
},
render() {
return <div>
<Badge count={this.state.count}>
<a href="#" className="head-example"></a>
</Badge>
<Badge dot={this.state.show}>
<a href="#" className="head-example"></a>
</Badge>
<div style={{ marginTop: 10 }}>
<Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
切换数字显隐
</Button>
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
切换红点显隐
</Button>
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
return (
<div>
<Badge count={this.state.count}>
<a href="#" className="head-example"></a>
</Badge>
<Badge dot={this.state.show}>
<a href="#" className="head-example"></a>
</Badge>
<div style={{ marginTop: 10 }}>
<Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
切换数字显隐
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
切换红点显隐
</Button>
</ButtonGroup>
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
</div>
</div>;
);
}
});

44
components/breadcrumb/demo/router.md
View File

@ -13,33 +13,39 @@ import { Breadcrumb } from 'antd';
const Apps = React.createClass({
render() {
return <ul className="app-list">
<li><Link to="/apps/1">应用1</Link></li>
<li><Link to="/apps/2">应用2</Link></li>
</ul>;
return (
<ul className="app-list">
<li><Link to="/apps/1">应用1</Link></li>
<li><Link to="/apps/2">应用2</Link></li>
</ul>
);
}
});
const Home = React.createClass({
render() {
return (<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
return (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{this.props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>
点击上面的导航切换页面，面包屑在下面：
</div>
<Breadcrumb {...this.props} router={ReactRouter} />
</div>
{this.props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>点击上面的导航切换页面，面包屑在下面：</div>
<Breadcrumb {...this.props} router={ReactRouter} />
</div>);
);
}
});
ReactDOM.render((
ReactDOM.render(
<Router>
<Route name="home" breadcrumbName="首页" path="/" component={Home}>
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
@ -47,7 +53,7 @@ ReactDOM.render((
</Route>
</Route>
</Router>
), mountNode);
, mountNode);
````
<style>

38
components/button/demo/loading.md
View File

@ -23,24 +23,26 @@ const App = React.createClass({
this.setState({ iconLoading: true });
},
render() {
return <div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading>
加载中
</Button>
<Button type="primary" size="small" loading>
加载中
</Button>
<br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载
</Button>
<Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
<Icon type="poweroff" />点击变加载
</Button>
</div>;
return (
<div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading>
加载中
</Button>
<Button type="primary" size="small" loading>
加载中
</Button>
<br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载
</Button>
<Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
<Icon type="poweroff" />点击变加载
</Button>
</div>
);
}
});

20
components/calendar/demo/notice-calendar.md
View File

@ -39,14 +39,18 @@ function getListData(value) {
function dateCellRender(value) {
let listData = getListData(value);
return <ul className="events">
{listData.map((item, index) =>
<li key={index}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
)}
</ul>;
return (
<ul className="events">
{
listData.map((item, index) =>
<li key={index}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
)
}
</ul>
);
}

44
components/checkbox/demo/controller.md
View File

@ -19,27 +19,29 @@ const App = React.createClass({
render() {
const label = (this.state.checked ? '选中' : '取消') + '-' +
(this.state.disabled ? '不可用' : '可用');
return <div>
<p style={{marginBottom: '20px'}}>
<label>
<Checkbox checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange} />
{label}
</label>
</p>
<p>
<Button type="primary" size="small"
onClick={this.toggleChecked}>
{!this.state.checked ? '选中' : '取消'}
</Button>
<Button style={{marginLeft: '10px'}}
type="primary" size="small"
onClick={this.toggleDisable}>
{!this.state.disabled ? '不可用' : '可用'}
</Button>
</p>
</div>;
return (
<div>
<p style={{marginBottom: '20px'}}>
<label>
<Checkbox checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange} />
{label}
</label>
</p>
<p>
<Button type="primary" size="small"
onClick={this.toggleChecked}>
{!this.state.checked ? '选中' : '取消'}
</Button>
<Button style={{marginLeft: '10px'}}
type="primary" size="small"
onClick={this.toggleDisable}>
{!this.state.disabled ? '不可用' : '可用'}
</Button>
</p>
</div>
);
},
toggleChecked() {
this.setState({checked: !this.state.checked});

22
components/date-picker/demo/start-end.md
View File

@ -35,16 +35,18 @@ const DateRange = React.createClass({
});
},
render() {
return <div>
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
</div>;
return (
<div>
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
</div>
);
}
});

10
components/date-picker/demo/with-time-picker.md
View File

@ -37,10 +37,12 @@ const DateTimePicker = React.createClass({
}
},
render() {
return <div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>;
return (
<div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>
);
}
});

24
components/dropdown/demo/basic.md
View File

@ -9,17 +9,19 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

30
components/dropdown/demo/dropdown-button.md
View File

@ -10,21 +10,23 @@
import { Menu, Dropdown } from 'antd';
const DropdownButton = Dropdown.Button;
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
, mountNode);
````

12
components/dropdown/demo/event.md
View File

@ -12,11 +12,13 @@ const onClick = function({key}) {
console.log('点击了菜单' + key);
};
const menu = <Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
const menu = (
<Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

22
components/dropdown/demo/item.md
View File

@ -9,16 +9,18 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item key="0">
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

18
components/dropdown/demo/sub-menu.md
View File

@ -10,14 +10,16 @@
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const menu = <Menu>
<Menu.Item>第一个菜单项</Menu.Item>
<Menu.Item>第二个菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>第三个菜单项</Menu.Item>
<Menu.Item>第四个菜单项</Menu.Item>
</SubMenu>
</Menu>;
const menu = (
<Menu>
<Menu.Item>第一个菜单项</Menu.Item>
<Menu.Item>第二个菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>第三个菜单项</Menu.Item>
<Menu.Item>第四个菜单项</Menu.Item>
</SubMenu>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

22
components/dropdown/demo/trigger.md
View File

@ -9,16 +9,18 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>
);
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={['click']}>

12
components/form/demo/disabled.md
View File

@ -16,8 +16,8 @@ ReactDOM.render(
<Form horizontal>
<FormItem
label="单独禁用输入框："
labelCol={{span:5}}
wrapperCol={{span:12}}>
labelCol={{span: 5}}
wrapperCol={{span: 12}}>
<Input defaultValue="我是禁用的" disabled />
</FormItem>
@ -26,16 +26,16 @@ ReactDOM.render(
<FormItem
id="userName"
label="用户名："
labelCol={{span:5}}
wrapperCol={{span:12}}
labelCol={{span: 5}}
wrapperCol={{span: 12}}
required>
<p className="ant-form-text">大眼萌 minion</p>
</FormItem>
<FormItem
id="password"
label="密码："
labelCol={{span:5}}
wrapperCol={{span:12}}
labelCol={{span: 5}}
wrapperCol={{span: 12}}
required>
<Input type="password" defaultValue="123456" id="password" />
</FormItem>

2
components/form/demo/form-controls.md
View File

@ -41,7 +41,7 @@ ReactDOM.render(
label="Select 选择器："
labelCol={{span: 6}}
wrapperCol={{span: 14}}>
<Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
<Select id="select" size="large" defaultValue="lucy" style={{width: 200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>

2
components/form/demo/input-group.md
View File

@ -35,7 +35,7 @@ ReactDOM.render(
<InputGroup>
<Input id="site4" placeholder="www.mysite" />
<div className="ant-input-group-wrap">
<Select defaultValue=".com" style={{width:70}}>
<Select defaultValue=".com" style={{width: 70}}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>

4
components/form/demo/mix.md
View File

@ -59,7 +59,7 @@ const Demo = React.createClass({
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required>
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
<InputNumber size="large" min={1} max={10} style={{width: 100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
<span className="ant-form-text"> 台机器</span>
</FormItem>
@ -95,7 +95,7 @@ const Demo = React.createClass({
labelCol={{span: 8}}
wrapperCol={{span: 16}}
required>
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
<Select size="large" defaultValue="lucy" style={{width: 200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>

20
components/form/demo/search-input.md
View File

@ -43,15 +43,17 @@ const SearchInput = React.createClass({
'ant-search-input': true,
'ant-search-input-focus': this.state.focus,
});
return <InputGroup className={searchCls} style={this.props.style}>
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>
</InputGroup>;
return (
<InputGroup className={searchCls} style={this.props.style}>
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>
</InputGroup>
);
}
});

12
components/input-number/demo/disabled.md
View File

@ -21,12 +21,14 @@ const Test = React.createClass({
});
},
render() {
return <div>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
<div style={{marginTop: 20}}>
<Button onClick={this.toggle} type="primary">Toggle disabled</Button>
return (
<div>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
<div style={{marginTop: 20}}>
<Button onClick={this.toggle} type="primary">Toggle disabled</Button>
</div>
</div>
</div>;
);
}
});

56
components/menu/demo/sider-current.md
View File

@ -30,34 +30,36 @@ const Sider = React.createClass({
});
},
render() {
return <Menu onClick={this.handleClick}
style={{width:240}}
openKeys={this.state.openKeys}
onOpen={this.onToggle}
onClose={this.onToggle}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<Menu onClick={this.handleClick}
style={{width: 240}}
openKeys={this.state.openKeys}
onOpen={this.onToggle}
onClose={this.onToggle}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
);
}
});
ReactDOM.render(<Sider />, mountNode);

60
components/menu/demo/sider.md
View File

@ -24,36 +24,38 @@ const Sider = React.createClass({
});
},
render() {
return <Menu onClick={this.handleClick}
style={{width:240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<Menu onClick={this.handleClick}
style={{width: 240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
);
}
});
ReactDOM.render(<Sider />, mountNode);

64
components/menu/demo/theme.md
View File

@ -28,38 +28,40 @@ const Sider = React.createClass({
});
},
render() {
return <div>
<Switch onChange={this.changeTheme} checkedChildren="暗" unCheckedChildren="亮" />
<br />
<br />
<Menu theme={this.state.theme}
onClick={this.handleClick}
style={{width:240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<div>
<Switch onChange={this.changeTheme} checkedChildren="暗" unCheckedChildren="亮" />
<br />
<br />
<Menu theme={this.state.theme}
onClick={this.handleClick}
style={{width: 240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
</div>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
</div>
);
}
});
ReactDOM.render(<Sider />, mountNode);

51
components/menu/demo/vertical.md
View File

@ -15,31 +15,32 @@ function handleClick(e) {
console.log('click', e);
}
ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
ReactDOM.render(
<Menu onClick={handleClick} style={{width: 240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
, mountNode);
````

22
components/modal/demo/async.md
View File

@ -40,16 +40,18 @@ const Test = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>
);
}
});

20
components/modal/demo/basic.md
View File

@ -30,15 +30,17 @@ const App = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>
);
}
});

2
components/modal/demo/confirm-promise.md
View File

@ -10,7 +10,7 @@
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm(){
function showConfirm() {
confirm({
title: '您是否确认要删除这项内容',
content: '点确认 1 秒后关闭',

2
components/modal/demo/confirm.md
View File

@ -10,7 +10,7 @@
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm(){
function showConfirm() {
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',

42
components/modal/demo/footer.md
View File

@ -31,26 +31,28 @@ const Test = React.createClass({
this.setState({ visible: false });
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>
显示对话框
</Button>
<Modal ref="modal"
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>
]}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>
显示对话框
</Button>
<Modal ref="modal"
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>
]}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>
);
}
});

22
components/modal/demo/locale.md
View File

@ -29,16 +29,18 @@ const LocalizedModal = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</Modal>
</div>
);
}
});

8
components/notification/demo/with-btn.md
View File

@ -19,9 +19,11 @@ const openNotification = function() {
// 隐藏提醒框
notification.close(key);
};
const btn = <Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
</Button>;
const btn = (
<Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
</Button>
);
notification.open({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',

13
components/notification/demo/with-icon.md
View File

@ -10,7 +10,7 @@
import { Button, notification } from 'antd';
const openNotificationWithIcon = function(type) {
return function(){
return function() {
notification[type]({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
@ -18,11 +18,12 @@ const openNotificationWithIcon = function(type) {
};
};
ReactDOM.render(<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warn')}>警告</Button>
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
ReactDOM.render(
<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warn')}>警告</Button>
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
</div>
, mountNode);
````

22
components/popconfirm/demo/dynamic-trigger.md
View File

@ -41,16 +41,18 @@ let App = React.createClass({
}
},
render() {
return <div>
<Popconfirm title="确定要删除这个任务吗？"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />
<br />
点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
</div>;
return (
<div>
<Popconfirm title="确定要删除这个任务吗？"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />
<br />
点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
</div>
);
}
});

10
components/popover/demo/basic.md
View File

@ -9,10 +9,12 @@
````jsx
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(
<Popover overlay={content} title="标题">

18
components/popover/demo/control.md
View File

@ -24,13 +24,17 @@ const App = React.createClass({
this.setState({ visible });
},
render() {
const content = <div>
<a onClick={this.hide}>关闭卡片</a>
</div>;
return <Popover overlay={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>;
const content = (
<div>
<a onClick={this.hide}>关闭卡片</a>
</div>
);
return (
<Popover overlay={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>
);
}
});

102
components/popover/demo/placement.md
View File

@ -10,57 +10,61 @@
import { Popover, Button } from 'antd';
const text = <span>标题</span>;
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(<div>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
ReactDOM.render(
<div>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>, mountNode);
, mountNode);
````
<style>

34
components/popover/demo/triggerType.md
View File

@ -9,20 +9,24 @@
````jsx
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(<div>
<Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="focus">
<Button>聚焦</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="click">
<Button>点击</Button>
</Popover>
</div>, mountNode);
ReactDOM.render(
<div>
<Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="focus">
<Button>聚焦</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="click">
<Button>点击</Button>
</Popover>
</div>
, mountNode);
````

24
components/progress/demo/circle-dynamic.md
View File

@ -32,17 +32,19 @@ const MyProgress = React.createClass({
this.setState({ percent });
},
render() {
return <div>
<ProgressCircle percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>;
return (
<div>
<ProgressCircle percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
);
}
});

24
components/progress/demo/dynamic.md
View File

@ -32,17 +32,19 @@ const MyProgress = React.createClass({
this.setState({ percent });
},
render() {
return <div>
<ProgressLine percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>;
return (
<div>
<ProgressLine percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
);
}
});

4
components/queue-anim/demo/change.md
View File

@ -46,8 +46,8 @@ const Test = React.createClass({
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
<Button onClick={this.onAdd} style={{marginLeft:10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft:10}}>删除</Button>
<Button onClick={this.onAdd} style={{marginLeft: 10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft: 10}}>删除</Button>
</p>
<div className="demo-content">
<div className="demo-listBox" key="b">

4
components/queue-anim/demo/router.md
View File

@ -83,7 +83,7 @@ const Page1 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="ul">
<QueueAnim component="ul" animConfig={{opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9]}} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
@ -104,7 +104,7 @@ const Page2 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="li">
<QueueAnim component="ul" animConfig={{opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9]}} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>

20
components/radio/demo/disable.md
View File

@ -21,16 +21,18 @@ const App = React.createClass({
});
},
render() {
return <div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
return (
<div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
</div>
</div>
</div>;
);
}
});

20
components/radio/demo/radiogroup.md
View File

@ -23,15 +23,17 @@ const App = React.createClass({
});
},
render() {
return <div>
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>
<Radio value="d">D</Radio>
</RadioGroup>
<div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
</div>;
return (
<div>
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>
<Radio value="d">D</Radio>
</RadioGroup>
<div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);

24
components/select/demo/basic.md
View File

@ -14,15 +14,17 @@ function handleChange(value) {
console.log('selected ' + value);
}
ReactDOM.render(<div>
<Select defaultValue="lucy" style={{width:120}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width:120}} disabled>
<Option value="lucy">Lucy</Option>
</Select>
</div>, mountNode);
ReactDOM.render(
<div>
<Select defaultValue="lucy" style={{width: 120}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width: 120}} disabled>
<Option value="lucy">Lucy</Option>
</Select>
</div>
, mountNode);
````

16
components/select/demo/combobox.md
View File

@ -33,13 +33,15 @@ const Test = React.createClass({
},
render() {
// filterOption 需要设置为 false，数据是动态设置的
return <Select combobox
style={{width:200}}
onChange={this.handleChange}
filterOption={false}
searchPlaceholder="请输入账户名">
{this.state.options}
</Select>;
return (
<Select combobox
style={{width: 200}}
onChange={this.handleChange}
filterOption={false}
searchPlaceholder="请输入账户名">
{this.state.options}
</Select>
);
}
});

22
components/select/demo/coordinate.md
View File

@ -23,13 +23,13 @@ const App = React.createClass({
getInitialState() {
return {
cities: cityData[provinceData[0]],
secondCity:cityData[provinceData[0]][0]
secondCity: cityData[provinceData[0]][0]
};
},
handleProvinceChange(value) {
this.setState({
cities: cityData[value],
secondCity:cityData[value][0]
secondCity: cityData[value][0]
});
},
onSecondCityChange(value) {
@ -44,14 +44,16 @@ const App = React.createClass({
const cityOptions = this.state.cities.map(function(city) {
return <Option key={city}>{city}</Option>;
});
return <div>
<Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
{provinceOptions}
</Select>
<Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
{cityOptions}
</Select>
</div>;
return (
<div>
<Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
{provinceOptions}
</Select>
<Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
{cityOptions}
</Select>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);

4
components/select/demo/multiple.md
View File

@ -22,8 +22,8 @@ function handleChange(value) {
ReactDOM.render(
<Select multiple
style={{width:400}}
defaultValue={['a10', 'c12']} onChange={handleChange}>
style={{width: 400}}
defaultValue={['a10', 'c12']} onChange={handleChange}>
{children}
</Select>
, mountNode);

6
components/select/demo/optgroup.md
View File

@ -17,9 +17,9 @@ function handleChange(value) {
ReactDOM.render(
<Select defaultValue="lucy"
style={{width:200}}
showSearch={false}
onChange={handleChange}>
style={{width: 200}}
showSearch={false}
onChange={handleChange}>
<OptGroup label="Manager">
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>

6
components/select/demo/search.md
View File

@ -15,9 +15,9 @@ function handleChange(value) {
}
ReactDOM.render(
<Select defaultValue="lucy" showSearch style={{width:200}}
searchPlaceholder="输入"
onChange={handleChange}>
<Select defaultValue="lucy" showSearch style={{width: 200}}
searchPlaceholder="输入"
onChange={handleChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>

6
components/select/demo/size.md
View File

@ -16,19 +16,19 @@ function handleChange(value) {
ReactDOM.render(
<div>
<Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select size="large" defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select size="small" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select size="small" defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>

18
components/spin/demo/nested.md
View File

@ -21,13 +21,17 @@ const Card = React.createClass({
});
},
render() {
const container = <Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />;
return <div>
<Spin spining={this.state.loading}>{container}</Spin>
切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
</div>;
const container = (
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />
);
return (
<div>
<Spin spining={this.state.loading}>{container}</Spin>
切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
</div>
);
}
});

8
components/switch/demo/basic.md
View File

@ -9,10 +9,12 @@
````jsx
import { Switch } from 'antd';
function onChange(checked){
function onChange(checked) {
console.log('switch to ' + checked);
}
ReactDOM.render(<Switch defaultChecked={false} onChange={onChange} />,
mountNode);
ReactDOM.render(
<Switch defaultChecked={false} onChange={onChange} />,
mountNode
);
````

16
components/switch/demo/disabled.md
View File

@ -15,18 +15,20 @@ const Test = React.createClass({
disabled: true
};
},
toggle(){
toggle() {
this.setState({
disabled: !this.state.disabled
});
},
render() {
return <div>
<Switch disabled={this.state.disabled} />
<br />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>;
return (
<div>
<Switch disabled={this.state.disabled} />
<br />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>
);
}
});

4
components/table/demo/ajax.md
View File

@ -56,7 +56,9 @@ const Test = React.createClass({
sortOrder: sorter.order
};
for (let key in filters) {
params[key] = filters[key];
if (filters.hasOwnProperty(key)) {
params[key] = filters[key];
}
}
this.fetch(params);
},

20
components/table/demo/basic.md
View File

@ -28,15 +28,17 @@ const columns = [{
title: '操作',
key: 'operation',
render: function(text, record) {
return <span>
<a href="#">操作一{record.name}</a>
<span className="ant-divider"></span>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>;
return (
<span>
<a href="#">操作一{record.name}</a>
<span className="ant-divider"></span>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>
);
}
}];
const data = [{

15
components/table/demo/colspan-rowspan.md
View File

@ -30,14 +30,13 @@ const columns = [{
render: function(text, row, index) {
if (index < 4) {
return <a href="#">{text}</a>;
} else {
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
};
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
};
}
}, {
title: '年龄',
@ -50,7 +49,7 @@ const columns = [{
render: function(value, row, index) {
let obj = {
children: value,
props:{}
props: {}
};
// 第三列的第三行行合并
if (index === 2) {

10
components/table/demo/loading.md
View File

@ -48,10 +48,12 @@ const App = React.createClass({
});
},
render() {
return <div>
<Table columns={columns} dataSource={data} loading={this.state.loading} />
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>;
return (
<div>
<Table columns={columns} dataSource={data} loading={this.state.loading} />
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>
);
}
});

14
components/table/demo/local-data.md
View File

@ -82,12 +82,14 @@ const App = React.createClass({
console.log(selected, selectedRows);
}
};
return <div>
<Table columns={columns} dataSource={this.state.data} rowSelection={rowSelection} />
<Button onClick={this.handleClick1}>加载本地数据1</Button>
&nbsp;
<Button onClick={this.handleClick2}>加载本地数据2</Button>
</div>;
return (
<div>
<Table columns={columns} dataSource={this.state.data} rowSelection={rowSelection} />
<Button onClick={this.handleClick1}>加载本地数据1</Button>
&nbsp;
<Button onClick={this.handleClick2}>加载本地数据2</Button>
</div>
);
}
});

16
components/table/demo/row-selection-and-operation.md
View File

@ -60,14 +60,16 @@ const App = React.createClass({
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return <div>
<div style={{marginBottom: 16}}>
<Button type="primary" onClick={this.start}
disabled={!hasSelected} loading={loading}>操作</Button>
<span style={{marginLeft: 8}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
return (
<div>
<div style={{marginBottom: 16}}>
<Button type="primary" onClick={this.start}
disabled={!hasSelected} loading={loading}>操作</Button>
<span style={{marginLeft: 8}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>;
);
}
});

34
components/tabs/demo/position.md
View File

@ -21,23 +21,25 @@ const Demo = React.createClass({
this.setState({ tabPosition });
},
render() {
return <div>
<div style={{marginBottom: 16}}>
页签位置：
<Select value={this.state.tabPosition} onChange={this.changeTabPosition}
dropdownMatchSelectWidth={false}>
<Option value="top">top</Option>
<Option value="bottom">bottom</Option>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>
return (
<div>
<div style={{marginBottom: 16}}>
页签位置：
<Select value={this.state.tabPosition} onChange={this.changeTabPosition}
dropdownMatchSelectWidth={false}>
<Option value="top">top</Option>
<Option value="bottom">bottom</Option>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>
</div>
<Tabs tabPosition={this.state.tabPosition}>
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs>
</div>
<Tabs tabPosition={this.state.tabPosition}>
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs>
</div>;
);
}
});

3
components/time-picker/demo/disable-options.md
View File

@ -28,9 +28,8 @@ function disabledMinutes(h) {
return newArray(0, 31);
} else if (h === 23) {
return newArray(30, 60);
} else {
return [];
}
return [];
}
ReactDOM.render(

6
components/time-picker/demo/value.md
View File

@ -16,11 +16,11 @@ const Test = React.createClass({
};
},
onChange(time) {
time = time && time.toLocaleTimeString('zh-CN', {
const parsedTime = time && time.toLocaleTimeString('zh-CN', {
hour12: false
});
console.log(time);
this.setState({ time });
console.log(parsedTime);
this.setState({ time: parsedTime });
},
render() {
return <TimePicker value={this.state.value} onChange={this.onChange} />;

8
components/transfer/demo/advanced.md
View File

@ -41,8 +41,12 @@ const App = React.createClass({
this.setState({ targetKeys });
},
renderFooter() {
return <Button type="ghost" size="small" style={{ float: 'right', margin: '5' }}
onClick={this.getMock}>刷新</Button>;
return (
<Button type="ghost" size="small" style={{ float: 'right', margin: '5' }}
onClick={this.getMock}>
刷新
</Button>
);
},
render() {
return (

8
components/transfer/demo/basic.md
View File

@ -40,8 +40,12 @@ const App = React.createClass({
this.setState({ targetKeys });
},
renderFooter() {
return <Button type="primary" size="small" style={{ float: 'right', margin: '5' }}
onClick={this.getMock}>刷新</Button>;
return (
<Button type="primary" size="small" style={{ float: 'right', margin: '5' }}
onClick={this.getMock}>
刷新
</Button>
);
},
render() {
return (

12
components/upload/demo/fileList.md
View File

@ -58,11 +58,13 @@ const MyUpload = React.createClass({
onChange: this.handleChange,
multiple: true
};
return <Upload {...props} fileList={this.state.fileList}>
<Button type="ghost">
<Icon type="upload" /> 点击上传
</Button>
</Upload>;
return (
<Upload {...props} fileList={this.state.fileList}>
<Button type="ghost">
<Icon type="upload" /> 点击上传
</Button>
</Upload>
);
}
});

8
components/validation/demo/basic.md
View File

@ -22,9 +22,8 @@ function cx(classNames) {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
return Array.prototype.join.call(arguments, ' ');
}
function noop() {
@ -98,9 +97,8 @@ const Demo = React.createClass({
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log('submit: ');
console.log(this.state.formData);
});
},
@ -165,7 +163,7 @@ const Demo = React.createClass({
hasFeedback={this.state.isEmailOver}
help={status.email.errors ? status.email.errors.join(',') : null}
required>
<Validator rules={[{required: true, type:'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
<Validator rules={[{required: true, type: 'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
<Input type="email" name="email" id="email" value={formData.email} placeholder="onBlur 与 onChange 相结合" onBlur={this.handleEmailInputBlur} onFocus={this.handleEmailInputFocus} />
</Validator>
</FormItem>

3
components/validation/demo/customize.md
View File

@ -45,9 +45,8 @@ const Demo = React.createClass({
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log('submit: ');
console.log(this.state.formData);
});
},

8
components/validation/demo/other-items.md
View File

@ -20,9 +20,8 @@ function cx(classNames) {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
return Array.prototype.join.call(arguments, ' ');
}
const Demo = React.createClass({
@ -76,15 +75,14 @@ const Demo = React.createClass({
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log('submit: ');
console.log(this.state.formData);
});
},
checkBirthday(rule, value, callback) {
if (value && value.getTime() >= Date.now()){
if (value && value.getTime() >= Date.now()) {
callback(new Error('你不可能在未来出生吧!'));
} else {
callback();