mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
beta2
This commit is contained in:
parent
aed7eae2bc
commit
76b0f673ec
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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}>
|
||||||
|
@ -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" />
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
@ -57,5 +57,5 @@ var App = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
React.render(<App />, container);
|
ReactDOM.render(<App />, container);
|
||||||
````
|
````
|
||||||
|
@ -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}/>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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 />
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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() {} //onChange可用于Validator
|
onChange() {
|
||||||
|
} //onChange可用于Validator
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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} />
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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}
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
|
@ -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'));
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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>
|
||||||
|
@ -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>,
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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>,
|
||||||
|
@ -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>,
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
|
||||||
|
@ -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" />
|
||||||
|
@ -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" />
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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'));
|
||||||
````
|
````
|
||||||
|
@ -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
Loading…
Reference in New Issue
Block a user