mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

Merge branch 'develop-0.10.0' of https://github.com/ant-design/ant-design into develop-0.10.0

Browse Source 
Conflicts:
	package.json
This commit is contained in:
ioldfish 2015-10-27 16:28:00 +08:00
commit 49c019f86d
235 changed files with 1760 additions and 1317 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>

7
CHANGELOG.md
View File

@ -4,6 +4,13 @@
---
## 0.9.2 `2015-10-26`
* Tooltip 的 title 为空时不展示浮层。[9b53117](9b5311791e73270c7c16a602ac74dd59719a5f76)
* 修复 Upload 文件列表链接的 target 属性。[340a170](340a1702b6a7b065ac02d417c891e1886dfe470d)
* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](9ef14500f3abfcc7081f8dceab8187ec835e3918)
* 修复一些小的样式问题。
## 0.9.1 `2015-09-26`
* 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)

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
});

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

@ -6,12 +6,14 @@
通过设置 `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>

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

@ -10,11 +10,11 @@
var Button = antd.Button;
var Icon = antd.Icon;
React.render(<div>
<Button type="primary" shape="circle" size="lg">
ReactDOM.render(<div>
<Button type="primary" shape="circle" size="large">
<Icon type="search" />
</Button>
<Button type="primary" size="lg">
<Button type="primary" size="large">
<Icon type="search" />
大按钮
</Button>
@ -27,23 +27,23 @@ React.render(<div>
中按钮
</Button>
<Button type="primary" shape="circle" size="sm">
<Button type="primary" shape="circle" size="small">
<Icon type="search" />
</Button>
<Button type="primary" size="sm">
<Button type="primary" size="small">
<Icon type="search" />
小按钮
</Button>
<br />
<Button type="ghost" shape="circle-outline" size="lg">
<Button type="ghost" shape="circle-outline" size="large">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline" size="sm">
<Button type="ghost" shape="circle-outline" size="small">
<Icon type="search" />
</Button>
</div>,

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

@ -22,13 +22,13 @@ var App = React.createClass({
},
render() {
return <div>
<Button type="primary" size="lg" loading>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading="true">
加载中
</Button>
<Button type="primary" size="sm" loading>
<Button type="primary" size="small" loading>
加载中
</Button>
<br />
@ -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>

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

@ -10,24 +10,24 @@
var Button = antd.Button;
var Icon = antd.Icon;
React.render(<div>
<Button type="primary" shape="circle" size="lg">
ReactDOM.render(<div>
<Button type="primary" shape="circle" size="large">
<Icon type="search" />
</Button>
<Button type="primary" shape="circle">
<Icon type="search" />
</Button>
<Button type="primary" shape="circle" size="sm">
<Button type="primary" shape="circle" size="small">
<Icon type="search" />
</Button>
<br />
<Button type="ghost" shape="circle-outline" size="lg">
<Button type="ghost" shape="circle-outline" size="large">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline" size="sm">
<Button type="ghost" shape="circle-outline" size="small">
<Icon type="search" />
</Button>
</div>

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);

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

@ -31,12 +31,12 @@ var App = React.createClass({
</label>
</p>
<p>
<Button type="primary" size="sm"
<Button type="primary" size="small"
onClick={this.toggleChecked}>
{!this.state.checked ? "选中":"取消"}
</Button>
<Button style={{'marginLeft': '10px'}}
type="primary" size="sm"
type="primary" size="small"
onClick={this.toggleDisable}>
{!this.state.disabled ? "不可用":"可用"}
</Button>
@ -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">

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

@ -7,10 +7,9 @@
---
````jsx
// or require('antd/lib/datepicker');
var Datepicker = antd.Datepicker;
React.render(
<Datepicker defaultValue="2012-12-12" />
ReactDOM.render(
<Datepicker defaultValue="2015-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'));
````

34
components/datepicker/demo/locale.md Normal file
View File

@ -0,0 +1,34 @@
# 国际化
- order: 9
通过 `locale` 配置时区、语言等，[默认配置](https://github.com/ant-design/ant-design/issues/424)。
---
````jsx
var Datepicker = antd.Datepicker;
var App = React.createClass({
getInitialState() {
return {
locale: {
timezoneOffset: 0 * 60,
firstDayOfWeek: 0,
minimalDaysInFirstWeek: 1,
lang: {
today: 'Today',
now: 'Now',
ok: 'Ok'
}
}
};
},
render() {
return <Datepicker showTime={true} locale={this.state.locale} />;
}
});
ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
````

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-start-end'));
````

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'));
````

154
components/datepicker/index.jsx
View File

@ -1,65 +1,107 @@
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 defaultLocale from './locale';
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
import DateTimeFormat from 'gregorian-calendar-format';
import objectAssign from 'object-assign';
// 和顶部文案保持一致
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());
// 转换 locale 为 rc-calender 接收的格式
function getCalendarLocale(locale) {
locale.format = locale.format || {};
[
'eras',
'months',
'shortMonths',
'weekdays',
'shortWeekdays',
'veryShortWeekdays',
'ampms',
'datePatterns',
'timePatterns',
'dateTimePattern'
].forEach(function(key) {
locale.format[key] = locale[key];
});
return locale;
}
function createPicker(TheCalendar) {
return React.createClass({
getInitialState() {
let value;
if (this.props.value) {
value = new GregorianCalendar(zhCn);
value.setTime(new Date(this.props.value).valueOf());
}
return {
value: value
};
},
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
let value = null;
if (nextProps.value) {
value = new GregorianCalendar(zhCn);
value.setTime(new Date(nextProps.value).valueOf());
}
this.setState({
value: value
});
}
},
getDefaultProps() {
return {
format: 'yyyy-MM-dd',
placeholder: '请选择日期',
transitionName: 'slide-up',
onSelect() {
}
calendarStyle: {},
onSelect: null, // 向前兼容
onChange() {}, // onChange 可用于 Validator
locale: {}
};
},
handleChange(v) {
this.setState({
value: v
});
this.props.onSelect(new Date(v.getTime()));
getInitialState() {
return {
value: this.parseDateFromValue(this.props.value)
};
},
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
value: this.parseDateFromValue(nextProps.value)
});
}
},
getLocale() {
// 统一合并为完整的 Locale
let locale = objectAssign({}, defaultLocale, this.props.locale);
locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang);
return locale;
},
getFormatter() {
const formats = this.formats = this.formats || {};
const format = this.props.format;
if (formats[format]) {
return formats[format];
}
formats[format] = new DateTimeFormat(format);
return formats[format];
},
parseDateFromValue(value) {
if (value) {
if (typeof value === 'string') {
return new DateTimeFormat(this.props.format).parse(value, this.getLocale());
} else if (value instanceof Date) {
let date = new GregorianCalendar(this.getLocale());
date.setTime(value);
return date;
}
}
return null;
},
// remove input readonly warning
handleInputChange() {},
handleChange(value) {
this.setState({ value });
const timeValue = value ? new Date(value.getTime()) : null;
// 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 = (
// 以下两行代码
// 给没有初始值的日期选择框提供本地化信息
// 否则会以周日开始排
let defaultCalendarValue = new GregorianCalendar(this.getLocale());
defaultCalendarValue.setTime(Date.now());
const calendar = (
<TheCalendar
style={this.props.calendarStyle}
disabledDate={this.props.disabledDate}
locale={CalendarLocale}
orient={['top', 'left']}
locale={getCalendarLocale(this.getLocale().lang)}
defaultValue={defaultCalendarValue}
showTime={this.props.showTime}
prefixCls="ant-calendar"
@ -72,27 +114,28 @@ function createPicker(TheCalendar) {
} else if (this.props.size === 'small') {
sizeClass = ' ant-input-sm';
}
let defaultValue;
if (this.props.defaultValue) {
defaultValue = new GregorianCalendar(zhCn);
defaultValue.setTime(new Date(this.props.defaultValue).valueOf());
}
let defaultValue = this.parseDateFromValue(this.props.defaultValue);
return (
<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>
);
}
@ -100,7 +143,6 @@ function createPicker(TheCalendar) {
}
const AntDatePicker = createPicker(Calendar);
const AntMonthPicker = createPicker(MonthCalendar);
const AntCalendar = React.createClass({
@ -111,7 +153,7 @@ const AntCalendar = React.createClass({
};
},
render() {
return <Calendar {...this.props}/>;
return <Calendar {...this.props} />;
}
});

6
components/datepicker/index.md
View File

@ -15,7 +15,7 @@
## API
```html
<Datepicker value="2015-01-01" />
<Datepicker defaultValue="2015-01-01" />
```
| 参数 | 说明 | 类型 | 默认值 |
@ -24,10 +24,12 @@
| 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 | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
<style>
.code-box-demo .ant-calendar-picker {

13
components/datepicker/locale.js Normal file
View File

@ -0,0 +1,13 @@
import objectAssign from 'object-assign';
import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh-cn';
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
import GregorianCalendarFormatLocale from 'gregorian-calendar-format/lib/locale/zh-cn';
// 统一合并为完整的 Locale
let locale = objectAssign({}, GregorianCalendarLocale);
locale.lang = objectAssign({}, CalendarLocale, GregorianCalendarFormatLocale);
// All settings at:
// https://github.com/ant-design/ant-design/issues/424
export default locale;

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" />

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

@ -1,67 +0,0 @@
# 进场和离场
- order: 1
自动。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation>
{this.state.show ?
<div className="demo-content" key='a'>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-basic'));
````
<style>
#components-enter-animation-demo-basic {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -1,77 +0,0 @@
# 指定节点动画进出场
- order: 3
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter: {
type: 'right',
interval: .1,
},
leave: {
type:'left',
interval: 0.03
},
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
<ul>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-data'));
````
<style>
#components-enter-animation-demo-enter-data {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

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

@ -1,83 +0,0 @@
# 配置进出场的样式
- order: 2
配置进出场动画样式。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter:{
type: 'right',
interval: 0.3,
callback:() => {
console.log('enter');
}
},
leave:{
type: 'left',
interval: .1,
callback:() => {
console.log('leave');
}
},
show:true,
}
},
onClick() {
this.setState({
show:!this.state.show,
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ?
<div className="demo-content" key='demo'>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-leave'));
````
<style>
#components-enter-animation-demo-enter-leave {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -1,96 +0,0 @@
# 页面的进场和离场
- order: 5
页面的进场和离场。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
show: true,
enter:{
type:'right',
ease:'cubic-bezier(0.19, 1, 0.22, 1)'
},
leave:{
type:'left',
ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
reverse:true,
interval:0.05
}
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='a'>
<div className="demo-header" enter-data leave-data={{type:'alpha'}}>
<div className="logo" leave-data={{type:'left'}}>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul >
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
<li enter-data leave-data={{type:'right'}}></li>
</ul>
</div>
<div className="demo-content" >
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:1}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1,delay:0.2}}></li>
</ul>
</div>
<div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:2}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
<ul>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
<li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
</ul>
</div>
</div>
</div>
<div className="demo-footer" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-page'));
````
<style>
#components-enter-animation-demo-page {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>

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

@ -1,99 +0,0 @@
# Router 默认进出场
- order: 7
router 组合的进场与出场动画。
---
````jsx
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var EnterAnimation = antd.EnterAnimation;
var Menu = antd.Menu;
var App = React.createClass({
getInitialState: function () {
return {};
},
clickPage() {
this.setState({
enter: {delay: 0.3},
leave: {delay: 0}
});
},
render() {
var key = this.props.location.pathname;
return (
<div>
<Menu style={{marginBottom: 20}} mode="horizontal">
<Menu.Item key='home'>
<Link to="/" onClick={this.clickPage}>首页</Link>
</Menu.Item>
<Menu.Item key='page1'>
<Link to="/page1" onClick={this.clickPage}>Page 1</Link>
</Menu.Item>
<Menu.Item key='page2'>
<Link to="/page2" onClick={this.clickPage}>Page 2</Link>
</Menu.Item>
</Menu>
<EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave}>
{React.cloneElement(this.props.children || <div key='home' className='demo-router-child'><h1>Home</h1><div>这是首页</div></div>, {key: key})}
</EnterAnimation>
</div>
);
}
});
var Page1 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 1</h1>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
</div>
);
}
});
var Page2 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 2</h1>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
</div>
);
}
});
React.render((
<Router>
<Route path="/" component={App} ignoreScrollBehavior>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>
), document.getElementById('components-enter-animation-demo-router'));
````
<style>
#components-enter-animation-demo-router {
text-align: center;
}
.demo-router-wap{
position: relative;
transition: height .5s;
width: 300px;
margin: auto;
}
.demo-router-child{
text-align:left;
}
</style>

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

@ -1,27 +0,0 @@
# 默认
- order: 0
最简单的进场例子。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
React.render(
<EnterAnimation>
<ul key="key">
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
<li>依次进场</li>
</ul>
</EnterAnimation>
, document.getElementById('components-enter-animation-demo-simple'));
````

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

@ -1,79 +0,0 @@
# style 自定义样式动画进出场
- order: 4
通过加上属性里的 `style` 来自定义 CSS 动画进出场。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Button = antd.Button;
var Test = React.createClass({
getInitialState() {
return {
enter: {
style: {
transform: "translateX(50px)",
opacity: 0
},
interval: .1,
},
leave: {
interval: 0.03
},
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<Button type="primary" onClick={this.onClick}>切换</Button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></div>
<ul>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-style'));
````
<style>
#components-enter-animation-demo-style {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>

12
components/enter-animation/index.jsx
View File

@ -1,12 +0,0 @@
import React from 'react';
import EnterAnimation from 'enter-animation';
class AntEnterAnimation extends React.Component {
render() {
return <EnterAnimation {...this.props} />;
}
}
AntEnterAnimation.to = EnterAnimation.to;
export default AntEnterAnimation;

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'));
````

15
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() {
@ -72,22 +73,22 @@ export default function (props) {
<div className="ant-confirm-content">{props.content}</div>
</div>;
let footer = <div className="ant-confirm-btns">
<Button size="lg" onClick={onCancel}>取 消</Button>
<Button type="primary" size="lg" onClick={onOk}>确 定</Button>
<Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
<Button type="primary" size="large" onClick={onOk}>确 定</Button>
</div>;
if (props.okCancel) {
footer = <div className="ant-confirm-btns">
<Button size="lg" onClick={onCancel}>取 消</Button>
<Button type="primary" size="lg" onClick={onOk}>确 定</Button>
<Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
<Button type="primary" size="large" onClick={onOk}>确 定</Button>
</div>;
} else {
footer = <div className="ant-confirm-btns">
<Button type="primary" size="lg" onClick={onOk}>知道了</Button>
<Button type="primary" size="large" onClick={onOk}>知道了</Button>
</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'));
````

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

@ -40,8 +40,8 @@ var Test = React.createClass({
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<Button key="back" size="lg" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="lg" loading={this.state.loading} onClick={this.handleOk}>
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>
]}>
@ -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>

13
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);
},
@ -76,13 +76,18 @@ let AntModal = React.createClass({
render() {
let props = this.props;
let defaultFooter = [
<Button key="cancel" size="lg" onClick={this.handleCancel}>取 消</Button>,
<Button key="cancel"
type="ghost"
size="large"
onClick={this.handleCancel}>
取消
</Button>,
<Button key="confirm"
type="primary"
size="lg"
size="large"
loading={this.state.confirmLoading}
onClick={this.handleOk}>
确 定
确定
</Button>
];
let footer = props.footer || defaultFooter;

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>,

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

@ -20,7 +20,7 @@ var openNotification = function() {
// 隐藏提醒框
notification.close(key);
};
var btn = <Button type="primary" size="sm" onClick={btnClick}>
var btn = <Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
</Button>;
notification.open({
@ -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'));
````

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