Merge branch 'develop-0.11.0' into component-transfer

* develop-0.11.0: (147 commits)
  update upload style
  fix className
  update tabs demo
  Add picture style upload list
  fix docs
  fix #662
  fix value prop of DatePicker to controlled prop
  Add overflowCount for badge, close #660
  Add ceiling spec, #413
  update spec/tools.md
  fix react-component/time-picker#9
  fix prefixCls
  feat: add Menu.ItemGroup #654
  update tabs document
  update text
  Add design tools page
  update upgrade notes
  Add warn message and fix warn alert icon
  Datepicker => DatePicker, Timepicker => TimePicker
  Add propTypes
  ...

# Conflicts:
#	index.js
This commit is contained in:
daqi.sdq 2015-12-15 14:05:57 +08:00
commit 2c8072cb98
209 changed files with 2580 additions and 1542 deletions

View File

@ -12,7 +12,7 @@
"experimentalObjectRestSpread": true
},
"plugins": [
"markdown",
"markdown-antd",
"react",
"babel"
],

12
.lesshintrc Normal file
View File

@ -0,0 +1,12 @@
{
"propertyOrdering": false,
"hexLength": "short",
"stringQuotes": false,
"decimalZero": false,
"importantRule": false,
"zeroUnit": "no_unit",
"qualifyingElement": false,
"duplicateProperty": false,
"importPath": false,
"finalNewline": false
}

View File

@ -1,6 +0,0 @@
{
"import": false,
"require-newline": false,
"leading-zero": false,
"single-comment": false
}

View File

@ -4,6 +4,22 @@
---
## 0.10.4 `2015-11-30`
- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题,并增加了相关演示。
- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
## 0.10.3 `2015-11-26`
- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`(而非 less 文件),方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
- 升级 Pagination增加 `defaultCurrent` 属性,修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
- 对演示和样式代码增加了 lint 检查。
## 0.10.2 `2015-11-25`
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
@ -42,7 +58,7 @@
- 优先使用苹方字体。
- 统一 size 属性的可选值为 `small` `default` `large`
- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
- 提供主色系更换的方案。[#384](https://github.com/ant-design/ant-design/issues/384)
- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
- 添加布局和导航规范,以及[常用布局](http://ant.design/spec/layout/)。
- 文档支持标题和演示的锚点,方便分享文档和演示代码。
@ -94,7 +110,7 @@
> 备注:
>
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
> - [0.10 升级指南](http://ant.design/docs/upgrade-to-0.10)
> - [0.10 升级指南](http://ant.design/docs/upgrade-notes)
## 0.9.3 ~ 0.9.5 `2015-11-04`

View File

@ -1,20 +1,18 @@
<p align="center">
<a href="http://ant.design">
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
# 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) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://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。
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
- 基于 npm + webpack + babel 的工作流,支持 ES2015。
## 安装
@ -28,18 +26,29 @@ npm install antd
- 使用全部组件
```jsx
import { Datepicker } from 'antd';
ReactDOM.render(<Datepicker />, mountNode);
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
```
- 按需使用
```jsx
import 'antd/lib/index.css'; // 只需在页面入口模块引用一次
import Datepicker from 'antd/lib/datepicker';
ReactDOM.render(<Datepicker />, mountNode);
import DatePicker from 'antd/lib/date-picker';
ReactDOM.render(<DatePicker />, mountNode);
```
引入样式:
```jsx
// only need to import once in entry module
import 'antd/lib/index.css';
```
```jsx
// or less for modifyVars
import 'antd/style/index.less';
```
## 浏览器支持
现代浏览器和 IE8 及以上。
@ -47,11 +56,11 @@ npm install antd
## 链接
- [首页](http://ant.design/)
- [文档和组件](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-design/antd-bin)
- [React UI 库](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-tool/xtool/)
- [开发计划](https://github.com/ant-design/ant-design/issues/9)
- [修改记录](CHANGELOG.md)
- [React 模块](http://react-component.github.io/)
- [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)

View File

@ -1,16 +1,18 @@
<p align="center">
<a href="http://ant.design">
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
</a>
</p>
# 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) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://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
- 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
- A npm + webpack + babel workflow, supporting ES2015.
## Install
@ -23,18 +25,29 @@ npm install antd
- Use all components
```jsx
import { Datepicker } from 'antd';
ReactDOM.render(<Datepicker />, mountNode);
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
```
- Use on demand
```jsx
import 'antd/lib/index.css'; // only need to import once in entry module
import Datepicker from 'antd/lib/datepicker';
ReactDOM.render(<Datepicker />, mountNode);
import DatePicker from 'antd/lib/date-picker';
ReactDOM.render(<DatePicker />, mountNode);
```
Import style:
```jsx
// only need to import once in entry module
import 'antd/lib/index.css';
```
```jsx
// or less for modifyVars
import 'antd/style/index.less';
```
## Browser Support
Normal browsers and Internet Explorer 8+.
@ -43,14 +56,13 @@ Normal browsers and Internet Explorer 8+.
## Links
- [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)
- [React UI library](http://ant.design/docs/introduce)
- [Build/Debug tools](https://github.com/ant-tool/xtool/)
- [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)
- [React components](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/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)

View File

@ -1,6 +1,6 @@
# 可关闭的警告提示
- order: 1
- order: 2
显示关闭按钮,点击可关闭警告提示。

View File

@ -0,0 +1,15 @@
# 自定义关闭
- order: 5
可以自定义关闭,自定义的文字会替换原先的关闭 `Icon`
---
````jsx
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
, document.getElementById('components-alert-demo-close-text'));
````

View File

@ -1,16 +0,0 @@
# 自定义关闭
- order: 4
可以自定义关闭,自定义的文字会替换原先的关闭 `Icon`
---
````jsx
import { Alert } from 'antd';
const link = <a href="#">不再提醒</a>;
ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} />
, document.getElementById('components-alert-demo-close-type'));
````

View File

@ -1,6 +1,6 @@
# 含有辅助性文字介绍
- order: 2
- order: 3
含有辅助性文字介绍的警告提示。

View File

@ -0,0 +1,36 @@
# 图标
- order: 4
可口的图标让信息类型更加醒目。
---
````jsx
import { Alert } from 'antd';
ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" showIcon />
<Alert message="消息提示的文案" type="info" showIcon />
<Alert message="警告提示的文案" type="warn" showIcon />
<Alert message="错误提示的文案" type="error" showIcon />
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
showIcon />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
showIcon />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warn"
showIcon />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
showIcon />
</div>, document.getElementById('components-alert-demo-icon'));
````

View File

@ -1,6 +1,6 @@
# 四种样式
- order: 3
- order: 1
共有四种样式`success`、`info`、`warn`、`error`。

View File

@ -2,11 +2,14 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Animate from 'rc-animate';
import Icon from '../icon';
import classNames from 'classnames';
export default React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-alert'
prefixCls: 'ant-alert',
showIcon: false,
onClose() {}
};
},
getInitialState() {
@ -26,9 +29,7 @@ export default React.createClass({
this.setState({
closing: false
});
if (this.props.onClose) {
this.props.onClose.call(this, e);
}
},
animationEnd() {
this.setState({
@ -37,10 +38,12 @@ export default React.createClass({
});
},
render() {
let iconClass = this.props.description ?
'ant-alert-with-description-icon' : 'ant-alert-icon';
let {
closable, description, type, prefixCls, message, closeText, showIcon
} = this.props;
let iconType = '';
switch (this.props.type) {
switch (type) {
case 'success':
iconType = 'check-circle';
break;
@ -51,49 +54,44 @@ export default React.createClass({
iconType = 'exclamation-circle';
break;
case 'warn':
iconType = 'question-circle';
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
}
let html;
let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
if (this.props.description) {
let close = this.props.closable ?
<a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
<span className="ant-alert-with-description-close-icon-x"></span>
</a> : '';
html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
<Icon className={iconClass} type={iconType} />
<p className={'ant-alert-with-description-message'}>{this.props.message}</p>
<span className={'ant-alert-with-description-description'}>{this.props.description}</span>
{close}
</div>;
} else {
if (this.props.closeText) {
html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
<Icon className={iconClass} type={iconType} />
<span className={'ant-alert-description'}>{this.props.message}</span>
<span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
</div>;
} else {
let close = this.props.closable ?
<a onClick={this.handleClose} className={'ant-alert-close-icon'}>
<span className="ant-alert-close-icon-x"></span>
</a> : '';
html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
<Icon className={iconClass} type={iconType} />
<span className={'ant-alert-description'}>{this.props.message}</span>
{close}
</div>;
// use outline icon in alert with description
if (!!description) {
iconType += '-o';
}
let alertCls = classNames({
[prefixCls]: true,
[prefixCls + '-' + type]: true,
[prefixCls + '-close']: !this.state.closing,
[prefixCls + '-with-description']: !!description,
[prefixCls + '-no-icon']: !showIcon,
});
// closeable when closeText is assigned
if (closeText) {
closable = true;
}
return this.state.closed ? null : <Animate
component=""
return this.state.closed ? null : (
<Animate component=""
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}>
{html}
</Animate>;
<div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={prefixCls + '-message'}>{message}</span>
<span className={prefixCls + '-description'}>{description}</span>
{closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
{closeText || <Icon type="cross" />}
</a> : null}
</div>
</Animate>
);
}
});

View File

@ -23,3 +23,4 @@
| message | 必选参数,警告提示内容 | String | 无 |
| description | 可选参数,警告提示的辅助性文字介绍 | String | 无 |
| onClose | 可选参数,关闭时触发的回调函数 | Function | 无 |
| showIcon | 可选参数,是否显示辅助图标 | Boolean | false |

View File

@ -1,5 +1,6 @@
import React, { createElement } from 'react';
import assign from 'object-assign';
import { isCssAnimationSupported } from 'css-animation';
function getNumberArray(num) {
return num ?
@ -98,7 +99,8 @@ class AntScrollNumber extends React.Component {
const props = assign({}, this.props, {
className: `${this.props.prefixCls} ${this.props.className}`
});
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
if (isBrowser && isCssAnimationSupported) {
return createElement(
this.props.component,
props,

View File

@ -8,10 +8,10 @@ class AntBadge extends React.Component {
}
render() {
let { count, prefixCls } = this.props;
let { count, prefixCls, overflowCount } = this.props;
const dot = this.props.dot;
count = count >= 100 ? '99+' : count;
count = count > overflowCount ? '${overflowCount}+' : count;
// dot mode don't need count
if (dot) {
@ -43,6 +43,7 @@ AntBadge.defaultProps = {
prefixCls: 'ant-badge',
count: null,
dot: false,
overflowCount: 99,
};
AntBadge.propTypes = {
@ -51,6 +52,7 @@ AntBadge.propTypes = {
React.PropTypes.number
]),
dot: React.PropTypes.bool,
overflowCount: React.PropTypes.number,
};
export default AntBadge;

View File

@ -22,5 +22,6 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|----------------------------------|------------|---------|--------|
| count | 展示的数字,大于 99 时显示为 99+,为 0 时隐藏 | Number | | |
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | Number | | |
| overflowCount | 展示封顶的数字值 | Number | | 99 |
| dot | 不展示数字,只有一个小红点 | boolean | | false |

View File

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

View File

@ -0,0 +1,20 @@
# 分隔符
- order: 3
使用 `separator=">"` 可以自定义分隔符。
---
````jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
<Breadcrumb separator=">">
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb>
, document.getElementById('components-breadcrumb-demo-separator'));
````

View File

@ -1,52 +1,79 @@
import React from 'react';
import React, { cloneElement } from 'react';
let prefixCls = 'ant-breadcrumb';
let BreadcrumbItem = React.createClass({
const BreadcrumbItem = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-breadcrumb',
separator: '/',
};
},
propTypes: {
href: React.PropTypes.string
prefixCls: React.PropTypes.string,
separator: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
href: React.PropTypes.string,
},
render() {
let link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
let slash = <span className={prefixCls + '-slash'}>/</span>;
const { prefixCls, separator, children } = this.props;
let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
if (typeof this.props.href === 'undefined') {
link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
}
return <span>{link}{slash}</span>;
return <span>
{link}
<span className={prefixCls + '-separator'}>{separator}</span>
</span>;
}
});
let Breadcrumb = React.createClass({
const Breadcrumb = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-breadcrumb',
separator: '/',
};
},
propTypes: {
prefixCls: React.PropTypes.string,
separator: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
router: React.PropTypes.object,
routes: React.PropTypes.array,
params: React.PropTypes.object
},
render() {
let crumbs;
let ReactRouter = this.props.router;
let routes = this.props.routes;
let params = this.props.params;
const { separator, prefixCls, router, routes, params, children } = this.props;
const ReactRouter = router;
if (routes && routes.length > 0 && ReactRouter) {
let Link = ReactRouter.Link;
crumbs = routes.map(function(route, i) {
if (!route.breadcrumbName) {
return null;
}
let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
const name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
return params[key] || replacement;
});
let link;
let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
const path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
if (i === routes.length - 1) {
link = <span>{name}</span>;
} else {
link = <Link to={path} params={params}>{name}</Link>;
}
return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
});
} else {
crumbs = this.props.children;
crumbs = React.Children.map(children, (element, index) => {
return cloneElement(element, {
separator,
key: index,
});
});
}
return (
<div className={prefixCls}>

View File

@ -28,10 +28,11 @@
### Breadcrumb
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|---------|--------|
|-----------|-----------------------------------|-------------------|---------|--------|
| router | 可传入 react-router 的实例 | Object | | - |
| routes | router 的路由栈信息 | Array | | - |
| params | 路由的参数 | Object | | - |
| separator | 分隔符自定义 | String or Element | | '/' |
### Breadcrumb.Item

View File

@ -17,6 +17,7 @@ ReactDOM.render(<div>
<Button type="primary">主按钮</Button>
<Button>次按钮</Button>
<Button type="ghost">幽灵按钮</Button>
<Button type="dashed">虚线按钮</Button>
</div>,
document.getElementById('components-button-demo-basic'));
````

View File

@ -18,6 +18,9 @@ ReactDOM.render(<div>
<br />
<Button type="ghost">幽灵按钮</Button>
<Button type="ghost" disabled>幽灵按钮(失效)</Button>
<br />
<Button type="dashed">虚线按钮</Button>
<Button type="dashed" disabled>虚线按钮(失效)</Button>
</div>
, document.getElementById('components-button-demo-disabled'));
````

View File

@ -1 +1 @@
module.exports = require('../../datepicker/locale/en_US');
module.exports = require('../../date-picker/locale/en_US');

View File

@ -1 +1 @@
module.exports = require('../../datepicker/locale/zh_CN');
module.exports = require('../../date-picker/locale/zh_CN');

View File

@ -1,4 +1,4 @@
不可用
# 不可用
- order: 1

View File

@ -0,0 +1,15 @@
# 基本
- order: 0
最简单的用法。
---
````jsx
import { DatePicker } from 'antd';
ReactDOM.render(
<DatePicker defaultValue="2015-12-12" />
, document.getElementById('components-date-picker-demo-basic'));
````

View File

@ -0,0 +1,15 @@
# 禁用
- order: 5
选择框的不可用状态。
---
````jsx
import { DatePicker } from 'antd';
ReactDOM.render(
<DatePicker defaultValue="2015-06-06" disabled />
, document.getElementById('components-date-picker-demo-disabled'));
````

View File

@ -0,0 +1,15 @@
# 日期格式
- order: 1
使用 `format` 属性,可以自定义你需要的日期显示格式,如 `yyyy/MM/dd`
---
````jsx
import { DatePicker } from 'antd';
ReactDOM.render(
<DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
, document.getElementById('components-date-picker-demo-formatter'));
````

View File

@ -7,8 +7,8 @@
---
````jsx
import { Datepicker } from 'antd';
import enUS from 'antd/lib/datepicker/locale/en_US';
import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
import assign from 'object-assign';
const App = React.createClass({
@ -22,10 +22,10 @@ const App = React.createClass({
};
},
render() {
return <Datepicker locale={this.state.locale} />;
return <DatePicker locale={this.state.locale} />;
}
});
ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
ReactDOM.render(<App />, document.getElementById('components-date-picker-demo-locale'));
````

View File

@ -0,0 +1,15 @@
# 月选择器
- order: 9
使用 MonthPicker 实现月选择器.
---
````jsx
import { DatePicker } from 'antd';
const MonthPicker = DatePicker.MonthPicker;
ReactDOM.render(
<MonthPicker defaultValue="2015-12" />
, document.getElementById('components-date-picker-demo-month-picker'));
````

View File

@ -9,7 +9,7 @@
---
````jsx
import { Datepicker } from 'antd';
import { DatePicker } from 'antd';
const disabledDate = function(current, value) {
// can not select days after today
@ -17,6 +17,6 @@ const disabledDate = function(current, value) {
};
ReactDOM.render(
<Datepicker disabledDate={disabledDate} />
, document.getElementById('components-datepicker-demo-range'));
<DatePicker disabledDate={disabledDate} />
, document.getElementById('components-date-picker-demo-range'));
````

View File

@ -7,18 +7,18 @@
---
````jsx
import { Datepicker } from 'antd';
import { DatePicker } from 'antd';
const Picker = React.createClass({
handleChange: function(value) {
console.log(new Date(value.getTime()));
},
render: function() {
return <Datepicker onChange={this.handleChange} />;
return <DatePicker onChange={this.handleChange} />;
}
});
ReactDOM.render(
<Picker />
, document.getElementById('components-datepicker-demo-select'));
, document.getElementById('components-date-picker-demo-select'));
````

View File

@ -0,0 +1,19 @@
# 三种大小
- order: 1
三种大小的输入框,大的用在表单中,中的为默认。
---
````jsx
import { DatePicker } from 'antd';
ReactDOM.render(
<div>
<DatePicker size="large" />
<DatePicker />
<DatePicker size="small" />
</div>
, document.getElementById('components-date-picker-demo-size'));
````

View File

@ -7,7 +7,7 @@
---
````jsx
import { Datepicker } from 'antd';
import { DatePicker } from 'antd';
const DateRange = React.createClass({
getInitialState() {
@ -36,11 +36,11 @@ const DateRange = React.createClass({
},
render() {
return <div>
<Datepicker disabledDate={this.disabledStartDate}
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
<Datepicker disabledDate={this.disabledEndDate}
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
@ -50,5 +50,5 @@ const DateRange = React.createClass({
ReactDOM.render(
<DateRange />
, document.getElementById('components-datepicker-demo-start-end'));
, document.getElementById('components-date-picker-demo-start-end'));
````

View File

@ -0,0 +1,52 @@
# 日期时间选择
- order: 4
和 [时间选择框](/components/timepicer) 配合使用。
---
````jsx
import { DatePicker, TimePicker } from 'antd';
const DateTimePicker = React.createClass({
handleChange(from, value) {
this.result = this.result || new Date();
if (!value) {
if (from === 'date') {
this.selectedDate = false;
} else {
this.selectedTime = false;
}
return;
}
if (from === 'date') {
this.result.setFullYear(value.getFullYear());
this.result.setMonth(value.getMonth());
this.result.setDate(value.getDate());
this.selectedDate = true;
} else {
this.result.setHours(value.getHours());
this.result.setMinutes(value.getMinutes());
this.result.setSeconds(value.getSeconds());
this.selectedTime = true;
}
if (this.selectedDate && this.selectedTime) {
this.props.onSelect(this.result);
}
},
render() {
return <div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>;
}
});
function onSelect(value) {
console.log('选择了时间:', value);
}
ReactDOM.render(<DateTimePicker onSelect={onSelect} />
, document.getElementById('components-date-picker-demo-time'));
````

View File

@ -1,18 +1,18 @@
import React from 'react';
import Calendar from 'rc-calendar';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import Datepicker from 'rc-calendar/lib/Picker';
import DatePicker from 'rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar';
import defaultLocale from './locale/zh_CN';
import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
import DateTimeFormat from 'gregorian-calendar-format';
import objectAssign from 'object-assign';
function createPicker(TheCalendar) {
function createPicker(TheCalendar, defaultFormat) {
return React.createClass({
getDefaultProps() {
return {
format: 'yyyy-MM-dd',
format: defaultFormat || 'yyyy-MM-dd',
transitionName: 'slide-up',
popupStyle: {},
onSelect: null, //
@ -75,7 +75,9 @@ function createPicker(TheCalendar) {
});
},
handleChange(value) {
this.setState({value});
if (!('value' in this.props)) {
this.setState({ value });
}
const timeValue = value ? new Date(value.getTime()) : null;
// onSelect .
if (this.props.onSelect) {
@ -121,7 +123,7 @@ function createPicker(TheCalendar) {
}
return <span className={pickerClass}>
<Datepicker
<DatePicker
transitionName={this.props.transitionName}
disabled={this.props.disabled}
calendar={calendar}
@ -147,14 +149,14 @@ function createPicker(TheCalendar) {
);
}
}
</Datepicker>
</DatePicker>
</span>;
}
});
}
const AntDatePicker = createPicker(Calendar);
const AntMonthPicker = createPicker(MonthCalendar);
const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM');
const AntCalendar = React.createClass({
getDefaultProps() {

View File

@ -1,4 +1,4 @@
# Datepicker
# DatePicker
- category: Components
- chinese: 日期选择框
@ -15,7 +15,7 @@
## API
```html
<Datepicker defaultValue="2015-01-01" />
<DatePicker defaultValue="2015-01-01" />
```
| 参数 | 说明 | 类型 | 默认值 |

View File

@ -1,15 +0,0 @@
# 基本
- order: 0
最简单的用法。
---
````jsx
import { Datepicker } from 'antd';
ReactDOM.render(
<Datepicker defaultValue="2015-12-12" />
, document.getElementById('components-datepicker-demo-basic'));
````

View File

@ -1,15 +0,0 @@
# 禁用
- order: 5
选择框的不可用状态。
---
````jsx
import { Datepicker } from 'antd';
ReactDOM.render(
<Datepicker defaultValue="2015-06-06" disabled />
, document.getElementById('components-datepicker-demo-disabled'));
````

View File

@ -1,15 +0,0 @@
# 日期格式
- order: 1
使用 `format` 属性,可以自定义你需要的日期显示格式,如 `yyyy/MM/dd`
---
````jsx
import { Datepicker } from 'antd';
ReactDOM.render(
<Datepicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
, document.getElementById('components-datepicker-demo-formatter'));
````

View File

@ -1,19 +0,0 @@
# 三种大小
- order: 1
三种大小的输入框,大的用在表单中,中的为默认。
---
````jsx
import { Datepicker } from 'antd';
ReactDOM.render(
<div>
<Datepicker size="large" />
<Datepicker />
<Datepicker size="small" />
</div>
, document.getElementById('components-datepicker-demo-size'));
````

View File

@ -1,43 +0,0 @@
# 日期时间选择
- order: 4
和 [时间选择框](/components/timepicer) 配合使用。
---
````jsx
import { Datepicker, Timepicker } from 'antd';
let result = new Date();
let selectdDate, selectdTime;
function handleChange(from, value) {
if (!value) {
if (from === 'date') {
selectdDate = false;
} else {
selectdTime = false;
}
return;
}
if (from === 'date') {
result.setFullYear(value.getFullYear());
result.setMonth(value.getMonth());
result.setDate(value.getDate());
selectdDate = true;
} else {
result.setHours(value.getHours());
result.setMinutes(value.getMinutes());
result.setSeconds(value.getSeconds());
selectdTime = true;
}
if (selectdDate && selectdTime) {
console.log('选择结果是:' + result);
}
}
ReactDOM.render(<div>
<Datepicker onChange={handleChange.bind(null, 'date')} />
<Timepicker onChange={handleChange.bind(null, 'time')} />
</div>, document.getElementById('components-datepicker-demo-time'));
````

View File

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item>
@ -23,15 +23,9 @@ const menu = <Menu>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
某按钮 <Icon type="down" />
</Button>
<a className="ant-dropdown-link" href="#">
触发链接 <Icon type="down" />
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-basic'));
````
<style>
.code-box-demo .ant-btn {
margin-right: 6px;
}
</style>

View File

@ -0,0 +1,30 @@
# 带下拉框的按钮
- order: 4
左边是按钮,右边是额外的相关功能菜单。
---
````jsx
import { Menu, Dropdown } from 'antd';
const DropdownButton = Dropdown.Button;
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
ReactDOM.render(
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
, document.getElementById('components-dropdown-demo-dropdown-button'));
````

View File

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const onClick = function({key}) {
console.log('点击了菜单' + key);
};
@ -20,9 +20,9 @@ const menu = <Menu onClick={onClick}>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
<a className="ant-dropdown-link" href="#">
鼠标移入,点击菜单 <Icon type="down" />
</Button>
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-event'));
````

View File

@ -7,7 +7,7 @@
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
@ -22,9 +22,9 @@ const menu = <Menu>
ReactDOM.render(
<Dropdown overlay={menu}>
<Button>
<a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" />
</Button>
</a>
</Dropdown>
, document.getElementById('components-dropdown-demo-item'));
````

View File

@ -2,12 +2,12 @@
- order: 2
点击或鼠标移入触发。
默认是移入触发菜单,可以点击触发。
---
````jsx
import { Menu, Dropdown, Button, Icon } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
@ -22,14 +22,9 @@ const menu = <Menu>
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={['click']}>
<Button type="primary">
<a className="ant-dropdown-link" href="#">
点击触发 <Icon type="down" />
</Button>
</Dropdown>
<Dropdown overlay={menu}>
<Button>
鼠标移入 <Icon type="down" />
</Button>
</a>
</Dropdown>
</div>, document.getElementById('components-dropdown-demo-trigger'));
````

View File

@ -0,0 +1,36 @@
import React from 'react';
import Button from '../button';
import Icon from '../icon';
import Dropdown from './dropdown';
const ButtonGroup = Button.Group;
const align = {
points: ['tr', 'br'],
overlay: {
adjustX: 1,
adjustY: 1,
},
offset: [0, 3],
targetOffset: [0, 0],
};
export default React.createClass({
getDefaultProps() {
return {
align: align,
type: 'default',
};
},
render() {
return <ButtonGroup className="ant-dropdown-button">
<Button type={this.props.type}>
{this.props.children}
</Button>
<Dropdown {...this.props}>
<Button type={this.props.type}>
<Icon type="down" />
</Button>
</Dropdown>
</ButtonGroup>;
}
});

View File

@ -0,0 +1,16 @@
import React from 'react';
import Dropdown from 'rc-dropdown';
export default React.createClass({
getDefaultProps: function () {
return {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown',
};
},
render: function () {
return (
<Dropdown {...this.props} />
);
}
});

View File

@ -1,16 +1,5 @@
import React from 'react';
import Dropdown from 'rc-dropdown';
import Dropdown from './dropdown';
import DropdownButton from './dropdown-button';
export default React.createClass({
getDefaultProps: function () {
return {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown',
};
},
render: function () {
return (
<Dropdown {...this.props} />
);
}
});
Dropdown.Button = DropdownButton;
export default Dropdown;

View File

@ -19,10 +19,18 @@
| 成员 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
| overlay | 菜单节点 | React.Element | 无 |
| onClick | 点击菜单后的回调 | function({key,keyPath,item,domEvent}) {} | 无 |
| overlay | 菜单节点 | [Menu](/components/menu) | 无 |
菜单可由 `antd.Menu` 取得,可设置 `onSelect` 回调,菜单还包括菜单项 `antd.Menu.Item`,分割线 `antd.Menu.Divider`
> 注意: Menu.Item 必须设置唯一的 key 属性。
### DropdownButton
| 成员 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| type | 按钮类型,和 [Button](/components/button) 一致 | String | 'default' |
| onClick | 点击左侧按钮的回调,和 [Button](/components/button) 一致 | Function | 无 |
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
| overlay | 菜单节点 | [Menu](/components/menu) | 无 |

View File

@ -7,7 +7,7 @@
---
````jsx
import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, message, Row, Col } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
@ -92,17 +92,17 @@ const Demo = React.createClass({
</FormItem>
<FormItem
label="Datepicker 日期选择框:"
label="DatePicker 日期选择框:"
labelCol={{span: 8}}
required>
<Col span="6">
<Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
<DatePicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
</Col>
<Col span="1">
<p className="ant-form-split">-</p>
</Col>
<Col span="6">
<Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
<DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
</Col>
</FormItem>
<Row>

View File

@ -0,0 +1,61 @@
# 搜索框
- order: 10
带有搜索按钮。
---
````jsx
import { Icon, Input, Button } from 'antd';
import classNames from 'classnames';
const InputGroup = Input.Group;
const SearchInput = React.createClass({
getInitialState() {
return {
value: '',
focus: false
};
},
handleInputChange(e) {
this.setState({
value: e.target.value,
});
},
handleFocusBlur(e) {
this.setState({
focus: e.target === document.activeElement,
});
},
handleSearch() {
if (this.props.onSearch) {
this.props.onSearch();
}
},
render() {
const btnCls = classNames({
'ant-search-btn': true,
'ant-search-btn-noempty': !!this.state.value.trim(),
});
const searchCls = classNames({
'ant-search-input': true,
'ant-search-input-focus': this.state.focus,
});
return <InputGroup className={searchCls} style={this.props.style}>
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>
</InputGroup>;
}
});
ReactDOM.render(
<SearchInput placeholder="input search text" style={{width: 200}} />
, document.getElementById('components-form-demo-search-input'));
````

View File

@ -13,7 +13,7 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
---
````jsx
import { Form, Input, Datepicker, Col } from 'antd';
import { Form, Input, DatePicker, Col } from 'antd';
const FormItem = Form.Item;
ReactDOM.render(
@ -78,13 +78,13 @@ ReactDOM.render(
labelCol={{span: 5}}
validateStatus="error">
<Col span="6">
<Datepicker />
<DatePicker />
</Col>
<Col span="1">
<p className="ant-form-split">-</p>
</Col>
<Col span="6">
<Datepicker />
<DatePicker />
</Col>
<Col span="19" offset="5">
<p className="ant-form-explain">请输入正确选项</p>

View File

@ -1,13 +1,7 @@
import React from 'react';
class Icon extends React.Component {
render() {
let {type, className = '', ...other} = this.props;
export default props => {
let { type, className = '', ...other } = props;
className += ` anticon anticon-${type}`;
return <i className={className} {...other}></i>;
}
}
export default Icon;
return <i className={className} {...other} />;
};

View File

@ -10,34 +10,30 @@
## 图标的命名规范
我们为每个图标赋予了语义化的命名。只需在 <Icon> 标签内,制定对应的 type 属性即可。
不同 type 命名规则如下:
我们为每个图标赋予了语义化的命名,命名规则如下:
- 实心和描线图标保持同名,用 `-o` 来区分,比如 `question-circle`(实心) 和 `question-circle-o`(描线)
- 命名顺序:`[icon名]-[形状可选]-[描线与否]-[方向可选]`。
## 实现原理
所有的 Icon 标签最终会渲染为
```html
<i class="anticon anticon-${type}"></i>
```
## 如何使用
使用 <Icon> 标签申明组件,设置对应的 type 设置需要渲染的图标,示例代码如下:
使用 `<Icon />` 标签声明组件,指定图标对应的 type 属性,示例代码如下:
```html
<Icon type="link" />
```
> 点击图标复制代码。
最终会渲染为:
```html
<i class="anticon anticon-${type}"></i>
```
## 图标列表
> 点击图标复制代码。
### 一. 方向性图标
<div id="iconset-direction"></div>
@ -157,7 +153,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode'];
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));

View File

@ -1,4 +1,5 @@
import React from 'react';
import assign from 'object-assign';
function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> {
@ -14,26 +15,29 @@ function ieGT9() {
return documentMode > 9;
}
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return value;
}
class Group extends React.Component {
render() {
const className = 'ant-input-group ' + (this.props.className || '');
return (
<div className={this.props.className}>
<span className={className}
style={this.props.style}>
{this.props.children}
</div>
</span>
);
}
}
Group.propTypes = {
className: React.PropTypes.string,
children: React.PropTypes.any,
};
Group.defaultProps = {
className: 'ant-input-group',
};
class Input extends React.Component {
renderLabledInput(children) {
const props = this.props;
@ -52,16 +56,16 @@ class Input extends React.Component {
) : null;
return (
<div className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
<span className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
{addonBefore}
{children}
{addonAfter}
</div>
</span>
);
}
renderInput() {
const props = this.props;
const props = assign({}, this.props);
const prefixCls = props.prefixCls;
let inputClassName = prefixClsFn(prefixCls, 'input');
if (!props.type) {
@ -77,9 +81,12 @@ class Input extends React.Component {
if(placeholder && ieGT9()){
placeholder = null;
}
if ('value' in props) {
props.value = fixControlledValue(props.value);
}
switch (props.type) {
case 'textarea':
return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;

View File

@ -9,6 +9,7 @@
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const App = React.createClass({
getInitialState() {
@ -31,14 +32,18 @@ const App = React.createClass({
<Menu.Item key="mail">
<Icon type="mail" />导航一
</Menu.Item>
<Menu.Item key="app">
<Menu.Item key="app" disabled>
<Icon type="appstore" />导航二
</Menu.Item>
<SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="setting:1">选项1</Menu.Item>
<Menu.Item key="setting:2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="setting:3">选项3</Menu.Item>
<Menu.Item key="setting:4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>

View File

@ -9,6 +9,7 @@
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Sider = React.createClass({
getInitialState() {
@ -29,10 +30,14 @@ const Sider = React.createClass({
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>

View File

@ -9,6 +9,7 @@
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
function handleClick(e) {
console.log('click', e);
@ -16,10 +17,14 @@ function handleClick(e) {
ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>

View File

@ -72,5 +72,6 @@ const AntMenu = React.createClass({
AntMenu.Divider = Menu.Divider;
AntMenu.Item = Menu.Item;
AntMenu.SubMenu = Menu.SubMenu;
AntMenu.ItemGroup = Menu.ItemGroup;
export default AntMenu;

View File

@ -53,4 +53,11 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 子菜单项值 | String or React.Element | |
| children | (MenuItem or SubMenu)[] | 子菜单的菜单项 | | |
| children | 子菜单的菜单项 | (MenuItem or SubMenu)[] | | |
### Menu.ItemGroup props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 分组标题 | String or React.Element | |
| children | 分组的菜单项 | MenuItem[] | | |

View File

@ -1,6 +1,6 @@
# 修改延时
- order: 4
- order: 2
自定义时长 `10s`,默认时长为 `1.5s`
@ -13,7 +13,7 @@ const success = function() {
message.success('这是一条成功的提示,并将于10秒后消失', 10);
};
ReactDOM.render(<Button type="primary" onClick={success}>自定义时长提示</Button>
ReactDOM.render(<Button onClick={success}>自定义时长提示</Button>
, document.getElementById('components-message-demo-duration'));
````

View File

@ -1,18 +0,0 @@
# 错误或失败
- order: 1
操作失败反馈。
---
````jsx
import { message, Button } from 'antd';
const error = function() {
message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
};
ReactDOM.render(<Button type="primary" onClick={error}>显示失败提示</Button>
, document.getElementById('components-message-demo-error'));
````

View File

@ -1,6 +1,6 @@
# 普通提示
- order: 2
- order: 0
信息提醒反馈。

View File

@ -1,6 +1,6 @@
# 加载中
- order: 5
- order: 3
进行全局 loading异步自行移除。

View File

@ -0,0 +1,35 @@
# 其他提示类型
- order: 1
包括成功、失败、警告。
---
````jsx
import { message, Button } from 'antd';
const success = function() {
message.success('这是一条成功提示');
};
const error = function() {
message.error('这是一条报错提示');
};
const warn = function() {
message.warn('这是一条警告提示');
};
ReactDOM.render(<div>
<Button onClick={success}>显示成功提示</Button>
<Button onClick={error}>显示报错提示</Button>
<Button onClick={warn}>显示警告提示</Button>
</div>, document.getElementById('components-message-demo-other'));
````
<style>
#components-message-demo-other .ant-btn {
margin-right: 8px;
}
</style>

View File

@ -1,19 +0,0 @@
# 成功
- order: 0
操作成功反馈。
---
````jsx
import { message, Button } from 'antd';
const success = function() {
message.success('这是一条成功的提示');
};
ReactDOM.render(<Button type="primary" onClick={success}>显示成功提示</Button>
, document.getElementById('components-message-demo-success'));
````

View File

@ -23,6 +23,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
'info': 'ant-message-info',
'success': 'ant-message-success',
'error': 'ant-message-error',
'warn': 'ant-message-warn',
'loading': 'ant-message-loading'
})[type];
@ -30,6 +31,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
'info': 'info-circle',
'success': 'check-circle',
'error': 'exclamation-circle',
'warn': 'exclamation-circle',
'loading': 'loading'
})[type];
@ -62,6 +64,9 @@ export default {
error(content, duration, onClose) {
return notice(content, duration, 'error', onClose);
},
warn(content, duration, onClose) {
return notice(content, duration, 'warn', onClose);
},
loading(content, duration, onClose) {
return notice(content, duration, 'loading', onClose);
},

View File

@ -11,6 +11,7 @@ export default function (props) {
let d;
props = props || {};
props.iconClassName = props.iconClassName || 'question-circle';
let iconClassType = props.iconClassName;
let width = props.width || 416;
@ -20,6 +21,9 @@ export default function (props) {
props.okCancel = true;
}
props.okText = props.okText || (props.okCancel ? '确定' : '知道了');
props.cancelText = props.cancelText || '取消';
function close() {
d.setState({
visible: false
@ -72,19 +76,22 @@ export default function (props) {
<span className="ant-confirm-title">{props.title}</span>
<div className="ant-confirm-content">{props.content}</div>
</div>;
let footer = <div className="ant-confirm-btns">
<Button type="ghost" size="large" onClick={onCancel}> </Button>
<Button type="primary" size="large" onClick={onOk}> </Button>
</div>;
let footer = null;
if (props.okCancel) {
footer = <div className="ant-confirm-btns">
<Button type="ghost" size="large" onClick={onCancel}> </Button>
<Button type="primary" size="large" onClick={onOk}> </Button>
<Button type="ghost" size="large" onClick={onCancel}>
{props.cancelText}
</Button>
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>;
} else {
footer = <div className="ant-confirm-btns">
<Button type="primary" size="large" onClick={onOk}>知道了</Button>
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>;
}

View File

@ -0,0 +1,60 @@
# 国际化
- order: 6
设置 `okText``cancelText` 以自定义按钮文字。
---
````jsx
import { Modal, Button } from 'antd';
const LocalizedModal = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({
visible: true
});
},
handleOk() {
this.setState({
visible: false
});
},
handleCancel() {
this.setState({
visible: false
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</Modal>
</div>;
}
});
function confirm() {
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel'
});
}
ReactDOM.render(<div>
<LocalizedModal />
<br />
<Button onClick={confirm}>confirm</Button>
</div>, document.getElementById('components-modal-demo-locale'));
````

View File

@ -15,6 +15,8 @@ let AntModal = React.createClass({
prefixCls: 'ant-modal',
onOk: noop,
onCancel: noop,
okText: '确定',
cancelText: '取消',
width: 520,
transitionName: 'zoom',
maskAnimation: 'fade',
@ -56,14 +58,14 @@ let AntModal = React.createClass({
type="ghost"
size="large"
onClick={this.handleCancel}>
取消
{props.cancelText}
</Button>,
<Button key="confirm"
type="primary"
size="large"
loading={props.confirmLoading}
onClick={this.handleOk}>
确定
{props.okText}
</Button>
];
let footer = props.footer || defaultFooter;

View File

@ -27,6 +27,8 @@
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
| width | 宽度 | String or Number | 520 |
| footer | 底部内容 | React.Element | 确定取消按钮 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
### Modal.xxx()
@ -47,6 +49,8 @@
| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
| width | 宽度 | String or Number | 416 |
| iconClassName | 图标 Icon 类型 | String | question-circle |
| okText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
<style>
.code-box-demo .ant-btn {

View File

@ -59,6 +59,7 @@ function notice(args) {
duration: duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {}
});
} else {
@ -73,6 +74,7 @@ function notice(args) {
duration: duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {}
});
} else {

View File

@ -9,11 +9,7 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination onChange={onChange} total={50} />,
<Pagination defaultCurrent={1} total={50} />,
document.getElementById('components-pagination-demo-basic'));
````

View File

@ -9,15 +9,11 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
function onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
}
ReactDOM.render(
<Pagination showSizeChanger onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
<Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />,
document.getElementById('components-pagination-demo-changer'));
````

View File

@ -0,0 +1,33 @@
# 受控
- order: 8
受控制的页码。
---
````jsx
import { Pagination } from 'antd';
let Container = React.createClass({
getInitialState() {
return {
current: 3
};
},
onChange(page) {
console.log(page);
this.setState({
current: page
});
},
render() {
return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
}
});
ReactDOM.render(
<Container />,
document.getElementById('components-pagination-demo-controlled'));
````

View File

@ -9,11 +9,7 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination showQuickJumper onChange={onChange} total={500} />,
<Pagination showQuickJumper defaultCurrent={2} total={500} />,
document.getElementById('components-pagination-demo-jump'));
````

View File

@ -1,6 +1,6 @@
# 国际化
- order: 6
- order: 7
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
@ -10,11 +10,7 @@
import { Pagination } from 'antd';
import enUS from 'antd/lib/pagination/locale/en_US';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination onChange={onChange} total={50} locale={enUS} />,
<Pagination defaultCurrent={1} total={50} locale={enUS} />,
document.getElementById('components-pagination-demo-locale'));
````

View File

@ -9,11 +9,9 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination size="small" onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-mini'));
ReactDOM.render(<div>
<Pagination size="small" total={50} />
<br />
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
</div>, document.getElementById('components-pagination-demo-mini'));
````

View File

@ -9,11 +9,7 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination onChange={onChange} total={500} />,
<Pagination defaultCurrent={1} total={500} />,
document.getElementById('components-pagination-demo-more'));
````

View File

@ -9,11 +9,7 @@
````jsx
import { Pagination } from 'antd';
function onChange(page) {
console.log(page);
}
ReactDOM.render(
<Pagination simple onChange={onChange} total={50} />,
<Pagination simple defaultCurrent={2} total={50} />,
document.getElementById('components-pagination-demo-simple'));
````

View File

@ -1,25 +1,37 @@
import React from 'react';
import Pagination from 'rc-pagination';
import Select from 'rc-select';
import Select from '../select';
import zhCN from './locale/zh_CN';
const prefixCls = 'ant-pagination';
class MiniSelect extends React.Component {
render() {
return <Select size="small" {...this.props} />;
}
}
MiniSelect.Option = Select.Option;
class AntPagination extends React.Component {
render() {
let className = this.props.className;
let selectComponentClass = Select;
if (this.props.size === 'small') {
className += ' mini';
selectComponentClass = MiniSelect;
}
return <Pagination selectComponentClass={Select}
return <Pagination selectComponentClass={selectComponentClass}
selectPrefixCls="ant-select"
prefixCls={prefixCls}
{...this.props} className={className}/>;
{...this.props}
className={className} />;
}
}
AntPagination.defaultProps = {
locale: zhCN,
className: '',
prefixCls: 'ant-pagination',
};
export default AntPagination;

View File

@ -21,7 +21,8 @@
| 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|----------|----------------|
| current | 当前页数 | Number | 1 |
| current | 当前页数 | Number | 无 |
| defaultCurrent | 默认的当前页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| pageSize | 每页条数 | Number | 10 |
| onChange | 页码改变的回调,参数是改变后的页码 | Function | noop |

View File

@ -0,0 +1,58 @@
# 条件触发
- order: 3
可以判断是否需要弹出。
---
````jsx
import { Popconfirm, Switch, message } from 'antd';
let App = React.createClass({
getInitialState() {
return {
visible: false,
condition: true, // 是否满足条件,不满足则弹出确认框
};
},
changeCondition(value) {
this.setState({ condition: value });
},
confirm() {
this.setState({ visible: false });
message.success('进行下一步操作. next step.');
},
cancel() {
this.setState({ visible: false });
message.error('点击了取消');
},
handleVisibleChange(visible) {
if (!visible) {
this.setState({ visible });
return;
}
// 打开前进行判断
console.log(this.state.condition);
if (this.state.condition) {
this.confirm(); // 直接执行下一步
} else {
this.setState({ visible }); // 进行确认
}
},
render() {
return <div>
<Popconfirm title="确定要删除这个任务吗?"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />
<br />
点击是否直接执行:<Switch defaultChecked onChange={this.changeCondition} />
</div>;
}
});
ReactDOM.render(<App />, document.getElementById('components-popconfirm-demo-dynamic-trigger'));
````

View File

@ -0,0 +1,17 @@
# 国际化
- order: 2
设置 `okText` `cancelText` 以自定义按钮文字。
---
````jsx
import { Popconfirm } from 'antd';
ReactDOM.render(
<Popconfirm title="Are you sure" okText="Yes" cancelText="No">
<a href="#">Delete</a>
</Popconfirm>
, document.getElementById('components-popconfirm-demo-locale'));
````

View File

@ -38,7 +38,7 @@ ReactDOM.render(<div>
<Button>左下</Button>
</Popconfirm>
</div>
<div style={{width: 60, marginLeft: 270}}>
<div style={{width: 60, marginLeft: 252}}>
<Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
<Button>右上</Button>
</Popconfirm>

View File

@ -2,7 +2,23 @@ import React from 'react';
import Tooltip from 'rc-tooltip';
import Icon from '../icon';
import Button from '../button';
const prefixCls = 'ant-popover';
const noop = function() {};
const transitionNames = {
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
};
export default React.createClass({
getInitialState() {
@ -16,67 +32,61 @@ export default React.createClass({
placement: 'top',
trigger: 'click',
overlayStyle: {},
onConfirm: function () {
},
onCancel: function () {
}
onConfirm: noop,
onCancel: noop,
okText: '确定',
cancelText: '取消',
visible: false,
onVisibleChange() {},
};
},
componentWillReceiveProps(nextProps) {
if ('visible' in nextProps) {
this.setState({ visible: nextProps.visible });
}
},
confirm() {
this.setVisible(false);
this.props.onConfirm.call(this);
this.setState({
visible: false
});
},
cancel() {
this.setVisible(false);
this.props.onCancel.call(this);
this.setState({
visible: false
});
},
onVisibleChange(v) {
this.setState({
visible: v
});
onVisibleChange(visible) {
this.setVisible(visible);
this.props.onVisibleChange(visible);
},
setVisible(visible) {
if (!('visible' in this.props)) {
this.setState({ visible });
}
},
render() {
const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
const overlay = <div>
<div className={prefixCls + '-content'}>
<p className={prefixCls + '-message'}>
<Icon type="exclamation-circle" />
{this.props.title}
{title}
</p>
<div className={prefixCls + '-buttons'}>
<Button onClick={this.cancel} type="ghost" size="small">取消</Button>
<Button onClick={this.confirm} type="primary" size="small">确定</Button>
<Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
<Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
</div>
</div>
</div>;
const transitionName = ({
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
})[this.props.placement];
const transitionName = transitionNames[placement];
return (
<Tooltip placement={this.props.placement}
overlayStyle={this.props.overlayStyle}
<Tooltip placement={placement}
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={this.props.trigger}
trigger={trigger}
overlay={overlay}>
{this.props.children}
</Tooltip>

View File

@ -23,3 +23,5 @@
| title | 确认框的描述 | string | 无 |
| onConfirm | 点击确认的回调 | function | 无 |
| onCancel | 卡片内容 | function | 无 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |

View File

@ -19,7 +19,7 @@ ReactDOM.render(<div>
<div>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">杭州</RadioButton>
<RadioButton value="b">上海</RadioButton>
<RadioButton value="b" disabled>上海</RadioButton>
<RadioButton value="c">北京</RadioButton>
<RadioButton value="d">成都</RadioButton>
</RadioGroup>

View File

@ -42,7 +42,7 @@ export default React.createClass({
{...radio.props}
onChange={this.onRadioChange}
checked={this.state.value === radio.props.value}
disabled={this.props.disabled}
disabled={radio.props.disabled || this.props.disabled}
/>;
}
return radio;

View File

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

View File

@ -1,36 +1,37 @@
import React from 'react';
import Select from 'rc-select';
import classNames from 'classnames';
let AntSelect = React.createClass({
const AntSelect = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-select',
transitionName: 'slide-up',
optionLabelProp: 'children',
choiceTransitionName: 'zoom',
showSearch: false,
size: 'default'
};
},
render() {
const {size, className, combobox, notFoundContent} = this.props;
let {
size, className, combobox, notFoundContent
} = this.props;
let sizeClass = null;
if (size === 'large') {
sizeClass = 'ant-select-lg';
} else if (size === 'small') {
sizeClass = 'ant-select-sm';
const cls = classNames({
'ant-select-lg': size === 'large',
'ant-select-sm': size === 'small',
[className]: !!className,
});
if (combobox) {
notFoundContent = null;
}
const classNames = [];
if (className) {
classNames.push(className);
}
if (sizeClass) {
classNames.push(sizeClass);
}
return (
<Select {...this.props} className={classNames.join(' ')} notFoundContent={combobox ? null : notFoundContent} />
<Select {...this.props}
className={cls}
notFoundContent={notFoundContent} />
);
}
});

View File

@ -26,31 +26,34 @@
|----------|----------------|----------|--------------|
| value | 指定当前选中的条目 | string/Array<String> | 无 |
| defaultValue | 指定默认选中的条目 | string/Array<String> | 无 |
| multiple | 支持多选 | | false |
| filterOption | 是否根据输入项进行筛选 | | true |
| tags | 可以把随意输入的条目作为tag输入项不需要与下拉选项匹配 | |false |
| onSelect | 被选中时调用,参数为选中的option value值 | function(value, option) | 无 |
| onDeselect | 取消选中时调用参数为选中的option value值仅在multiple或tags模式下生效 | function(value, option) | 无 |
| onChange | 选中option或input的value变化(combobox模式下)时,调用此函数 | function(value, label) | 无 |
| allowClear | 显示清除按钮 | | false |
| multiple | 支持多选 | boolean | false |
| filterOption | 是否根据输入项进行筛选 | boolean | true |
| tags | 可以把随意输入的条目作为 tag输入项不需要与下拉选项匹配 | boolean |false |
| onSelect | 被选中时调用,参数为选中的 value 值 | function(value, option) | 无 |
| onDeselect | 取消选中时调用,参数为选中 option value 值,仅在 multiple tags 模式下生效 | function(value, option) | 无 |
| onChange | 选中option或input的value变化(combobox 模式下)时,调用此函数 | function(value, label) | 无 |
| allowClear | 显示清除按钮 | boolean | false |
| onSearch | 文本框值变化时回调 | function(value: String) | |
| placeholder | 选择框默认文字 | string | 无 |
| searchPlaceholder | 搜索框默认文字 | string | 无 |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | false |
| optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
| combobox | 输入框自动提示模式 | | false |
| combobox | 输入框自动提示模式 | boolean | false |
| size | 选择框大小,可选 `large` `small` | String | default |
| showSearch | 在下拉中显示搜索框 | boolean | false |
| disabled | 是否禁用 | boolean | false |
### Option props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| key | 如果react需要你设置此项此项值与value的值相同然后可以省略value设置 | String | |
| key | 如果 react 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | String | |
| value | 默认根据此属性值进行筛选 | String | - |
### OptGroup props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
|----------|----------------|----------|-----------------|
| label | 组名 | String/React.Element | 无 |
| key | | String | - |

View File

@ -0,0 +1,19 @@
# 两种大小
- order: 3
`size="small"` 表示小号开关。
---
````jsx
import { Switch } from 'antd';
ReactDOM.render(
<div>
<Switch />
&nbsp;
<Switch size="small" />
</div>
, document.getElementById('components-switch-demo-size'));
````

View File

@ -1,13 +1,20 @@
import Switch from 'rc-switch';
import React from 'react';
import classNames from 'classnames';
export default React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-switch'
prefixCls: 'ant-switch',
size: 'default',
};
},
render() {
return <Switch {...this.props}/>;
const { prefixCls, size, className } = this.props;
const cls = classNames({
[className]: !!className,
[prefixCls + '-' + size]: true,
});
return <Switch className={cls} {...this.props} />;
}
});

View File

@ -24,3 +24,4 @@
| onChange | 变化时回调函数 | Function(checked:boolean) | | |
| checkedChildren | 选中时的内容 | React Node | | |
| unCheckedChildren | 非选中时的内容 | React Node | | |
| size | 开关大小 | string | 'default' or 'small' | 'default' |

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