This commit is contained in:
yiminghe 2015-10-20 16:47:55 +08:00
parent aed7eae2bc
commit 76b0f673ec
172 changed files with 257 additions and 316 deletions

View File

@ -10,7 +10,7 @@
var Affix = antd.Affix; var Affix = antd.Affix;
var Button = antd.Button; var Button = antd.Button;
React.render( ReactDOM.render(
<Affix> <Affix>
<Button type="primary">固定在顶部</Button> <Button type="primary">固定在顶部</Button>
</Affix> </Affix>

View File

@ -10,7 +10,7 @@
var Affix = antd.Affix; var Affix = antd.Affix;
var Button = antd.Button; var Button = antd.Button;
React.render( ReactDOM.render(
<Affix offset={75}> <Affix offset={75}>
<Button type="primary">固定在距离顶部 75px 的位置</Button> <Button type="primary">固定在距离顶部 75px 的位置</Button>
</Affix> </Affix>

View File

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

View File

@ -13,7 +13,7 @@ var onClose = function(e) {
console.log(e, '我要被关闭啦!'); console.log(e, '我要被关闭啦!');
}; };
React.render(<div> ReactDOM.render(<div>
<Alert message="警告提示的文案" <Alert message="警告提示的文案"
type="warn" type="warn"
closable closable
@ -24,4 +24,4 @@ React.render(<div>
closable closable
onClose={onClose} /> onClose={onClose} />
</div>, document.getElementById('components-alert-demo-closable')); </div>, document.getElementById('components-alert-demo-closable'));
```` ````

View File

@ -10,7 +10,7 @@
var Alert = antd.Alert; var Alert = antd.Alert;
var link = <a href="javascript:;">不再提醒</a> var link = <a href="javascript:;">不再提醒</a>
React.render( ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} /> <Alert message="消息提示的文案" type="info" closeText={link} />
, document.getElementById('components-alert-demo-close-type')); , document.getElementById('components-alert-demo-close-type'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Alert = antd.Alert; var Alert = antd.Alert;
React.render(<div> ReactDOM.render(<div>
<Alert message="成功提示的文案" <Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍" description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success" /> type="success" />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Alert = antd.Alert; var Alert = antd.Alert;
React.render(<div> ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" /> <Alert message="成功提示的文案" type="success" />
<Alert message="消息提示的文案" type="info" /> <Alert message="消息提示的文案" type="info" />
<Alert message="警告提示的文案" type="warn" /> <Alert message="警告提示的文案" type="warn" />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Badge = antd.Badge; var Badge = antd.Badge;
React.render(<div> ReactDOM.render(<div>
<Badge count="99"> <Badge count="99">
<a href="#" className="head-example"></a> <a href="#" className="head-example"></a>
</Badge> </Badge>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Badge = antd.Badge; var Badge = antd.Badge;
React.render( ReactDOM.render(
<Badge count="5"> <Badge count="5">
<a href="#" className="head-example"></a> <a href="#" className="head-example"></a>
</Badge> </Badge>

View File

@ -10,7 +10,7 @@
var Badge = antd.Badge; var Badge = antd.Badge;
var Icon = antd.Icon; var Icon = antd.Icon;
React.render(<div> ReactDOM.render(<div>
<Badge dot={true}> <Badge dot={true}>
<Icon type="notification" /> <Icon type="notification" />
</Badge> </Badge>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Badge = antd.Badge; var Badge = antd.Badge;
React.render( ReactDOM.render(
<a href="#"> <a href="#">
<Badge count="5"> <Badge count="5">
<span className="head-example"></span> <span className="head-example"></span>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Breadcrumb = require('antd/lib/breadcrumb'); var Breadcrumb = require('antd/lib/breadcrumb');
React.render( ReactDOM.render(
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item> <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>

View File

@ -41,7 +41,7 @@ var Home = React.createClass({
} }
}); });
React.render(( ReactDOM.render((
<Router> <Router>
<Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior> <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}> <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>

View File

@ -10,7 +10,7 @@
var Breadcrumb = require('antd/lib/breadcrumb'); var Breadcrumb = require('antd/lib/breadcrumb');
var Icon = require('antd').iconfont; var Icon = require('antd').iconfont;
React.render( ReactDOM.render(
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item href=""> <Breadcrumb.Item href="">
<Icon type="home" /> <Icon type="home" />

View File

@ -7,11 +7,11 @@
通过设置 `type``primary` `ghost` 可分别创建主按钮、幽灵按钮,若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。 通过设置 `type``primary` `ghost` 可分别创建主按钮、幽灵按钮,若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
--- ---
````jsx ````jsx
var Button = antd.Button; var Button = antd.Button;
React.render(<div> ReactDOM.render(<div>
<Button type="primary">主按钮</Button> <Button type="primary">主按钮</Button>
<Button>次按钮</Button> <Button>次按钮</Button>
<Button type="ghost">幽灵按钮</Button> <Button type="ghost">幽灵按钮</Button>

View File

@ -13,7 +13,7 @@ var Button = antd.Button;
var ButtonGroup = antd.ButtonGroup; var ButtonGroup = antd.ButtonGroup;
var Icon = antd.Icon; var Icon = antd.Icon;
React.render(<div> ReactDOM.render(<div>
<h4>基本组合</h4> <h4>基本组合</h4>
<ButtonGroup> <ButtonGroup>
<Button type="primary">确定</Button> <Button type="primary">确定</Button>

View File

@ -10,7 +10,7 @@
var Button = antd.Button; var Button = antd.Button;
var Icon = antd.Icon; var Icon = antd.Icon;
React.render(<div> ReactDOM.render(<div>
<Button type="primary" shape="circle" size="lg"> <Button type="primary" shape="circle" size="lg">
<Icon type="search" /> <Icon type="search" />
</Button> </Button>

View File

@ -39,7 +39,7 @@ var App = React.createClass({
} }
}); });
React.render(<App />, document.getElementById('components-button-demo-loading')); ReactDOM.render(<App />, document.getElementById('components-button-demo-loading'));
```` ````
<style> <style>

View File

@ -10,7 +10,7 @@
var Button = antd.Button; var Button = antd.Button;
var Icon = antd.Icon; var Icon = antd.Icon;
React.render(<div> ReactDOM.render(<div>
<Button type="primary" shape="circle" size="lg"> <Button type="primary" shape="circle" size="lg">
<Icon type="search" /> <Icon type="search" />
</Button> </Button>

View File

@ -11,7 +11,7 @@
````jsx ````jsx
var Button = antd.Button; var Button = antd.Button;
React.render(<div> ReactDOM.render(<div>
<Button type="primary" size="lg">大号按钮</Button> <Button type="primary" size="lg">大号按钮</Button>
<Button type="primary">中号按钮(默认)</Button> <Button type="primary">中号按钮(默认)</Button>
<Button type="primary" size="sm">小号按钮</Button> <Button type="primary" size="sm">小号按钮</Button>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Button = antd.Button; var Button = antd.Button;
React.render(<div> ReactDOM.render(<div>
<h4>使用 `disabled` 属性</h4> <h4>使用 `disabled` 属性</h4>
<Button type="primary">主按钮</Button> <Button type="primary">主按钮</Button>
<Button type="primary" disabled>主按钮(失效)</Button> <Button type="primary" disabled>主按钮(失效)</Button>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Carousel = antd.Carousel; var Carousel = antd.Carousel;
React.render( ReactDOM.render(
<Carousel autoplay="true"> <Carousel autoplay="true">
<div><h3>1</h3></div> <div><h3>1</h3></div>
<div><h3>2</h3></div> <div><h3>2</h3></div>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Carousel = antd.Carousel; var Carousel = antd.Carousel;
React.render( ReactDOM.render(
<Carousel> <Carousel>
<div><h3>1</h3></div> <div><h3>1</h3></div>
<div><h3>2</h3></div> <div><h3>2</h3></div>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Carousel = antd.Carousel; var Carousel = antd.Carousel;
React.render( ReactDOM.render(
<Carousel effect="fade"> <Carousel effect="fade">
<div><h3>1</h3></div> <div><h3>1</h3></div>
<div><h3>2</h3></div> <div><h3>2</h3></div>

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Carousel = antd.Carousel; var Carousel = antd.Carousel;
React.render( ReactDOM.render(
<Carousel vertical="true"> <Carousel vertical="true">
<div><h3>1</h3></div> <div><h3>1</h3></div>
<div><h3>2</h3></div> <div><h3>2</h3></div>

View File

@ -13,7 +13,7 @@ function onChange(e) {
console.log('checked = ' + e.target.checked); console.log('checked = ' + e.target.checked);
} }
React.render(<label> ReactDOM.render(<label>
<Checkbox defaultChecked={false} onChange={onChange} /> <Checkbox defaultChecked={false} onChange={onChange} />
Checkbox Checkbox
</label>, container); </label>, container);

View File

@ -57,5 +57,5 @@ var App = React.createClass({
} }
}); });
React.render(<App />, container); ReactDOM.render(<App />, container);
```` ````

View File

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

View File

@ -16,7 +16,7 @@ var text = `
it can be found as a welcome guest in many households across the world. it can be found as a welcome guest in many households across the world.
`; `;
React.render( ReactDOM.render(
<Collapse accordion={true}> <Collapse accordion={true}>
<Panel header={`This is panel header 1`} key="1"> <Panel header={`This is panel header 1`} key="1">
<p>{text}</p> <p>{text}</p>

View File

@ -20,7 +20,7 @@ var text = `
it can be found as a welcome guest in many households across the world. it can be found as a welcome guest in many households across the world.
`; `;
React.render( ReactDOM.render(
<Collapse defaultActiveKey={["1"]} onChange={callback}> <Collapse defaultActiveKey={["1"]} onChange={callback}>
<Panel header={`This is panel header 1`} key="1"> <Panel header={`This is panel header 1`} key="1">
<p>{text}</p> <p>{text}</p>

View File

@ -20,7 +20,7 @@ var text = `
it can be found as a welcome guest in many households across the world. it can be found as a welcome guest in many households across the world.
`; `;
React.render( ReactDOM.render(
<Collapse onChange={callback} accordion={true}> <Collapse onChange={callback} accordion={true}>
<Panel header={`This is panel header 1`} key="1"> <Panel header={`This is panel header 1`} key="1">
<Collapse defaultActiveKey="1"> <Collapse defaultActiveKey="1">

View File

@ -10,7 +10,7 @@
// or require('antd/lib/datepicker'); // or require('antd/lib/datepicker');
var Datepicker = antd.Datepicker; var Datepicker = antd.Datepicker;
React.render( ReactDOM.render(
<Datepicker defaultValue="2012-12-12" /> <Datepicker defaultValue="2012-12-12" />
, document.getElementById('components-datepicker-demo-basic')); , document.getElementById('components-datepicker-demo-basic'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Datepicker = antd.Datepicker; var Datepicker = antd.Datepicker;
React.render( ReactDOM.render(
<Datepicker value="2015-06-06" disabled={true} /> <Datepicker value="2015-06-06" disabled={true} />
, document.getElementById('components-datepicker-demo-disabled')); , document.getElementById('components-datepicker-demo-disabled'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Datepicker = antd.Datepicker; var Datepicker = antd.Datepicker;
React.render( ReactDOM.render(
<Datepicker value="2015/01/01" format="yyyy/MM/dd" /> <Datepicker value="2015/01/01" format="yyyy/MM/dd" />
, document.getElementById('components-datepicker-demo-formatter')); , document.getElementById('components-datepicker-demo-formatter'));
```` ````

View File

@ -15,7 +15,7 @@ var disabledDate = function(current, value) {
return current.getTime() > Date.now(); return current.getTime() > Date.now();
}; };
React.render( ReactDOM.render(
<Datepicker disabledDate={disabledDate} /> <Datepicker disabledDate={disabledDate} />
, document.getElementById('components-datepicker-demo-range')); , document.getElementById('components-datepicker-demo-range'));
```` ````

View File

@ -18,7 +18,7 @@ var Picker = React.createClass({
} }
}); });
React.render( ReactDOM.render(
<Picker /> <Picker />
, document.getElementById('components-datepicker-demo-select')); , document.getElementById('components-datepicker-demo-select'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Datepicker = antd.Datepicker; var Datepicker = antd.Datepicker;
React.render( ReactDOM.render(
<div> <div>
<Datepicker size="large" /> <Datepicker size="large" />
<Datepicker /> <Datepicker />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Datepicker = antd.Datepicker; var Datepicker = antd.Datepicker;
React.render( ReactDOM.render(
<Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" /> <Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" />
, document.getElementById('components-datepicker-demo-time')); , document.getElementById('components-datepicker-demo-time'));
```` ````

View File

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import Calendar, {MonthCalendar, Picker as Datepicker} from 'rc-calendar'; import Calendar from 'rc-calendar';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import Datepicker from 'rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar'; import GregorianCalendar from 'gregorian-calendar';
import zhCn from 'gregorian-calendar/lib/locale/zh-cn'; import zhCn from 'gregorian-calendar/lib/locale/zh-cn';
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn'; import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
@ -10,11 +12,6 @@ import Locale from 'gregorian-calendar-format/lib/locale/zh-cn';
Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月', Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月']; '7月', '8月', '9月', '10月', '11月', '12月'];
//
//
let defaultCalendarValue = new GregorianCalendar(zhCn);
defaultCalendarValue.setTime(Date.now());
function createPicker(TheCalendar) { function createPicker(TheCalendar) {
return React.createClass({ return React.createClass({
getInitialState() { getInitialState() {
@ -39,13 +36,23 @@ function createPicker(TheCalendar) {
}); });
} }
}, },
getFormatter() {
let formats = this.formats = this.formats || {};
const format = this.props.format;
if (formats[format]) {
return formats[format];
}
formats[format] = new DateTimeFormat(format);
return formats[format];
},
getDefaultProps() { getDefaultProps() {
return { return {
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
placeholder: '请选择日期', placeholder: '请选择日期',
transitionName: 'slide-up', transitionName: 'slide-up',
onSelect: null, // onSelect: null, //
onChange() {} //onChangeValidator onChange() {
} //onChangeValidator
}; };
}, },
handleChange(v) { handleChange(v) {
@ -64,12 +71,10 @@ function createPicker(TheCalendar) {
<TheCalendar <TheCalendar
disabledDate={this.props.disabledDate} disabledDate={this.props.disabledDate}
locale={CalendarLocale} locale={CalendarLocale}
orient={['top', 'left']}
defaultValue={defaultCalendarValue}
showTime={this.props.showTime} showTime={this.props.showTime}
prefixCls="ant-calendar" prefixCls="ant-calendar"
showOk={this.props.showTime} showOk={this.props.showTime}
showClear={false} /> showClear={false}/>
); );
let sizeClass = ''; let sizeClass = '';
if (this.props.size === 'large') { if (this.props.size === 'large') {
@ -86,18 +91,22 @@ function createPicker(TheCalendar) {
<Datepicker <Datepicker
transitionName={this.props.transitionName} transitionName={this.props.transitionName}
disabled={this.props.disabled} disabled={this.props.disabled}
trigger={<span className="ant-calendar-picker-icon" />}
calendar={calendar} calendar={calendar}
adjustOrientOnCalendarOverflow={{x: true, y: false}}
formatter={new DateTimeFormat(this.props.format)}
value={this.state.value} value={this.state.value}
defaultValue={defaultValue} defaultValue={defaultValue}
prefixCls="ant-calendar-picker" prefixCls="ant-calendar-picker"
style={this.props.style} style={this.props.style}
onChange={this.handleChange}> onChange={this.handleChange}>
<input {
placeholder={this.props.placeholder} ({value}) => {
className={'ant-calendar-picker-input ant-input' + sizeClass}/> return ([<input
disabled={this.props.disabled}
value={value && this.getFormatter().format(value)}
placeholder={this.props.placeholder}
className={'ant-calendar-picker-input ant-input' + sizeClass}/>,
<span className="ant-calendar-picker-icon"/>]);
}
}
</Datepicker> </Datepicker>
); );
} }

View File

@ -24,7 +24,7 @@ var menu = <Menu>
</Menu.Item> </Menu.Item>
</Menu>; </Menu>;
React.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button> <Button>
某按钮 <Icon type="down" /> 某按钮 <Icon type="down" />

View File

@ -21,7 +21,7 @@ var menu = <Menu onSelect={onSelect}>
<Menu.Item key="3">第三个菜单项</Menu.Item> <Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>; </Menu>;
React.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button> <Button>
鼠标移入,点击菜单 <Icon type="down" /> 鼠标移入,点击菜单 <Icon type="down" />

View File

@ -23,7 +23,7 @@ var menu = <Menu>
<Menu.Item key="3" disabled>第三个菜单项(不可用)</Menu.Item> <Menu.Item key="3" disabled>第三个菜单项(不可用)</Menu.Item>
</Menu>; </Menu>;
React.render( ReactDOM.render(
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button> <Button>
鼠标移入 <Icon type="down" /> 鼠标移入 <Icon type="down" />

View File

@ -23,7 +23,7 @@ var menu = <Menu>
<Menu.Item key="3">第三个菜单项</Menu.Item> <Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>; </Menu>;
React.render(<div> ReactDOM.render(<div>
<Dropdown overlay={menu} trigger="click"> <Dropdown overlay={menu} trigger="click">
<Button type="primary"> <Button type="primary">
点击触发 <Icon type="down" /> 点击触发 <Icon type="down" />

View File

@ -54,7 +54,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-basic')); , document.getElementById('components-enter-animation-demo-basic'));
```` ````

View File

@ -64,7 +64,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-data')); , document.getElementById('components-enter-animation-demo-enter-data'));
```` ````

View File

@ -44,7 +44,7 @@ var Test = React.createClass({
<Button type="primary" onClick={this.onClick}>切换</Button> <Button type="primary" onClick={this.onClick}>切换</Button>
</div> </div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}> <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? {this.state.show ?
<div className="demo-content" key='demo'> <div className="demo-content" key='demo'>
<div className="demo-kp"> <div className="demo-kp">
<ul> <ul>
@ -70,7 +70,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-leave')); , document.getElementById('components-enter-animation-demo-enter-leave'));
```` ````

View File

@ -96,7 +96,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-form')); , document.getElementById('components-enter-animation-demo-form'));
```` ````

View File

@ -83,7 +83,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-page')); , document.getElementById('components-enter-animation-demo-page'));
```` ````

View File

@ -73,7 +73,7 @@ var Page2 = React.createClass({
); );
} }
}); });
React.render(( ReactDOM.render((
<Router> <Router>
<Route path="/" component={App} ignoreScrollBehavior> <Route path="/" component={App} ignoreScrollBehavior>
<Route path="page1" component={Page1} /> <Route path="page1" component={Page1} />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var EnterAnimation = antd.EnterAnimation; var EnterAnimation = antd.EnterAnimation;
React.render( ReactDOM.render(
<EnterAnimation> <EnterAnimation>
<ul key="key"> <ul key="key">
<li>依次进场</li> <li>依次进场</li>

View File

@ -66,7 +66,7 @@ var Test = React.createClass({
} }
}); });
React.render(<Test /> ReactDOM.render(<Test />
, document.getElementById('components-enter-animation-demo-style')); , document.getElementById('components-enter-animation-demo-style'));
```` ````

View File

@ -19,7 +19,7 @@ function handleSelectChange(value) {
console.log('selected ' + value); console.log('selected ' + value);
} }
React.render( ReactDOM.render(
<form className="ant-form-horizontal"> <form className="ant-form-horizontal">
<div className="ant-form-item"> <div className="ant-form-item">
<label htmlFor="control-input" className="col-6">输入框:</label> <label htmlFor="control-input" className="col-6">输入框:</label>

View File

@ -18,7 +18,7 @@ var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group; var RadioGroup = antd.Radio.Group;
var Button = antd.Button; var Button = antd.Button;
React.render( ReactDOM.render(
<form className="ant-form-horizontal"> <form className="ant-form-horizontal">
<div className="ant-form-item ant-form-item-compact"> <div className="ant-form-item ant-form-item-compact">
<label htmlFor="userName" className="col-6" required>用户名:</label> <label htmlFor="userName" className="col-6" required>用户名:</label>

View File

@ -10,7 +10,7 @@
var Checkbox = antd.Checkbox; var Checkbox = antd.Checkbox;
var Button = antd.Button; var Button = antd.Button;
React.render( ReactDOM.render(
<form className="ant-form-inline"> <form className="ant-form-inline">
<div className="ant-form-item"> <div className="ant-form-item">
<label htmlFor="userName">账户:</label> <label htmlFor="userName">账户:</label>

View File

@ -10,7 +10,7 @@
var Select = antd.Select; var Select = antd.Select;
var Option = Select.Option; var Option = Select.Option;
React.render( ReactDOM.render(
<form className="ant-form-horizontal"> <form className="ant-form-horizontal">
<div className="ant-form-item"> <div className="ant-form-item">
<label className="col-6" htmlFor="site1">标签输入框:</label> <label className="col-6" htmlFor="site1">标签输入框:</label>

View File

@ -37,7 +37,7 @@ function onInputNumberChange(v){
console.log('changed',v); console.log('changed',v);
} }
React.render( ReactDOM.render(
<form className="ant-form-horizontal"> <form className="ant-form-horizontal">
<div className="ant-form-item"> <div className="ant-form-item">
<label className="col-8" required>InputNumber 数字输入框:</label> <label className="col-8" required>InputNumber 数字输入框:</label>

View File

@ -13,7 +13,7 @@ function onChange(value) {
console.log('changed', value); console.log('changed', value);
} }
React.render( ReactDOM.render(
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} /> <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
, document.getElementById('components-input-number-demo-basic')); , document.getElementById('components-input-number-demo-basic'));
```` ````

View File

@ -31,5 +31,5 @@ var Test = React.createClass({
} }
}); });
React.render(<Test />, document.getElementById('components-input-number-demo-disabled')); ReactDOM.render(<Test />, document.getElementById('components-input-number-demo-disabled'));
```` ````

View File

@ -13,7 +13,7 @@ function onChange(value) {
console.log('changed', value); console.log('changed', value);
} }
React.render( ReactDOM.render(
<div> <div>
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} /> <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} /> <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
@ -26,4 +26,4 @@ React.render(
.ant-input-number{ .ant-input-number{
margin-right: 10px; margin-right: 10px;
} }
```` ````

View File

@ -44,5 +44,5 @@ var App = React.createClass({
} }
}); });
React.render(<App />, document.getElementById('components-menu-demo-horizontal')); ReactDOM.render(<App />, document.getElementById('components-menu-demo-horizontal'));
```` ````

View File

@ -61,5 +61,5 @@ var Sider = React.createClass({
</Menu>; </Menu>;
} }
}); });
React.render(<Sider />, document.getElementById('components-menu-demo-sider-current')); ReactDOM.render(<Sider />, document.getElementById('components-menu-demo-sider-current'));
```` ````

View File

@ -52,5 +52,5 @@ var Sider = React.createClass({
</Menu>; </Menu>;
} }
}); });
React.render(<Sider />, document.getElementById('components-menu-demo-sider')); ReactDOM.render(<Sider />, document.getElementById('components-menu-demo-sider'));
```` ````

View File

@ -16,7 +16,7 @@ function handleClick(e) {
console.log('click', e); console.log('click', e);
} }
React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical"> ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}> <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItem key="1">选项1</MenuItem> <MenuItem key="1">选项1</MenuItem>
<MenuItem key="2">选项2</MenuItem> <MenuItem key="2">选项2</MenuItem>

View File

@ -14,7 +14,7 @@ var success = function() {
message.success('这是一条成功的提示,并将于10秒后消失', 10); message.success('这是一条成功的提示,并将于10秒后消失', 10);
}; };
React.render(<Button type="primary" onClick={success}>自定义时长提示</Button> ReactDOM.render(<Button type="primary" onClick={success}>自定义时长提示</Button>
, document.getElementById('components-message-demo-duration')); , document.getElementById('components-message-demo-duration'));
```` ````

View File

@ -14,6 +14,6 @@ var error = function() {
message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示'); message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
}; };
React.render(<Button type="primary" onClick={error}>显示失败提示</Button> ReactDOM.render(<Button type="primary" onClick={error}>显示失败提示</Button>
, document.getElementById('components-message-demo-error')); , document.getElementById('components-message-demo-error'));
```` ````

View File

@ -14,6 +14,6 @@ var info = function() {
message.info('这是一条普通的提醒'); message.info('这是一条普通的提醒');
}; };
React.render(<Button type="primary" onClick={info}>显示普通提醒</Button> ReactDOM.render(<Button type="primary" onClick={info}>显示普通提醒</Button>
, document.getElementById('components-message-demo-info')); , document.getElementById('components-message-demo-info'));
```` ````

View File

@ -16,6 +16,6 @@ var success = function() {
setTimeout(hide, 2500); setTimeout(hide, 2500);
}; };
React.render(<Button onClick={success}>显示加载中...</Button> ReactDOM.render(<Button onClick={success}>显示加载中...</Button>
, document.getElementById('components-message-demo-loading')); , document.getElementById('components-message-demo-loading'));
```` ````

View File

@ -14,7 +14,7 @@ var success = function() {
message.success('这是一条成功的提示'); message.success('这是一条成功的提示');
}; };
React.render(<Button type="primary" onClick={success}>显示成功提示</Button> ReactDOM.render(<Button type="primary" onClick={success}>显示成功提示</Button>
, document.getElementById('components-message-demo-success')); , document.getElementById('components-message-demo-success'));
```` ````

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import Dialog from './index'; import Dialog from './index';
import Icon from '../iconfont'; import Icon from '../iconfont';
import {Button} from '../button'; import {Button} from '../button';
@ -23,7 +24,7 @@ export default function (props) {
d.setState({ d.setState({
visible: false visible: false
}); });
React.unmountComponentAtNode(div); ReactDOM.unmountComponentAtNode(div);
} }
function onCancel() { function onCancel() {
@ -87,7 +88,7 @@ export default function (props) {
</div>; </div>;
} }
React.render(<Dialog ReactDOM.render(<Dialog
prefixCls="ant-modal" prefixCls="ant-modal"
className="ant-confirm" className="ant-confirm"
visible={true} visible={true}

View File

@ -44,5 +44,5 @@ var App = React.createClass({
} }
}); });
React.render(<App /> , document.getElementById('components-modal-demo-basic')); ReactDOM.render(<App /> , document.getElementById('components-modal-demo-basic'));
```` ````

View File

@ -24,7 +24,7 @@ function showConfirm(){
}); });
} }
React.render( ReactDOM.render(
<Button onClick={showConfirm}> <Button onClick={showConfirm}>
确认对话框 确认对话框
</Button>, document.getElementById('components-modal-demo-confirm-promise')); </Button>, document.getElementById('components-modal-demo-confirm-promise'));

View File

@ -21,7 +21,7 @@ function showConfirm(){
}); });
} }
React.render( ReactDOM.render(
<Button onClick={showConfirm}> <Button onClick={showConfirm}>
确认对话框 确认对话框
</Button>, document.getElementById('components-modal-demo-confirm')); </Button>, document.getElementById('components-modal-demo-confirm'));

View File

@ -53,5 +53,5 @@ var Test = React.createClass({
} }
}); });
React.render(<Test/> , document.getElementById('components-modal-demo-custom')); ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-custom'));
```` ````

View File

@ -55,5 +55,5 @@ var Test = React.createClass({
} }
}); });
React.render(<Test/> , document.getElementById('components-modal-demo-footer')); ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-footer'));
```` ````

View File

@ -32,7 +32,7 @@ function error() {
}); });
} }
React.render(<div> ReactDOM.render(<div>
<Button onClick={info}>信息提示</Button> <Button onClick={info}>信息提示</Button>
<Button onClick={success}>成功提示</Button> <Button onClick={success}>成功提示</Button>
<Button onClick={error}>失败提示</Button> <Button onClick={error}>失败提示</Button>

View File

@ -17,7 +17,7 @@ var openNotification = function() {
}); });
}; };
React.render( ReactDOM.render(
<div> <div>
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button> <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
</div>, </div>,

View File

@ -19,7 +19,7 @@ var openNotification = function() {
notification.open(args); notification.open(args);
}; };
React.render( ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button> <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
, document.getElementById('components-notification-demo-duration')); , document.getElementById('components-notification-demo-duration'));
```` ````

View File

@ -23,7 +23,7 @@ var openNotification = function() {
notification.open(args); notification.open(args);
}; };
React.render( ReactDOM.render(
<div> <div>
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button> <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
</div>, </div>,

View File

@ -32,7 +32,7 @@ var openNotification = function() {
}); });
}; };
React.render( ReactDOM.render(
<div> <div>
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button> <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
</div>, </div>,

View File

@ -19,7 +19,7 @@ var openNotificationWithIcon = function(type) {
}; };
}; };
React.render(<div> ReactDOM.render(<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button> <Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button> <Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warn')}>警告</Button> <Button onClick={openNotificationWithIcon('warn')}>警告</Button>

View File

@ -13,7 +13,7 @@ function onChange(page) {
console.log(page); console.log(page);
} }
React.render( ReactDOM.render(
<Pagination onChange={onChange} total={50} />, <Pagination onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-basic')); document.getElementById('components-pagination-demo-basic'));
```` ````

View File

@ -17,7 +17,7 @@ function onShowSizeChange(current, pageSize) {
console.log(current, pageSize); console.log(current, pageSize);
} }
React.render( ReactDOM.render(
<Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />, <Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
document.getElementById('components-pagination-demo-changer')); document.getElementById('components-pagination-demo-changer'));
```` ````

View File

@ -13,7 +13,7 @@ function onChange(page) {
console.log(page); console.log(page);
} }
React.render( ReactDOM.render(
<Pagination showQuickJumper={true} onChange={onChange} total={500} />, <Pagination showQuickJumper={true} onChange={onChange} total={500} />,
document.getElementById('components-pagination-demo-jump')); document.getElementById('components-pagination-demo-jump'));
```` ````

View File

@ -13,7 +13,7 @@ function onChange(page) {
console.log(page); console.log(page);
} }
React.render( ReactDOM.render(
<Pagination className="mini" onChange={onChange} total={50} />, <Pagination className="mini" onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-mini')); document.getElementById('components-pagination-demo-mini'));
```` ````

View File

@ -13,7 +13,7 @@ function onChange(page) {
console.log(page); console.log(page);
} }
React.render( ReactDOM.render(
<Pagination onChange={onChange} total={500} />, <Pagination onChange={onChange} total={500} />,
document.getElementById('components-pagination-demo-more')); document.getElementById('components-pagination-demo-more'));
```` ````

View File

@ -13,7 +13,7 @@ function onChange(page) {
console.log(page); console.log(page);
} }
React.render( ReactDOM.render(
<Pagination simple onChange={onChange} total={50} />, <Pagination simple onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-simple')); document.getElementById('components-pagination-demo-simple'));
```` ````

View File

@ -18,7 +18,7 @@ function cancel() {
message.error('点击了取消'); message.error('点击了取消');
} }
React.render( ReactDOM.render(
<Popconfirm title="确定要删除这个任务吗?" onConfirm={confirm} onCancel={cancel}> <Popconfirm title="确定要删除这个任务吗?" onConfirm={confirm} onCancel={cancel}>
<a href="javascript:;">删除</a> <a href="javascript:;">删除</a>
</Popconfirm> </Popconfirm>

View File

@ -15,7 +15,7 @@ function confirm() {
message.info('点击了确定'); message.info('点击了确定');
} }
React.render(<div> ReactDOM.render(<div>
<Popconfirm placement="left" title={text} onConfirm={confirm}> <Popconfirm placement="left" title={text} onConfirm={confirm}>
<a href="javascript:;">左边</a> <a href="javascript:;">左边</a>
</Popconfirm> </Popconfirm>

View File

@ -15,7 +15,7 @@ var content = <div>
<p>内容</p> <p>内容</p>
</div>; </div>;
React.render( ReactDOM.render(
<Popover overlay={content} title="标题"> <Popover overlay={content} title="标题">
<Button type="primary">弹出卡片</Button> <Button type="primary">弹出卡片</Button>
</Popover> </Popover>

View File

@ -16,7 +16,7 @@ var content = <div>
<p>内容</p> <p>内容</p>
</div>; </div>;
React.render(<div> ReactDOM.render(<div>
<Popover placement="left" title={text} overlay={content}> <Popover placement="left" title={text} overlay={content}>
<Button></Button> <Button></Button>
</Popover> </Popover>

View File

@ -15,7 +15,7 @@ var content = <div>
<p>内容</p> <p>内容</p>
</div>; </div>;
React.render(<div> ReactDOM.render(<div>
<Popover overlay={content} title="标题" trigger="hover"> <Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button> <Button>移入</Button>
</Popover> </Popover>

View File

@ -47,6 +47,6 @@ var MyProgress = React.createClass({
} }
}); });
React.render(<MyProgress />, document.getElementById('components-progress-demo-circle-dynamic')); ReactDOM.render(<MyProgress />, document.getElementById('components-progress-demo-circle-dynamic'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var ProgressCircle = antd.Progress.Circle; var ProgressCircle = antd.Progress.Circle;
React.render( ReactDOM.render(
<div> <div>
<ProgressCircle percent="30" width="80" /> <ProgressCircle percent="30" width="80" />
<ProgressCircle percent="70" width="80" status="exception" /> <ProgressCircle percent="70" width="80" status="exception" />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var ProgressCircle = antd.Progress.Circle; var ProgressCircle = antd.Progress.Circle;
React.render( ReactDOM.render(
<div> <div>
<ProgressCircle percent="30" /> <ProgressCircle percent="30" />
<ProgressCircle percent="70" status="exception" /> <ProgressCircle percent="70" status="exception" />

View File

@ -47,6 +47,6 @@ var MyProgress = React.createClass({
} }
}); });
React.render(<MyProgress />, document.getElementById('components-progress-demo-dynamic')); ReactDOM.render(<MyProgress />, document.getElementById('components-progress-demo-dynamic'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Progress = antd.Progress.Line; var Progress = antd.Progress.Line;
React.render( ReactDOM.render(
<div style={{ width: 170 }}> <div style={{ width: 170 }}>
<Progress percent="30" strokeWidth="5" /> <Progress percent="30" strokeWidth="5" />
<Progress percent="50" strokeWidth="5" status="active" /> <Progress percent="50" strokeWidth="5" status="active" />

View File

@ -9,7 +9,7 @@
````jsx ````jsx
var Progress = antd.Progress.Line; var Progress = antd.Progress.Line;
React.render( ReactDOM.render(
<div> <div>
<Progress percent="30" /> <Progress percent="30" />
<Progress percent="50" status="active" /> <Progress percent="50" status="active" />

View File

@ -9,6 +9,6 @@
````jsx ````jsx
var Radio = antd.Radio; var Radio = antd.Radio;
React.render(<Radio>Radio</Radio> ReactDOM.render(<Radio>Radio</Radio>
, document.getElementById('components-radio-demo-basic')); , document.getElementById('components-radio-demo-basic'));
```` ````

View File

@ -39,5 +39,5 @@ var App = React.createClass({
} }
}); });
React.render(<App />, document.getElementById('components-radio-demo-disable')); ReactDOM.render(<App />, document.getElementById('components-radio-demo-disable'));
```` ````

View File

@ -14,7 +14,7 @@ function onChange(e) {
console.log('radio checked:' + e.target.value); console.log('radio checked:' + e.target.value);
} }
React.render(( ReactDOM.render((
<RadioGroup onChange={onChange} defaultValue="a"> <RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton> <RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton> <RadioButton value="b">上海</RadioButton>

Some files were not shown because too many files have changed in this diff Show More