mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

Merge

Browse Source
This commit is contained in:
afc163 2015-10-22 21:30:28 +08:00
commit 4bed95ef6a
210 changed files with 940 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
404.html Normal file
View File

@ -0,0 +1,6 @@
<p>找不到此页，三秒后返回首页...</p>
<script>
setTimeout(function() {
location.href = '/';
}, 3000);
</script>

40
README-en_US.md
View File

@ -1,40 +0,0 @@
# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
An enterprise-class UI design language and React-based implementation.
![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
## Features
- An enterprise-class graphical design language and framework for financial applications
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A Component development model based on React.
- Backed by the npm ecosystem.
- webpack-based debug builds supporting ES6
## Usage example
```jsx
import { Datepicker } from 'antd';
React.render(<Datepicker />, mountNode);
```
## Links
- [Home page](http://ant.design/)
- [Documentation](http://ant.design/docs/introduce)
- [Components](http://ant.design/components/)
- [Build/Debug tools](https://github.com/ant-design/antd-bin)
- [Roadmap](https://github.com/ant-design/ant-design/issues/9)
- [ChangeLog](CHANGELOG.md)
- [React modules](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## Contributing
We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues).

42
README-zh_CN.md Normal file
View File

@ -0,0 +1,42 @@
# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
一套企业级的 UI 设计语言和 React 实现。
<p align="center">
<a href="http://ant.design">
<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
## 特性
- 提炼自企业级后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
## 示例
```jsx
import { Datepicker } from 'antd';
ReactDOM.render(<Datepicker />, mountNode);
```
## 链接
- [首页](http://ant.design/)
- [文档和组件](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-design/antd-bin)
- [开发计划](https://github.com/ant-design/ant-design/issues/9)
- [修改记录](CHANGELOG.md)
- [React 模块](http://react-component.github.io/)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## 如何贡献
我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

53
README.md
View File

@ -1,43 +1,40 @@
# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
一套企业级的 UI 设计语言和 React 实现。
An enterprise-class UI design language and React-based implementation.
<p align="center">
<a href="http://ant.design">
<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
## 特性
## Features
- 提炼自企业级后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
- An enterprise-class graphical design language and framework for financial applications
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A Component development model based on React.
- Backed by the npm ecosystem.
- webpack-based debug builds supporting ES6
## 示例
## Usage example
```jsx
import { Datepicker } from 'antd';
React.render(<Datepicker />, mountNode);
ReactDOM.render(<Datepicker />, mountNode);
```
## 链接
## Links
- [首页](http://ant.design/)
- [文档](http://ant.design/docs/introduce)
- [组件](http://ant.design/components/)
- [构建调试 antd-bin](https://github.com/ant-design/antd-bin)
- [开发计划](https://github.com/ant-design/ant-design/issues/9)
- [修改记录](CHANGELOG.md)
- [React 模块](http://react-component.github.io/)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [Home page](http://ant.design/)
- [Documentation and Components](http://ant.design/docs/introduce)
- [Components](http://ant.design/components/)
- [Build/Debug tools](https://github.com/ant-design/antd-bin)
- [Roadmap](https://github.com/ant-design/ant-design/issues/9)
- [ChangeLog](CHANGELOG.md)
- [React modules](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## 如何贡献
我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
## Contributing
We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues).

2
components/affix/demo/basic.md
View File

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

2
components/affix/demo/offset.md
View File

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

5
components/affix/index.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import rcUtil from 'rc-util';
function getScroll(w, top) {
@ -52,7 +53,7 @@ let Affix = React.createClass({
handleScroll() {
let affix = this.state.affix;
let scrollTop = getScroll(window, true);
let elemOffset = getOffset(this.getDOMNode());
let elemOffset = getOffset(ReactDOM.findDOMNode(this));
if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
this.setState({
@ -60,7 +61,7 @@ let Affix = React.createClass({
affixStyle: {
top: this.props.offset,
left: elemOffset.left,
width: this.getDOMNode().offsetWidth
width: ReactDOM.findDOMNode(this).offsetWidth
}
});
}

2
components/alert/demo/basic.md
View File

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

4
components/alert/demo/closable.md
View File

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

2
components/alert/demo/close-type.md
View File

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

2
components/alert/demo/description.md
View File

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

2
components/alert/demo/style.md
View File

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

3
components/alert/index.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import Icon from '../iconfont';
@ -15,7 +16,7 @@ export default React.createClass({
};
},
handleClose(e) {
let dom = React.findDOMNode(this);
let dom = ReactDOM.findDOMNode(this);
dom.style.height = dom.offsetHeight + 'px';
// Magic code
// 重复一次后才能正确设置 height

2
components/badge/demo/99plus.md
View File

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

2
components/badge/demo/basic.md
View File

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

2
components/badge/demo/dot.md
View File

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

2
components/badge/demo/link.md
View File

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

2
components/breadcrumb/demo/basic.md
View File

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

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

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

2
components/breadcrumb/demo/withIcon.md
View File

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

10
components/button/button-group.jsx
View File

@ -6,9 +6,17 @@ const prefix = 'ant-btn-group-';
export default class ButtonGroup extends React.Component {
render() {
const {size, className, ...others} = this.props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
'ant-btn-group': true,
[prefix + size]: size,
[prefix + sizeCls]: sizeCls,
[className]: className
});

9
components/button/button.jsx
View File

@ -28,11 +28,18 @@ export default class Button extends React.Component {
const props = this.props;
const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
'ant-btn': true,
[prefix + type]: type,
[prefix + shape]: shape,
[prefix + size]: size,
[prefix + sizeCls]: sizeCls,
[prefix + 'loading']: ('loading' in props && props.loading !== false),
[className]: className
});

4
components/button/demo/basic.md
View File

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

8
components/button/demo/button-group.md
View File

@ -4,7 +4,7 @@
可以将多个 `Button` 放入 `ButtonGroup` 的容器中。
通过设置 `size` 为 `lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
---
@ -13,7 +13,7 @@ var Button = antd.Button;
var ButtonGroup = antd.ButtonGroup;
var Icon = antd.Icon;
React.render(<div>
ReactDOM.render(<div>
<h4>基本组合</h4>
<ButtonGroup>
<Button type="primary">确定</Button>
@ -64,7 +64,7 @@ React.render(<div>
</ButtonGroup>
<h4>尺寸</h4>
<ButtonGroup size="lg">
<ButtonGroup size="large">
<Button type="ghost">大</Button>
<Button type="ghost">大</Button>
<Button type="ghost">大</Button>
@ -74,7 +74,7 @@ React.render(<div>
<Button type="ghost">默认</Button>
<Button type="ghost">默认</Button>
</ButtonGroup>
<ButtonGroup size="sm">
<ButtonGroup size="small">
<Button type="ghost">小</Button>
<Button type="ghost">小</Button>
<Button type="ghost">小</Button>

2
components/button/demo/icon.md
View File

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

2
components/button/demo/loading.md
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>

2
components/button/demo/shape.md
View File

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

8
components/button/demo/size.md
View File

@ -4,17 +4,17 @@
按钮有大、中、小三种尺寸。
通过设置 `size` 为 `lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
---
````jsx
var Button = antd.Button;
React.render(<div>
<Button type="primary" size="lg">大号按钮</Button>
ReactDOM.render(<div>
<Button type="primary" size="large">大号按钮</Button>
<Button type="primary">中号按钮(默认)</Button>
<Button type="primary" size="sm">小号按钮</Button>
<Button type="primary" size="small">小号按钮</Button>
</div>
, document.getElementById('components-button-demo-size'));
````

2
components/button/demo/status.md
View File

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

2
components/button/index.md
View File

@ -24,7 +24,7 @@
type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | Enum | undefined
loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
onClick | `click` 事件的 handler | Function | `function() {}`

2
components/carousel/demo/autoplay.md
View File

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

2
components/carousel/demo/basic.md
View File

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

2
components/carousel/demo/fade.md
View File

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

2
components/carousel/demo/vertical.md
View File

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

2
components/checkbox/demo/basic.md
View File

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

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

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

2
components/checkbox/demo/disable.md
View File

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

2
components/collapse/demo/accordion.md
View File

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

2
components/collapse/demo/basic.md
View File

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

2
components/collapse/demo/mix.md
View File

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

2
components/datepicker/demo/basic.md
View File

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

4
components/datepicker/demo/disabled.md
View File

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

4
components/datepicker/demo/formatter.md
View File

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

4
components/datepicker/demo/range.md
View File

@ -1,6 +1,6 @@
# 范围
- order: 3
- order: 6
设置 `disabledDate` 方法，来确定不可选时段。
@ -15,7 +15,7 @@ var disabledDate = function(current, value) {
return current.getTime() > Date.now();
};
React.render(
ReactDOM.render(
<Datepicker disabledDate={disabledDate} />
, document.getElementById('components-datepicker-demo-range'));
````

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

@ -2,7 +2,7 @@
- order: 2
通过设置选择日期的回调事件 `onSelect`，完成交互行为。
通过设置选择日期的回调事件 `onChange`，完成交互行为。
---
@ -14,11 +14,11 @@ var Picker = React.createClass({
console.log(new Date(value.getTime()));
},
render: function() {
return <Datepicker onSelect={this.handleChange} />
return <Datepicker onChange={this.handleChange} />
}
});
React.render(
ReactDOM.render(
<Picker />
, document.getElementById('components-datepicker-demo-select'));
````

2
components/datepicker/demo/size.md
View File

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

61
components/datepicker/demo/start-end.md Normal file
View File

@ -0,0 +1,61 @@
# 开始结束时间约束
- order: 7
设置 `disabledDate` 方法，来约束开始和结束时间的选择。
---
````jsx
var Datepicker = antd.Datepicker;
var Test = React.createClass({
getInitialState() {
return {
startValue: null,
endValue: null
};
},
disabledEndDate(endValue) {
if (!endValue || !this.state.startValue) {
return false;
}
return endValue.getTime() <= this.state.startValue.getTime();
},
disabledStartDate(startValue) {
if (!startValue || !this.state.endValue) {
return false;
}
return startValue.getTime() >= this.state.endValue.getTime();
},
onChange(field, value) {
this.setState({
[field]: value,
});
},
render() {
var state = this.state;
return <div style={{width: 240, margin: 20}}>
<p>
开始时间：
<Datepicker disabledDate={this.disabledStartDate} value={state.startValue}
onChange={this.onChange.bind(this,'startValue')}/>
</p>
<p>
结束时间：
<Datepicker disabledDate={this.disabledEndDate} value={state.endValue}
onChange={this.onChange.bind(this,'endValue')}/>
</p>
</div>;
}
});
ReactDOM.render(
<Test />
, document.getElementById('components-datepicker-demo-range'));
````

2
components/datepicker/demo/time.md
View File

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

57
components/datepicker/index.jsx
View File

@ -1,5 +1,7 @@
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 zhCn from 'gregorian-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月',
'7月', '8月', '9月', '10月', '11月', '12月'];
// 以下两行代码
// 给没有初始值的日期选择框提供本地化信息
let defaultCalendarValue = new GregorianCalendar(zhCn);
defaultCalendarValue.setTime(Date.now());
function createPicker(TheCalendar) {
return React.createClass({
getInitialState() {
@ -39,32 +36,51 @@ 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() {
return {
format: 'yyyy-MM-dd',
placeholder: '请选择日期',
transitionName: 'slide-up',
onSelect() {
}
onSelect: null, //向前兼容
calendarStyle: {},
onChange() {
} //onChange可用于Validator
};
},
handleInputChange() {},
handleChange(v) {
this.setState({
value: v
});
this.props.onSelect(new Date(v.getTime()));
let timeValue = null;
if (v) {
timeValue = new Date(v.getTime());
}
//onSelect为向前兼容.
if (this.props.onSelect) {
require('util-deprecate')(this.props.onSelect, 'onSelect property of Datepicker is deprecated, use onChange instead')(timeValue);
}
this.props.onChange(timeValue);
},
render() {
let calendar = (
<TheCalendar
style={this.props.calendarStyle}
disabledDate={this.props.disabledDate}
locale={CalendarLocale}
orient={['top', 'left']}
defaultValue={defaultCalendarValue}
showTime={this.props.showTime}
prefixCls="ant-calendar"
showOk={this.props.showTime}
showClear={false} />
showClear={false}/>
);
let sizeClass = '';
if (this.props.size === 'large') {
@ -81,18 +97,23 @@ function createPicker(TheCalendar) {
<Datepicker
transitionName={this.props.transitionName}
disabled={this.props.disabled}
trigger={<span className="ant-calendar-picker-icon" />}
calendar={calendar}
adjustOrientOnCalendarOverflow={{x: true, y: false}}
formatter={new DateTimeFormat(this.props.format)}
value={this.state.value}
defaultValue={defaultValue}
prefixCls="ant-calendar-picker"
style={this.props.style}
onChange={this.handleChange}>
<input
placeholder={this.props.placeholder}
className={'ant-calendar-picker-input ant-input' + sizeClass}/>
{
({value}) => {
return ([<input
disabled={this.props.disabled}
onChange={this.handleInputChange}
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>
);
}

3
components/datepicker/index.md
View File

@ -24,9 +24,10 @@
| defaultValue | 默认日期 | string | 无 |
| format | 展示的日期格式 | string | "yyyy-MM-dd" |
| disabledDate | 不可选择的日期 | function | 无 |
| onSelect | 选择日期的回调 | function | 无 |
| onChange | 日期发生变化的回调，发生在用户选择日期时 | function | 无 |
| showTime | 显示时间选择条 | boolean | false |
| disabled | 禁用 | bool | false |
| calendarStyle | 格外的弹出日历样式，例如 zIndex | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
<style>

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

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

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

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

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

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

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

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

2
components/enter-animation/demo/basic.md
View File

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

2
components/enter-animation/demo/enter-data.md
View File

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

4
components/enter-animation/demo/enter-leave.md
View File

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

2
components/enter-animation/demo/form.md
View File

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

2
components/enter-animation/demo/page.md
View File

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

2
components/enter-animation/demo/router.md
View File

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

2
components/enter-animation/demo/simple.md
View File

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

2
components/enter-animation/demo/style.md
View File

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

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

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

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

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

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

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

2
components/form/demo/inputs.md
View File

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

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

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

2
components/input-number/demo/basic.md
View File

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

2
components/input-number/demo/disabled.md
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'));
````

4
components/input-number/demo/size.md
View File

@ -13,7 +13,7 @@ function onChange(value) {
console.log('changed', value);
}
React.render(
ReactDOM.render(
<div>
<InputNumber size="large" 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{
margin-right: 10px;
}
````
````

2
components/menu/demo/horizontal.md
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'));
````

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

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

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

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

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

@ -16,7 +16,7 @@ function handleClick(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>}>
<MenuItem key="1">选项1</MenuItem>
<MenuItem key="2">选项2</MenuItem>

2
components/message/demo/duration.md
View File

@ -14,7 +14,7 @@ var success = function() {
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'));
````

2
components/message/demo/error.md
View File

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

2
components/message/demo/info.md
View File

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

2
components/message/demo/loading.md
View File

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

2
components/message/demo/success.md
View File

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

5
components/modal/confirm.jsx
View File

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

2
components/modal/demo/basic.md
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'));
````

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

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

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

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

2
components/modal/demo/custom.md
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'));
````

2
components/modal/demo/footer.md
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'));
````

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

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

2
components/modal/index.jsx
View File

@ -50,7 +50,7 @@ let AntModal = React.createClass({
}
}
if ('confirmLoading' in nextProps) {
newState.confirmLoading = nextProps.confirmLoading;
newState.confirmLoading = !!nextProps.confirmLoading;
}
this.setState(newState);
},

2
components/notification/demo/basic.md
View File

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

2
components/notification/demo/duration.md
View File

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

2
components/notification/demo/onclose.md
View File

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

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

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

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

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

2
components/pagination/demo/basic.md
View File

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

2
components/pagination/demo/changer.md
View File

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

2
components/pagination/demo/jump.md
View File

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

4
components/pagination/demo/mini.md
View File

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

2
components/pagination/demo/more.md
View File

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

2
components/pagination/demo/simple.md
View File

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

6
components/pagination/index.jsx
View File

@ -6,9 +6,13 @@ const prefixCls = 'ant-pagination';
export default class AntPagination extends React.Component {
render() {
let className = this.props.className;
if (this.props.size === 'small') {
className += ' mini';
}
return <Pagination selectComponentClass={Select}
selectPrefixCls="ant-select"
prefixCls={prefixCls}
{...this.props} />;
{...this.props} className={className} />;
}
}

2
components/pagination/index.md
View File

@ -28,5 +28,5 @@
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
| onShowSizeChange | pageSize 变化的回调 | Function | noop |
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
| className | 当为「mini」时，是小尺寸分页 | String | ant-pagination |
| size | 当为「small」时，是小尺寸分页 | String | "" |
| simple | 当添加该属性时，显示为简单分页 | Object | 无 |

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