Merge branch 'master' of github.com:ant-design/ant-design

This commit is contained in:
afc163 2015-11-25 18:55:52 +08:00
commit 9468b24b62
123 changed files with 685 additions and 403 deletions

View File

@ -12,6 +12,7 @@
"experimentalObjectRestSpread": true "experimentalObjectRestSpread": true
}, },
"plugins": [ "plugins": [
"markdown",
"react", "react",
"babel" "babel"
], ],
@ -30,9 +31,7 @@
"no-undef": 2, "no-undef": 2,
"no-unused-vars": [2, { "vars": "all", "args": "none" }], "no-unused-vars": [2, { "vars": "all", "args": "none" }],
"babel/object-shorthand": 0, "babel/object-shorthand": 0,
"react/jsx-boolean-value": 0,
"react/jsx-no-duplicate-props": 2, "react/jsx-no-duplicate-props": 2,
"react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
"react/sort-comp": 0, "react/sort-comp": 0,
"react/wrap-multilines": 0, "react/wrap-multilines": 0,
"react/no-multi-comp": 0, "react/no-multi-comp": 0,

View File

@ -4,6 +4,30 @@
--- ---
## 0.10.2 `2015-11-25`
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
- 优化 Badge 动画效果。
- 修复以下问题:
- 文本域的表单校验无法重置。
- 设置 Upload 的 `multiple``true` 时,未显示每个文件的上传进度。
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
- InputNumber 同时设置 `size` `className` 时会有冲突。
## 0.10.1 `2015-11-20`
- 修改内部组件的引用结构,方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
- 移除了演示中没有使用过的 `antd.ButtonGroup`,依然用 `const ButtonGroup = Button.Group` 来使用。
- Form 和 Input 目录分离,`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
现在可以 `import Form from 'ant/lib/form'``import Input from 'ant/lib/input'`
原有的 `import { Form, Input } from 'antd'` 则不受影响。
- 修复 Datepicker 的 `style``calendarStyle` 属性失效的问题,并将 `calendarStyle` 更名为 `popupStyle`
## 0.10.0 `2015-11-20` ## 0.10.0 `2015-11-20`
- 全面兼容 `react@0.14.x` - 全面兼容 `react@0.14.x`
@ -31,7 +55,7 @@
#### 组件变更 #### 组件变更
- Table - Table
- 支持单选。[演示](/components/table/#demo-row-selection-radio-props) - 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props) - 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
- 列支持了 `colSpan``rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan) - 列支持了 `colSpan``rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
- 新增 `loading` 属性。 - 新增 `loading` 属性。
@ -70,7 +94,7 @@
> 备注: > 备注:
> >
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276) > - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
> - [0.10 升级指南](/docs/upgrade-to-0.10) > - [0.10 升级指南](http://ant.design/docs/upgrade-to-0.10)
## 0.9.3 ~ 0.9.5 `2015-11-04` ## 0.9.3 ~ 0.9.5 `2015-11-04`

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import rcUtil from 'rc-util'; import rcUtil from 'rc-util';
import classNames from 'classnames';
function getScroll(w, top) { function getScroll(w, top) {
let ret = w['page' + (top ? 'Y' : 'X') + 'Offset']; let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
@ -89,7 +90,7 @@ let Affix = React.createClass({
}, },
render() { render() {
const className = rcUtil.classSet({ const className = classNames({
[this.props.className]: this.props.className, [this.props.className]: this.props.className,
'ant-affix': this.state.affix 'ant-affix': this.state.affix
}); });

View File

@ -8,7 +8,7 @@
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
const link = <a href="javascript:;">不再提醒</a>; const link = <a href="#">不再提醒</a>;
ReactDOM.render( ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} /> <Alert message="消息提示的文案" type="info" closeText={link} />

View File

@ -16,6 +16,7 @@ export default React.createClass({
}; };
}, },
handleClose(e) { handleClose(e) {
e.preventDefault();
let dom = ReactDOM.findDOMNode(this); let dom = ReactDOM.findDOMNode(this);
dom.style.height = dom.offsetHeight + 'px'; dom.style.height = dom.offsetHeight + 'px';
// Magic code // Magic code

View File

@ -0,0 +1,135 @@
import React, { createElement } from 'react';
import assign from 'object-assign';
function getNumberArray(num) {
return num ?
num.toString().split('').reverse().map(i => Number(i)) : [];
}
class AntScrollNumber extends React.Component {
constructor(props) {
super(props);
this.state = {
animateStarted: true,
count: props.count
};
}
getPositionByNum(num, i) {
if (this.state.animateStarted) {
return 10 + num;
}
const currentDigit = getNumberArray(this.state.count)[i];
const lastDigit = getNumberArray(this.lastCount)[i];
//
if (this.state.count > this.lastCount) {
if (currentDigit >= lastDigit) {
return 10 + num;
} else {
return 20 + num;
}
} else {
if (currentDigit <= lastDigit) {
return 10 + num;
} else {
return num;
}
}
}
componentWillReceiveProps(nextProps) {
if ('count' in nextProps && nextProps.count) {
if (this.lastCount === this.state.count) {
return;
}
this.lastCount = this.state.count;
//
this.setState({
animateStarted: true,
}, () => {
//
//
setTimeout(() => {
this.setState({
animateStarted: false,
count: nextProps.count,
}, () => {
this.props.onAnimated();
});
}, 5);
});
}
}
renderNumberList() {
const childrenToReturn = [];
for (let i = 0; i < 30; i++) {
childrenToReturn.push(<p key={i}>{i % 10}</p>);
}
return childrenToReturn;
}
renderCurrentNumber(num, i) {
const position = this.getPositionByNum(num, i);
const height = this.props.height;
const removeTransition = this.state.animateStarted ||
(getNumberArray(this.lastCount)[i] === undefined);
return createElement('span', {
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition && 'none',
transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
height: height,
},
key: i,
}, this.renderNumberList());
}
renderNumberElement() {
const state = this.state;
if (!state.count || isNaN(state.count)) {
return state.count;
}
return getNumberArray(state.count)
.map((num, i) => this.renderCurrentNumber(num, i)).reverse();
}
render() {
const props = assign({}, this.props, {
className: `${this.props.prefixCls} ${this.props.className}`
});
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
return createElement(
this.props.component,
props,
this.renderNumberElement()
);
} else {
return createElement(
this.props.component,
props,
props.count
);
}
}
}
AntScrollNumber.defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
component: 'sup',
onAnimated: function() {},
height: 20
};
AntScrollNumber.propTypes = {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
component: React.PropTypes.string,
onAnimated: React.PropTypes.func,
height: React.PropTypes.number,
};
export default AntScrollNumber;

View File

@ -33,7 +33,7 @@ const Test = React.createClass({
show: !this.state.show show: !this.state.show
}); });
}, },
onNumberClick(){ onNumberClick() {
const count = this.state.count; const count = this.state.count;
this.setState({ this.setState({
count: count ? 0 : 5 count: count ? 0 : 5
@ -45,9 +45,15 @@ const Test = React.createClass({
<a href="#" className="head-example"></a> <a href="#" className="head-example"></a>
</Badge> </Badge>
<Badge dot={this.state.show}> <Badge dot={this.state.show}>
<a href="#">一个链接</a> <a href="#" className="head-example"></a>
</Badge> </Badge>
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
<Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
切换数字显隐
</Button>
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
切换红点显隐
</Button>
<ButtonGroup> <ButtonGroup>
<Button type="ghost" onClick={this.decline}> <Button type="ghost" onClick={this.decline}>
<Icon type="minus" /> <Icon type="minus" />
@ -56,8 +62,6 @@ const Test = React.createClass({
<Icon type="plus" /> <Icon type="plus" />
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<Button type="ghost" onClick={this.onClick} style={{marginLeft:10}}>点切换</Button>
<Button type="ghost" onClick={this.onNumberClick} style={{marginLeft:10}}>数字切换</Button>
</div> </div>
</div>; </div>;
} }

View File

@ -10,10 +10,10 @@
import { Badge, Icon } from 'antd'; import { Badge, Icon } from 'antd';
ReactDOM.render(<div> ReactDOM.render(<div>
<Badge dot={true}> <Badge dot>
<Icon type="notification" /> <Icon type="notification" />
</Badge> </Badge>
<Badge dot={true}> <Badge dot>
<a href="#">一个链接</a> <a href="#">一个链接</a>
</Badge> </Badge>
</div>, document.getElementById('components-badge-demo-dot')); </div>, document.getElementById('components-badge-demo-dot'));

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import Animate from 'rc-animate'; import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
class AntBadge extends React.Component { class AntBadge extends React.Component {
constructor(props) { constructor(props) {
@ -27,12 +28,10 @@ class AntBadge extends React.Component {
<Animate component="" <Animate component=""
showProp="data-show" showProp="data-show"
transitionName={prefixCls + '-zoom'} transitionName={prefixCls + '-zoom'}
transitionAppear={true}> transitionAppear>
{ {
hidden ? null : hidden ? null :
<sup data-show={!hidden} className={className}> <ScrollNumber data-show={!hidden} className={className} count={count} />
{count}
</sup>
} }
</Animate> </Animate>
</span> </span>
@ -43,7 +42,7 @@ class AntBadge extends React.Component {
AntBadge.defaultProps = { AntBadge.defaultProps = {
prefixCls: 'ant-badge', prefixCls: 'ant-badge',
count: null, count: null,
dot: false dot: false,
}; };
AntBadge.propTypes = { AntBadge.propTypes = {
@ -51,7 +50,7 @@ AntBadge.propTypes = {
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.number React.PropTypes.number
]), ]),
dot: React.PropTypes.bool dot: React.PropTypes.bool,
}; };
export default AntBadge; export default AntBadge;

View File

@ -30,6 +30,9 @@ let Breadcrumb = React.createClass({
if (routes && routes.length > 0 && ReactRouter) { if (routes && routes.length > 0 && ReactRouter) {
let Link = ReactRouter.Link; let Link = ReactRouter.Link;
crumbs = routes.map(function(route, i) { crumbs = routes.map(function(route, i) {
if (!route.breadcrumbName) {
return null;
}
let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) { let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
return params[key] || replacement; return params[key] || replacement;
}); });

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
const prefix = 'ant-btn-group-'; const prefix = 'ant-btn-group-';
@ -14,7 +14,7 @@ export default class ButtonGroup extends React.Component {
'small': 'sm' 'small': 'sm'
})[size] || ''; })[size] || '';
const classes = rcUtil.classSet({ const classes = classNames({
'ant-btn-group': true, 'ant-btn-group': true,
[prefix + sizeCls]: sizeCls, [prefix + sizeCls]: sizeCls,
[className]: className [className]: className

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
import { findDOMNode } from 'react-dom'; import { findDOMNode } from 'react-dom';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/; const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
@ -41,7 +41,7 @@ export default class Button extends React.Component {
'small': 'sm' 'small': 'sm'
})[size] || ''; })[size] || '';
const classes = rcUtil.classSet({ const classes = classNames({
'ant-btn': true, 'ant-btn': true,
[prefix + type]: type, [prefix + type]: type,
[prefix + shape]: shape, [prefix + shape]: shape,

View File

@ -18,7 +18,7 @@ ReactDOM.render(<div>
<Button>次按钮</Button> <Button>次按钮</Button>
<Button type="ghost">幽灵按钮</Button> <Button type="ghost">幽灵按钮</Button>
</div>, </div>,
document.getElementById('components-button-demo-basic')) document.getElementById('components-button-demo-basic'));
```` ````
<style> <style>

View File

@ -22,13 +22,13 @@ const App = React.createClass({
}, },
render() { render() {
return <div> return <div>
<Button type="primary" size="large" loading={true}> <Button type="primary" size="large" loading>
加载中 加载中
</Button> </Button>
<Button type="primary" loading={true}> <Button type="primary" loading>
加载中 加载中
</Button> </Button>
<Button type="primary" size="small" loading={true}> <Button type="primary" size="small" loading>
加载中 加载中
</Button> </Button>
<br /> <br />

View File

@ -10,7 +10,7 @@
import { Calendar } from 'antd'; import { Calendar } from 'antd';
function getListData(value) { function getListData(value) {
var listData; let listData;
switch (value.getDayOfMonth()) { switch (value.getDayOfMonth()) {
case 8: case 8:
listData = [ listData = [
@ -32,6 +32,7 @@ function getListData(value) {
{ type: 'error', content: '这里是错误事项.' }, { type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' } { type: 'error', content: '这里是错误事项.' }
]; break; ]; break;
default:
} }
return listData || []; return listData || [];
} }

View File

@ -18,7 +18,7 @@ const App = React.createClass({
}; };
}, },
render() { render() {
var label = (this.state.checked ? '选中' : '取消') + '-' + const label = (this.state.checked ? '选中' : '取消') + '-' +
(this.state.disabled ? '不可用' : '可用'); (this.state.disabled ? '不可用' : '可用');
return <div> return <div>
<p style={{marginBottom: '20px'}}> <p style={{marginBottom: '20px'}}>
@ -32,12 +32,12 @@ const App = React.createClass({
<p> <p>
<Button type="primary" size="small" <Button type="primary" size="small"
onClick={this.toggleChecked}> onClick={this.toggleChecked}>
{!this.state.checked ? "选中":"取消"} {!this.state.checked ? '选中' : '取消'}
</Button> </Button>
<Button style={{'marginLeft': '10px'}} <Button style={{marginLeft: '10px'}}
type="primary" size="small" type="primary" size="small"
onClick={this.toggleDisable}> onClick={this.toggleDisable}>
{!this.state.disabled ? "不可用":"可用"} {!this.state.disabled ? '不可用' : '可用'}
</Button> </Button>
</p> </p>
</div>; </div>;

View File

@ -1,4 +1,4 @@
# 不可用 不可用
- order: 1 - order: 1
@ -11,8 +11,8 @@ import { Checkbox } from 'antd';
const container = document.getElementById('components-checkbox-demo-disable'); const container = document.getElementById('components-checkbox-demo-disable');
ReactDOM.render(<div> ReactDOM.render(<div>
<Checkbox defaultChecked={false} disabled={true}/> <Checkbox defaultChecked={false} disabled />
<br /> <br />
<Checkbox defaultChecked={true} disabled={true}/> <Checkbox defaultChecked disabled />
</div>, container); </div>, container);
```` ````

2
components/col/index.js Normal file
View File

@ -0,0 +1,2 @@
import { Col } from '../layout';
export default Col;

View File

@ -17,7 +17,7 @@ const text = `
`; `;
ReactDOM.render( ReactDOM.render(
<Collapse accordion={true}> <Collapse accordion>
<Panel header={`This is panel header 1`} key="1"> <Panel header={`This is panel header 1`} key="1">
<p>{text}</p> <p>{text}</p>
</Panel> </Panel>

View File

@ -21,14 +21,14 @@ const text = `
`; `;
ReactDOM.render( ReactDOM.render(
<Collapse defaultActiveKey={["1"]} onChange={callback}> <Collapse defaultActiveKey={['1']} onChange={callback}>
<Panel header={`This is panel header 1`} key="1"> <Panel header="This is panel header 1" key="1">
<p>{text}</p> <p>{text}</p>
</Panel> </Panel>
<Panel header={`This is panel header 2`} key="2"> <Panel header="This is panel header 2" key="2">
<p>{text}</p> <p>{text}</p>
</Panel> </Panel>
<Panel header={`This is panel header 3`} key="3"> <Panel header="This is panel header 3" key="3">
<p>{text}</p> <p>{text}</p>
</Panel> </Panel>
</Collapse> </Collapse>

View File

@ -21,7 +21,7 @@ const text = `
`; `;
ReactDOM.render( ReactDOM.render(
<Collapse onChange={callback} accordion={true}> <Collapse onChange={callback} accordion>
<Panel header={`This is panel header 1`} key="1"> <Panel header={`This is panel header 1`} key="1">
<Collapse defaultActiveKey="1"> <Collapse defaultActiveKey="1">
<Panel header={`This is panel nest panel`} key="1"> <Panel header={`This is panel nest panel`} key="1">

View File

@ -10,6 +10,6 @@
import { Datepicker } from 'antd'; import { Datepicker } from 'antd';
ReactDOM.render( ReactDOM.render(
<Datepicker defaultValue="2015-06-06" disabled={true} /> <Datepicker defaultValue="2015-06-06" disabled />
, document.getElementById('components-datepicker-demo-disabled')); , document.getElementById('components-datepicker-demo-disabled'));
```` ````

View File

@ -9,7 +9,7 @@
````jsx ````jsx
import { Datepicker } from 'antd'; import { Datepicker } from 'antd';
import enUS from 'antd/lib/datepicker/locale/en_US'; import enUS from 'antd/lib/datepicker/locale/en_US';
import assign from 'object-assign' import assign from 'object-assign';
const App = React.createClass({ const App = React.createClass({
getInitialState() { getInitialState() {
@ -22,7 +22,7 @@ const App = React.createClass({
}; };
}, },
render() { render() {
return <Datepicker showTime={true} locale={this.state.locale} />; return <Datepicker locale={this.state.locale} />;
} }
}); });

View File

@ -14,7 +14,7 @@ const Picker = React.createClass({
console.log(new Date(value.getTime())); console.log(new Date(value.getTime()));
}, },
render: function() { render: function() {
return <Datepicker onChange={this.handleChange} /> return <Datepicker onChange={this.handleChange} />;
} }
}); });

View File

@ -29,7 +29,7 @@ const DateRange = React.createClass({
return endValue.getTime() <= this.state.startValue.getTime(); return endValue.getTime() <= this.state.startValue.getTime();
}, },
onChange(field, value) { onChange(field, value) {
console.log(field,'change',value); console.log(field, 'change', value);
this.setState({ this.setState({
[field]: value, [field]: value,
}); });
@ -39,11 +39,11 @@ const DateRange = React.createClass({
<Datepicker disabledDate={this.disabledStartDate} <Datepicker disabledDate={this.disabledStartDate}
value={this.state.startValue} value={this.state.startValue}
placeholder="开始日期" placeholder="开始日期"
onChange={this.onChange.bind(this,'startValue')} /> onChange={this.onChange.bind(this, 'startValue')} />
<Datepicker disabledDate={this.disabledEndDate} <Datepicker disabledDate={this.disabledEndDate}
value={this.state.endValue} value={this.state.endValue}
placeholder="结束日期" placeholder="结束日期"
onChange={this.onChange.bind(this,'endValue')} /> onChange={this.onChange.bind(this, 'endValue')} />
</div>; </div>;
} }
}); });

View File

@ -1,15 +1,43 @@
# 时间选择 # 日期时间选择
- order: 4 - order: 4
准确到秒的时间选择面板 和 [时间选择框](/components/timepicer) 配合使用
--- ---
````jsx ````jsx
import { Datepicker } from 'antd'; import { Datepicker, Timepicker } from 'antd';
ReactDOM.render( let result = new Date();
<Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" defaultValue="2015-11-11 11:11:11"/> let selectdDate, selectdTime;
, document.getElementById('components-datepicker-demo-time')); 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

@ -20,7 +20,7 @@ function createPicker(TheCalendar) {
}, // onChange Validator }, // onChange Validator
locale: {}, locale: {},
align: { align: {
offset: [0, -10], offset: [0, -9],
}, },
open: false open: false
}; };
@ -87,24 +87,25 @@ function createPicker(TheCalendar) {
this.props.onChange(timeValue); this.props.onChange(timeValue);
}, },
render() { render() {
const locale = this.getLocale();
// //
// //
// //
let defaultCalendarValue = new GregorianCalendar(this.getLocale()); let defaultCalendarValue = new GregorianCalendar(locale);
defaultCalendarValue.setTime(Date.now()); defaultCalendarValue.setTime(Date.now());
const placeholder = ('placeholder' in this.props) const placeholder = ('placeholder' in this.props)
? this.placeholder : this.getLocale().lang.placeholder; ? this.props.placeholder : locale.lang.placeholder;
const calendar = ( const calendar = (
<TheCalendar <TheCalendar
disabledDate={this.props.disabledDate} disabledDate={this.props.disabledDate}
locale={this.getLocale().lang} locale={locale.lang}
defaultValue={defaultCalendarValue} defaultValue={defaultCalendarValue}
dateInputPlaceholder={placeholder} dateInputPlaceholder={placeholder}
showTime={this.props.showTime} showTime={this.props.showTime}
prefixCls="ant-calendar" prefixCls="ant-calendar"
showOk={this.props.showTime} showOk={this.props.showTime}
showClear={true}/> showClear />
); );
let sizeClass = ''; let sizeClass = '';
@ -139,6 +140,7 @@ function createPicker(TheCalendar) {
onChange={this.handleInputChange} onChange={this.handleInputChange}
value={value && this.getFormatter().format(value)} value={value && this.getFormatter().format(value)}
placeholder={placeholder} placeholder={placeholder}
style={this.props.style}
className={'ant-calendar-picker-input ant-input' + sizeClass}/> className={'ant-calendar-picker-input ant-input' + sizeClass}/>
<span className="ant-calendar-picker-icon"/> <span className="ant-calendar-picker-icon"/>
</span> </span>

View File

@ -25,9 +25,9 @@
| format | 展示的日期格式 | string | "yyyy-MM-dd" | | format | 展示的日期格式 | string | "yyyy-MM-dd" |
| disabledDate | 不可选择的日期 | function | 无 | | disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(Date value) | 无 | | onChange | 时间发生变化的回调,发生在用户选择时间时 | function(Date value) | 无 |
| showTime | 显示时间选择条 | boolean | false |
| disabled | 禁用 | bool | false | | disabled | 禁用 | bool | false |
| calendarStyle | 格外的弹出日历样式,例如 zIndex | object | {} | | style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小,`large` 高度为 32px`small` 为 22px默认是 28px | string | 无 | | size | 输入框大小,`large` 高度为 32px`small` 为 22px默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |

View File

@ -21,7 +21,7 @@ const menu = <Menu>
</Menu>; </Menu>;
ReactDOM.render(<div> ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={["click"]}> <Dropdown overlay={menu} trigger={['click']}>
<Button type="primary"> <Button type="primary">
点击触发 <Icon type="down" /> 点击触发 <Icon type="down" />
</Button> </Button>

View File

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
const cx = rcUtil.classSet;
class Form extends React.Component { class Form extends React.Component {
render() { render() {
@ -10,7 +8,7 @@ class Form extends React.Component {
[`${prefixCls}-horizontal`]: this.props.horizontal, [`${prefixCls}-horizontal`]: this.props.horizontal,
[`${prefixCls}-inline`]: this.props.inline, [`${prefixCls}-inline`]: this.props.inline,
}; };
const classes = cx(formClassName); const classes = classNames(formClassName);
return ( return (
<form {...this.props} className={classes}> <form {...this.props} className={classes}>

View File

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
const cx = rcUtil.classSet;
function prefixClsFn(prefixCls, ...args) { function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> { return args.map((s)=> {
@ -32,7 +30,7 @@ class FormItem extends React.Component {
renderValidateWrapper(c1, c2) { renderValidateWrapper(c1, c2) {
let classes = ''; let classes = '';
if (this.props.validateStatus) { if (this.props.validateStatus) {
classes = cx( classes = classNames(
{ {
'has-feedback': this.props.hasFeedback, 'has-feedback': this.props.hasFeedback,
'has-success': this.props.validateStatus === 'success', 'has-success': this.props.validateStatus === 'success',
@ -113,7 +111,7 @@ class FormItem extends React.Component {
}; };
return ( return (
<div className={cx(itemClassName)}> <div className={classNames(itemClassName)}>
{children} {children}
</div> </div>
); );

View File

@ -28,7 +28,7 @@ ReactDOM.render(
label="用户名:" label="用户名:"
labelCol={{span:5}} labelCol={{span:5}}
wrapperCol={{span:12}} wrapperCol={{span:12}}
required={true} > required>
<p className="ant-form-text">大眼萌 minion</p> <p className="ant-form-text">大眼萌 minion</p>
</FormItem> </FormItem>
<FormItem <FormItem
@ -36,7 +36,7 @@ ReactDOM.render(
label="密码:" label="密码:"
labelCol={{span:5}} labelCol={{span:5}}
wrapperCol={{span:12}} wrapperCol={{span:12}}
required={true} > required>
<Input type="password" defaultValue="123456" id="password" /> <Input type="password" defaultValue="123456" id="password" />
</FormItem> </FormItem>
<Row> <Row>

View File

@ -60,7 +60,7 @@ ReactDOM.render(
<Checkbox />选项二 <Checkbox />选项二
</label> </label>
<label className="ant-checkbox-vertical"> <label className="ant-checkbox-vertical">
<Checkbox disabled={true} />选项三(不可选) <Checkbox disabled />选项三(不可选)
</label> </label>
</FormItem> </FormItem>

View File

@ -30,7 +30,7 @@ const Demo = React.createClass({
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) { message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') { if (typeof v === 'undefined') {
return ''; return '';
} }
@ -46,7 +46,7 @@ const Demo = React.createClass({
label="用户名:" label="用户名:"
labelCol={{span: 6}} labelCol={{span: 6}}
wrapperCol={{span: 6}} wrapperCol={{span: 6}}
required={true} > required>
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p> <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem> </FormItem>
<FormItem <FormItem
@ -54,15 +54,15 @@ const Demo = React.createClass({
label="密码:" label="密码:"
labelCol={{span: 6}} labelCol={{span: 6}}
wrapperCol={{span: 14}} wrapperCol={{span: 14}}
required={true} > required>
<Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} /> <Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
</FormItem> </FormItem>
<FormItem <FormItem
label="您的性别:" label="您的性别:"
labelCol={{span: 6}} labelCol={{span: 6}}
wrapperCol={{span: 14}} wrapperCol={{span: 14}}
required={true} > required>
<RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} > <RadioGroup name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
<Radio value="male">男的</Radio> <Radio value="male">男的</Radio>
<Radio value="female">女的</Radio> <Radio value="female">女的</Radio>
</RadioGroup> </RadioGroup>
@ -72,8 +72,8 @@ const Demo = React.createClass({
label="备注:" label="备注:"
labelCol={{span: 6}} labelCol={{span: 6}}
wrapperCol={{span: 14}} wrapperCol={{span: 14}}
required={true} required
help="随便写点什么" > help="随便写点什么">
<Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} /> <Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
</FormItem> </FormItem>
<FormItem <FormItem

View File

@ -25,7 +25,7 @@ const Demo = React.createClass({
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) { message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') { if (typeof v === 'undefined') {
return ''; return '';
} }

View File

@ -7,18 +7,18 @@
--- ---
````jsx ````jsx
import {Form, Input, Select, InputNumber, Datepicker, Switch, Menu, Dropdown, Slider, Icon, Button, message, Row, Col} from 'antd'; import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
var Demo = React.createClass({ const Demo = React.createClass({
mixins: [Form.ValueMixin], mixins: [Form.ValueMixin],
getInitialState() { getInitialState() {
return { return {
formData: { formData: {
inputNumber: undefined, inputNumber: undefined,
static: "唧唧复唧唧木兰当户织呀", static: '唧唧复唧唧木兰当户织呀',
switch: undefined, switch: undefined,
slider: undefined, slider: undefined,
select: undefined, select: undefined,
@ -30,7 +30,7 @@ var Demo = React.createClass({
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) { message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') { if (typeof v === 'undefined') {
return ''; return '';
} }
@ -39,14 +39,14 @@ var Demo = React.createClass({
}, },
render() { render() {
var formData = this.state.formData; const formData = this.state.formData;
return ( return (
<Form horizontal onSubmit={this.handleSubmit} > <Form horizontal onSubmit={this.handleSubmit} >
<FormItem <FormItem
label="InputNumber 数字输入框:" label="InputNumber 数字输入框:"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 10}} wrapperCol={{span: 10}}
required={true} > required>
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} /> <InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
<span className="ant-form-text"> 台机器</span> <span className="ant-form-text"> 台机器</span>
</FormItem> </FormItem>
@ -55,10 +55,10 @@ var Demo = React.createClass({
label="我是标题:" label="我是标题:"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 10}} wrapperCol={{span: 10}}
required={true} > required>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p> <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text"> <p className="ant-form-text">
<a href="javascript:;">链接文字</a> <a href="#">链接文字</a>
</p> </p>
</FormItem> </FormItem>
@ -66,7 +66,7 @@ var Demo = React.createClass({
label="Switch 开关:" label="Switch 开关:"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 10}} wrapperCol={{span: 10}}
required={true} > required>
<Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} /> <Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
</FormItem> </FormItem>
@ -74,15 +74,15 @@ var Demo = React.createClass({
label="Slider 滑动输入条:" label="Slider 滑动输入条:"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 10}} wrapperCol={{span: 10}}
required={true}> required>
<Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} /> <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} name="slider" onChange={this.setValue.bind(this, 'slider')} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Select 选择器:" label="Select 选择器:"
labelCol={{span: 8}} labelCol={{span: 8}}
wrapperCol={{span: 16}} wrapperCol={{span: 16}}
required={true}> required>
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}> <Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
<Option value="jack">jack</Option> <Option value="jack">jack</Option>
<Option value="lucy">lucy</Option> <Option value="lucy">lucy</Option>
@ -94,7 +94,7 @@ var Demo = React.createClass({
<FormItem <FormItem
label="Datepicker 日期选择框:" label="Datepicker 日期选择框:"
labelCol={{span: 8}} labelCol={{span: 8}}
required={true}> required>
<Col span="6"> <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>

View File

@ -13,7 +13,7 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
--- ---
````jsx ````jsx
import {Form, Input, Datepicker, Row, Col} from "antd"; import { Form, Input, Datepicker, Col } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
ReactDOM.render( ReactDOM.render(
@ -39,7 +39,7 @@ ReactDOM.render(
label="校验中:" label="校验中:"
labelCol={{span: 5}} labelCol={{span: 5}}
wrapperCol={{span: 12}} wrapperCol={{span: 12}}
hasFeedback={true} hasFeedback
validateStatus="validating" validateStatus="validating"
help="信息审核中..."> help="信息审核中...">
<Input defaultValue="我是被校验的内容" id="validating" /> <Input defaultValue="我是被校验的内容" id="validating" />
@ -49,7 +49,7 @@ ReactDOM.render(
label="成功校验:" label="成功校验:"
labelCol={{span: 5}} labelCol={{span: 5}}
wrapperCol={{span: 12}} wrapperCol={{span: 12}}
hasFeedback={true} hasFeedback
validateStatus="success"> validateStatus="success">
<Input defaultValue="我是正文" id="success" /> <Input defaultValue="我是正文" id="success" />
</FormItem> </FormItem>
@ -58,7 +58,7 @@ ReactDOM.render(
label="警告校验:" label="警告校验:"
labelCol={{span: 5}} labelCol={{span: 5}}
wrapperCol={{span: 12}} wrapperCol={{span: 12}}
hasFeedback={true} hasFeedback
validateStatus="warning"> validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" /> <Input defaultValue="前方高能预警" id="warning" />
</FormItem> </FormItem>
@ -67,7 +67,7 @@ ReactDOM.render(
label="失败校验:" label="失败校验:"
labelCol={{span: 5}} labelCol={{span: 5}}
wrapperCol={{span: 12}} wrapperCol={{span: 12}}
hasFeedback={true} hasFeedback
validateStatus="error" validateStatus="error"
help="请输入数字和字母组合"> help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" /> <Input defaultValue="无效选择" id="error" />

View File

@ -1,11 +1,15 @@
import Form from './Form'; import Form from './Form';
import FormItem from './FormItem'; import FormItem from './FormItem';
import ValueMixin from './ValueMixin'; import ValueMixin from './ValueMixin';
import Input from './Input'; import Input from '../input';
Form.Item = FormItem; Form.Item = FormItem;
Form.ValueMixin = ValueMixin; Form.ValueMixin = ValueMixin;
export default {
Form, // import { Form, Input } from 'antd/lib/form/';
Input //
}; // https://github.com/ant-design/ant-design/pull/566
Form.Form = Form;
Form.Input = Input;
export default Form;

View File

@ -25,7 +25,7 @@
```html ```html
<Form.Item {...props}> <Form.Item {...props}>
{children} {children}
</Form.Item>` </Form.Item>
``` ```
## Input 输入框 ## Input 输入框

View File

@ -9,7 +9,7 @@
````jsx ````jsx
import { InputNumber, Button } from 'antd'; import { InputNumber, Button } from 'antd';
var Test = React.createClass({ const Test = React.createClass({
getInitialState() { getInitialState() {
return { return {
disabled: true disabled: true

View File

@ -1,5 +1,6 @@
import InputNumber from 'rc-input-number';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import InputNumber from 'rc-input-number';
export default React.createClass({ export default React.createClass({
getDefaultProps() { getDefaultProps() {
@ -9,12 +10,13 @@ export default React.createClass({
}; };
}, },
render() { render() {
let sizeClass = ''; const {className, size, ...other} = this.props;
if (this.props.size === 'large') { const inputNumberClass = classNames({
sizeClass = 'ant-input-number-lg'; 'ant-input-number-lg': size === 'large',
} else if (this.props.size === 'small') { 'ant-input-number-sm': size === 'small',
sizeClass = 'ant-input-number-sm'; [className]: !!className,
} });
return <InputNumber className={sizeClass} {...this.props} />;
return <InputNumber className={inputNumberClass} {...other} />;
} }
}); });

View File

@ -79,7 +79,7 @@ class Input extends React.Component {
} }
switch (props.type) { switch (props.type) {
case 'textarea': case 'textarea':
return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />; return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
default: default:
inputClassName = props.className ? props.className : inputClassName; inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>; return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
const Col = React.createClass({ const Col = React.createClass({
propTypes: { propTypes: {
@ -13,7 +13,7 @@ const Col = React.createClass({
}, },
render() { render() {
const {span, order, offset, push, pull, className, ...others} = this.props; const {span, order, offset, push, pull, className, ...others} = this.props;
const classes = rcUtil.classSet({ const classes = classNames({
['col-' + span]: span, ['col-' + span]: span,
['col-order-' + order]: order, ['col-order-' + order]: order,
['col-offset-' + offset]: offset, ['col-offset-' + offset]: offset,

View File

@ -10,13 +10,13 @@ Flex 子元素垂直对齐。
````jsx ````jsx
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
var DemoBox = React.createClass({ const DemoBox = React.createClass({
render() { render() {
const { value } = this.props; const { value } = this.props;
const className = `hight-${value}`; const className = `hight-${value}`;
return ( return (
<p className={className}>{this.props.children}</p> <p className={className}>{this.props.children}</p>
) );
} }
}); });

View File

@ -54,5 +54,5 @@ ReactDOM.render(
</Row> </Row>
</div>, </div>,
document.getElementById('components-layout-demo-flex') document.getElementById('components-layout-demo-flex')
) );
```` ````

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import rcUtil from 'rc-util'; import classNames from 'classnames';
const Row = React.createClass({ const Row = React.createClass({
propTypes: { propTypes: {
@ -11,7 +11,7 @@ const Row = React.createClass({
}, },
render() { render() {
const { type, justify, align, className, ...others } = this.props; const { type, justify, align, className, ...others } = this.props;
const classes = rcUtil.classSet({ const classes = classNames({
'row': true, 'row': true,
['row-' + type]: type, ['row-' + type]: type,
['row-' + type + '-' + justify]: justify, ['row-' + type + '-' + justify]: justify,

View File

@ -7,14 +7,14 @@
--- ---
````jsx ````jsx
import { Menu, Icon, Switch } from 'antd'; import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu; const SubMenu = Menu.SubMenu;
const App = React.createClass({ const App = React.createClass({
getInitialState() { getInitialState() {
return { return {
current: 'mail' current: 'mail'
} };
}, },
handleClick(e) { handleClick(e) {
console.log('click ', e); console.log('click ', e);

View File

@ -10,12 +10,12 @@
import { Menu, Icon } from 'antd'; import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu; const SubMenu = Menu.SubMenu;
var Sider = React.createClass({ const Sider = React.createClass({
getInitialState() { getInitialState() {
return { return {
current: '1', current: '1',
openKeys: [] openKeys: []
} };
}, },
handleClick(e) { handleClick(e) {
console.log('click ', e); console.log('click ', e);

View File

@ -10,11 +10,11 @@
import { Menu, Icon } from 'antd'; import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu; const SubMenu = Menu.SubMenu;
var Sider = React.createClass({ const Sider = React.createClass({
getInitialState() { getInitialState() {
return { return {
current: '1' current: '1'
} };
}, },
handleClick(e) { handleClick(e) {
console.log('click ', e); console.log('click ', e);

View File

@ -10,11 +10,11 @@
import { Menu, Icon, Switch } from 'antd'; import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu; const SubMenu = Menu.SubMenu;
var Sider = React.createClass({ const Sider = React.createClass({
getInitialState() { getInitialState() {
return { return {
theme: 'light' theme: 'light'
} };
}, },
changeTheme(value) { changeTheme(value) {
this.setState({ this.setState({

View File

@ -91,7 +91,7 @@ export default function (props) {
ReactDOM.render(<Dialog ReactDOM.render(<Dialog
prefixCls="ant-modal" prefixCls="ant-modal"
className="ant-confirm" className="ant-confirm"
visible={true} visible
closable={false} closable={false}
title="" title=""
transitionName="zoom" transitionName="zoom"

View File

@ -9,8 +9,6 @@
````jsx ````jsx
import { Modal, Button } from 'antd'; import { Modal, Button } from 'antd';
const ModalText = '对话框的内容';
const Test = React.createClass({ const Test = React.createClass({
getInitialState() { getInitialState() {
return { return {
@ -55,5 +53,5 @@ const Test = React.createClass({
} }
}); });
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async')); ReactDOM.render(<Test/>, document.getElementById('components-modal-demo-async'));
```` ````

View File

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

View File

@ -8,14 +8,13 @@
````jsx ````jsx
import { Modal, Button } from 'antd'; import { Modal, Button } from 'antd';
const confirm = antd.Modal.confirm; const confirm = Modal.confirm;
function showConfirm(){ function showConfirm(){
confirm({ confirm({
title: '您是否确认要删除这项内容', title: '您是否确认要删除这项内容',
content: '一些解释', content: '点确认 1 秒后关闭',
onOk: function() { onOk: function() {
alert('1 秒后关闭');
return new Promise(function(resolve) { return new Promise(function(resolve) {
setTimeout(resolve, 1000); setTimeout(resolve, 1000);
}); });

View File

@ -8,14 +8,14 @@
````jsx ````jsx
import { Modal, Button } from 'antd'; import { Modal, Button } from 'antd';
const confirm = antd.Modal.confirm; const confirm = Modal.confirm;
function showConfirm(){ function showConfirm(){
confirm({ confirm({
title: '您是否确认要删除这项内容', title: '您是否确认要删除这项内容',
content: '一些解释', content: '一些解释',
onOk: function() { onOk: function() {
alert('确定'); console.log('确定');
}, },
onCancel: function() {} onCancel: function() {}
}); });

View File

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

View File

@ -11,12 +11,12 @@ import { Button, notification } from 'antd';
const openNotification = function() { const openNotification = function() {
notification.open({ notification.open({
message: "这是标题", message: '这是标题',
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案" description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
}); });
}; };
ReactDOM.render( ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button> <Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
,document.getElementById('components-notification-demo-basic')); , document.getElementById('components-notification-demo-basic'));
```` ````

View File

@ -11,8 +11,8 @@ import { Button, notification } from 'antd';
const openNotification = function() { const openNotification = function() {
const args = { const args = {
message: "这是标题", message: '这是标题',
description: "我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭", description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
duration: 0 duration: 0
}; };
notification.open(args); notification.open(args);

View File

@ -10,13 +10,13 @@
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
const close = function() { const close = function() {
console.log("我被默认的关闭按钮关闭了!"); console.log('我被默认的关闭按钮关闭了!');
}; };
const openNotification = function() { const openNotification = function() {
const args = { const args = {
message: "这是标题", message: '这是标题',
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
onClose: close onClose: close
}; };
notification.open(args); notification.open(args);

View File

@ -9,12 +9,12 @@
````jsx ````jsx
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
const close = function(){ const close = function() {
console.log('我被默认的关闭按钮关闭了!'); console.log('我被默认的关闭按钮关闭了!');
} };
const openNotification = function() { const openNotification = function() {
const key='open'+Date.now(); const key = 'open' + Date.now();
const btnClick = function() { const btnClick = function() {
// 隐藏提醒框 // 隐藏提醒框
notification.close(key); notification.close(key);
@ -23,8 +23,8 @@ const openNotification = function() {
自定义关闭按钮并触发回调函数 自定义关闭按钮并触发回调函数
</Button>; </Button>;
notification.open({ notification.open({
message: "这是标题", message: '这是标题',
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
btn: btn, btn: btn,
key: key, key: key,
onClose: close onClose: close

View File

@ -12,8 +12,8 @@ import { Button, notification } from 'antd';
const openNotificationWithIcon = function(type) { const openNotificationWithIcon = function(type) {
return function(){ return function(){
notification[type]({ notification[type]({
message: "这是标题", message: '这是标题',
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案" description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
}); });
}; };
}; };

View File

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

View File

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

View File

@ -19,7 +19,7 @@ function cancel() {
ReactDOM.render( ReactDOM.render(
<Popconfirm title="确定要删除这个任务吗?" onConfirm={confirm} onCancel={cancel}> <Popconfirm title="确定要删除这个任务吗?" onConfirm={confirm} onCancel={cancel}>
<a href="javascript:;">删除</a> <a href="#">删除</a>
</Popconfirm> </Popconfirm>
, document.getElementById('components-popconfirm-demo-basic')); , document.getElementById('components-popconfirm-demo-basic'));
```` ````

View File

@ -54,7 +54,7 @@ const Test = React.createClass({
<div className="demo-list"> <div className="demo-list">
<div className="title"></div> <div className="title"></div>
<QueueAnim component="ul" type={['right', 'left']}> <QueueAnim component="ul" type={['right', 'left']}>
{this.state.show ? this.state.items: null} {this.state.show ? this.state.items : null}
</QueueAnim> </QueueAnim>
</div> </div>
</div> </div>

View File

@ -13,12 +13,12 @@ const Test = React.createClass({
getInitialState() { getInitialState() {
return { return {
show: true, show: true,
} };
}, },
onClick() { onClick() {
this.setState({ this.setState({
show: !this.state.show, show: !this.state.show,
}) });
}, },
render() { render() {
return ( return (
@ -52,7 +52,7 @@ const Test = React.createClass({
] : null} ] : null}
</QueueAnim> </QueueAnim>
</div> </div>
) );
} }
}); });

View File

@ -48,7 +48,7 @@ const Test = React.createClass({
</ul> </ul>
</div> </div>
</div> </div>
]: null} ] : null}
</QueueAnim> </QueueAnim>
</div> </div>
); );

View File

@ -7,8 +7,7 @@
--- ---
````jsx ````jsx
import { QueueAnim, Button, Select, Checkbox, Radio } from 'antd'; import { QueueAnim, Button, Checkbox, Radio } from 'antd';
const Option = Select.Option;
const RadioGroup = Radio.Group; const RadioGroup = Radio.Group;
const Test = React.createClass({ const Test = React.createClass({
@ -28,21 +27,21 @@ const Test = React.createClass({
<p className="buttons"> <p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button> <Button type="primary" onClick={this.onClick}>切换</Button>
</p> </p>
<QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse={true}> <QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse>
{this.state.show ? [ {this.state.show ? [
<div className="ant-form-item ant-form-item-compact" key='name'> <div className="ant-form-item ant-form-item-compact" key="name">
<label htmlFor="userName" className="col-6" required>用户名:</label> <label htmlFor="userName" className="col-6" required>用户名:</label>
<div className="col-6"> <div className="col-6">
<p className="ant-form-text">大眼萌 minion</p> <p className="ant-form-text">大眼萌 minion</p>
</div> </div>
</div>, </div>,
<div className="ant-form-item" key='password'> <div className="ant-form-item" key="password">
<label htmlFor="password" className="col-6" required>密码:</label> <label htmlFor="password" className="col-6" required>密码:</label>
<div className="col-14"> <div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/> <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div> </div>
</div>, </div>,
<div className="ant-form-item ant-form-item-compact" key='sex'> <div className="ant-form-item ant-form-item-compact" key="sex">
<label className="col-6" required>您的性别:</label> <label className="col-6" required>您的性别:</label>
<div className="col-14"> <div className="col-14">
<RadioGroup value="male"> <RadioGroup value="male">
@ -51,14 +50,14 @@ const Test = React.createClass({
</RadioGroup> </RadioGroup>
</div> </div>
</div>, </div>,
<div className="ant-form-item" key='remark'> <div className="ant-form-item" key="remark">
<label htmlFor="remark" className="col-6" required>备注:</label> <label htmlFor="remark" className="col-6" required>备注:</label>
<div className="col-14"> <div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea> <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p> <p className="ant-form-explain">随便写点什么</p>
</div> </div>
</div>, </div>,
<div className="ant-form-item ant-form-item-compact" key='checkbox'> <div className="ant-form-item ant-form-item-compact" key="checkbox">
<div className="col-14 col-offset-6"> <div className="col-14 col-offset-6">
<label> <label>
<Checkbox /> <Checkbox />
@ -66,7 +65,7 @@ const Test = React.createClass({
</label> </label>
</div> </div>
</div>, </div>,
<div className="row" key='btn'> <div className="row" key="btn">
<div className="col-16 col-offset-6"> <div className="col-16 col-offset-6">
<Button type="primary">确定</Button> <Button type="primary">确定</Button>
</div> </div>

View File

@ -29,7 +29,7 @@ const App = React.createClass({
</Menu.Item> </Menu.Item>
</Menu> </Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap"> <QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children||<Home/>, {key: key})} {React.cloneElement(this.props.children || <Home/>, {key: key})}
</QueueAnim> </QueueAnim>
</div> </div>
); );
@ -83,7 +83,7 @@ const Page1 = React.createClass({
<div className="demo-listBox"> <div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}> <QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div> <div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="ul"> <QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="ul">
<li key="0"></li> <li key="0"></li>
<li key="1"></li> <li key="1"></li>
<li key="2"></li> <li key="2"></li>
@ -104,7 +104,7 @@ const Page2 = React.createClass({
<div className="demo-listBox"> <div className="demo-listBox">
<QueueAnim className="demo-list"> <QueueAnim className="demo-list">
<div className="title" key="title3"></div> <div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="li"> <QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="li">
<li key="0"></li> <li key="0"></li>
<li key="1"></li> <li key="1"></li>
<li key="2"></li> <li key="2"></li>

View File

@ -9,10 +9,6 @@ Radio 不可用。
````jsx ````jsx
import { Radio, Button } from 'antd'; import { Radio, Button } from 'antd';
function toggleDisabled() {
disabled = !disabled;
}
const App = React.createClass({ const App = React.createClass({
getInitialState() { getInitialState() {
return { return {
@ -28,7 +24,7 @@ const App = React.createClass({
return <div> return <div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio> <Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br /> <br />
<Radio defaultChecked={true} disabled={this.state.disabled}>不可用</Radio> <Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}> <div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}> <Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled Toggle disabled

2
components/row/index.js Normal file
View File

@ -0,0 +1,2 @@
import { Row } from '../layout';
export default Row;

View File

@ -15,7 +15,7 @@ function handleChange(value) {
} }
ReactDOM.render( ReactDOM.render(
<Select defaultValue="lucy" showSearch={true} style={{width:200}} <Select defaultValue="lucy" showSearch style={{width:200}}
searchPlaceholder="输入" searchPlaceholder="输入"
onChange={handleChange}> onChange={handleChange}>
<Option value="jack">jack</Option> <Option value="jack">jack</Option>

View File

@ -24,13 +24,11 @@ const IconSlider = React.createClass({
}, },
handleChange(v) { handleChange(v) {
this.setState( this.setState({
{
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight', preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight': '', nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v sliderValue: v
} });
);
}, },
render() { render() {

View File

@ -9,7 +9,7 @@
````jsx ````jsx
import { Slider, InputNumber } from 'antd'; import { Slider, InputNumber } from 'antd';
const Test = React.createClass({ const IntegerStep = React.createClass({
getInitialState() { getInitialState() {
return { return {
inputValue: 1 inputValue: 1
@ -35,5 +35,34 @@ const Test = React.createClass({
} }
}); });
ReactDOM.render(<Test />, document.getElementById('components-slider-demo-input-number')); const DecimalStep = React.createClass({
getInitialState() {
return {
inputValue: 0
};
},
onChange(value) {
this.setState({
inputValue: value
});
},
render() {
return (
<div className="row">
<div className="col-12">
<Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
</div>
<div className="col-4">
<InputNumber min={0} max={1} style={{marginLeft: '16px'}} step={0.01}
value={this.state.inputValue} onChange={this.onChange} />
</div>
</div>
);
}
});
ReactDOM.render(<div>
<IntegerStep />
<DecimalStep />
</div>, document.getElementById('components-slider-demo-input-number'));
```` ````

View File

@ -0,0 +1,18 @@
# 格式化 `Tooltip` 内容
- order: 5
使用 `tipFormatter` 可以格式化 `Tooltip` 的内容。
---
````jsx
import { Slider } from 'antd';
function formatter(value) {
return '$' + value;
}
ReactDOM.render(<Slider tipFormatter={formatter} />
, document.getElementById('components-slider-demo-tip-formatter'));
````

View File

@ -25,3 +25,4 @@
| included | Boolean | true | `marks` 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列 | included | Boolean | true | `marks` 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列
| disabled | Boolean | false | 值为 `true` 时,滑块为禁用状态 | disabled | Boolean | false | 值为 `true` 时,滑块为禁用状态
| onChange | Function | NOOP | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。 | onChange | Function | NOOP | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。
| tipFormatter | Function | | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值。

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { classSet } from 'rc-util'; import classNames from 'classnames';
import { isCssAnimationSupported } from 'css-animation'; import { isCssAnimationSupported } from 'css-animation';
const AntSpin = React.createClass({ const AntSpin = React.createClass({
@ -23,7 +23,7 @@ const AntSpin = React.createClass({
render() { render() {
const { className, size, prefixCls } = this.props; const { className, size, prefixCls } = this.props;
let spinClassName = classSet({ let spinClassName = classNames({
[prefixCls]: true, [prefixCls]: true,
[`${prefixCls}-${size}`]: size, [`${prefixCls}-${size}`]: size,
[className]: !!className, [className]: !!className,

View File

@ -12,8 +12,8 @@ const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-icon'); const container = document.getElementById('components-steps-demo-icon');
ReactDOM.render(<Steps> ReactDOM.render(<Steps>
<Step status='finish' title='步骤1' icon='cloud' /> <Step status="finish" title="步骤1" icon="cloud" />
<Step status='process' title='步骤2' icon='apple' /> <Step status="process" title="步骤2" icon="apple" />
<Step status='wait' title='步骤3' icon='github' /> <Step status="wait" title="步骤3" icon="github" />
</Steps>, container); </Steps>, container);
```` ````

View File

@ -27,7 +27,7 @@ const App = React.createClass({
getInitialState() { getInitialState() {
return { return {
currentStep: Math.floor(Math.random() * steps.length) currentStep: Math.floor(Math.random() * steps.length)
} };
}, },
next() { next() {
let s = this.state.currentStep + 1; let s = this.state.currentStep + 1;

View File

@ -7,7 +7,7 @@
--- ---
````jsx ````jsx
import { Steps, Button } from 'antd'; import { Steps } from 'antd';
const Step = Steps.Step; const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical-small'); const container = document.getElementById('components-steps-demo-vertical-small');

View File

@ -7,7 +7,7 @@
--- ---
````jsx ````jsx
import { Steps, Button } from 'antd'; import { Steps } from 'antd';
const Step = Steps.Step; const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical'); const container = document.getElementById('components-steps-demo-vertical');

View File

@ -14,7 +14,7 @@ const Test = React.createClass({
getInitialState() { getInitialState() {
return { return {
disabled: true disabled: true
} };
}, },
toggle(){ toggle(){
this.setState({ this.setState({

View File

@ -31,7 +31,7 @@ const columns = [{
}]; }];
const dataSource = new Table.DataSource({ const dataSource = new Table.DataSource({
url: "/components/table/demo/data.json", url: '/components/table/demo/data.json',
resolve: function(result) { resolve: function(result) {
return result.data; return result.data;
}, },
@ -41,7 +41,7 @@ const dataSource = new Table.DataSource({
return { return {
total: result.totalCount, total: result.totalCount,
pageSize: result.pageSize pageSize: result.pageSize
} };
}, },
// 和后台接口接收的参数进行适配 // 和后台接口接收的参数进行适配
// 参数里提供了分页、筛选、排序的信息 // 参数里提供了分页、筛选、排序的信息

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',
@ -26,11 +26,11 @@ const columns = [{
dataIndex: '', dataIndex: '',
render: function(text, record) { render: function(text, record) {
return <span> return <span>
<a href="javascript:;">操作一</a> <a href="#">操作一</a>
<span className="ant-divider"></span> <span className="ant-divider"></span>
<a href="javascript:;">操作二</a> <a href="#">操作二</a>
<span className="ant-divider"></span> <span className="ant-divider"></span>
<a href="javascript:;" className="ant-dropdown-link"> <a href="#" className="ant-dropdown-link">
更多 <Icon type="down" /> 更多 <Icon type="down" />
</a> </a>
</span>; </span>;

View File

@ -2,7 +2,7 @@
- order: 10 - order: 10
添加表格边框线,`bordered={true}`。 添加表格边框线,`bordered`。
--- ---
@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '资产', title: '资产',
@ -41,7 +41,7 @@ const data = [{
address: '西湖区湖底公园1号' address: '西湖区湖底公园1号'
}]; }];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} /> ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, document.getElementById('components-table-demo-bordered')); , document.getElementById('components-table-demo-bordered'));
```` ````

View File

@ -17,7 +17,7 @@ const renderContent = function(value, row, index) {
let obj = { let obj = {
children: value, children: value,
props: {} props: {}
} };
if (index === 4) { if (index === 4) {
obj.props.colSpan = 0; obj.props.colSpan = 0;
} }
@ -29,14 +29,14 @@ const columns = [{
dataIndex: 'name', dataIndex: 'name',
render: function(text, row, index) { render: function(text, row, index) {
if (index < 4) { if (index < 4) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} else { } else {
return { return {
children: <a href="javascript:;">{text}</a>, children: <a href="#">{text}</a>,
props: { props: {
colSpan: 5 colSpan: 5
} }
} };
} }
} }
}, { }, {
@ -51,7 +51,7 @@ const columns = [{
let obj = { let obj = {
children: value, children: value,
props:{} props:{}
} };
// 第三列的第三行行合并 // 第三列的第三行行合并
if (index === 2) { if (index === 2) {
obj.props.rowSpan = 2; obj.props.rowSpan = 2;
@ -113,8 +113,8 @@ const data = [{
tel: '0575-22098909', tel: '0575-22098909',
phone: 18900010002, phone: 18900010002,
address: '西湖区湖底公园1号' address: '西湖区湖底公园1号'
}]; }];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} /> ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, document.getElementById('components-table-demo-colspan-rowspan')); , document.getElementById('components-table-demo-colspan-rowspan'));
```` ````

View File

@ -10,7 +10,7 @@
import { Table } from 'antd'; import { Table } from 'antd';
function renderAction() { function renderAction() {
return <a href="javascript:;">删除</a>; return <a href="#">删除</a>;
} }
function expandedRowRender(record) { function expandedRowRender(record) {

View File

@ -53,7 +53,7 @@ const App = React.createClass({
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button> <Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>; </div>;
} }
}) });
ReactDOM.render(<App />, document.getElementById('components-table-demo-loading')); ReactDOM.render(<App />, document.getElementById('components-table-demo-loading'));
```` ````

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',
@ -79,9 +79,8 @@ const App = React.createClass({
<Button onClick={this.handleClick2}>加载本地数据2</Button> <Button onClick={this.handleClick2}>加载本地数据2</Button>
</div>; </div>;
} }
}) });
ReactDOM.render(<App /> ReactDOM.render(<App />
, document.getElementById('components-table-demo-local-data')); , document.getElementById('components-table-demo-local-data'));
```` ````

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',
@ -24,7 +24,7 @@ const columns = [{
}]; }];
const data = []; const data = [];
for (let i=0; i<46; i++) { for (let i = 0; i < 46; i++) {
data.push({ data.push({
key: i, key: i,
name: '李大嘴' + i, name: '李大嘴' + i,

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
render: function(text) { render: function(text) {
return <a href="javascript:;">{text}</a>; return <a href="#">{text}</a>;
} }
}, { }, {
title: '年龄', title: '年龄',

View File

@ -40,6 +40,8 @@ var dataSource = [{
**远程数据模式**是更常见的业务场景,是一次只从服务端读取一页的数据放在前端,执行筛选、排序、切换页码等操作时均向后台发送请求,后台返回当页的数据和相关分页信息。 **远程数据模式**是更常见的业务场景,是一次只从服务端读取一页的数据放在前端,执行筛选、排序、切换页码等操作时均向后台发送请求,后台返回当页的数据和相关分页信息。
> 远程数据模式后续可能删除,目前不推荐使用。
通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。 通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。
```jsx ```jsx

View File

@ -37,7 +37,7 @@ const Test = React.createClass({
activeKey: index.toString() activeKey: index.toString()
}; };
}, },
remove(index, e) { remove(targetIndex, e) {
e.stopPropagation(); e.stopPropagation();
let tabs = this.state.tabs; let tabs = this.state.tabs;
let activeKey = this.state.activeKey; let activeKey = this.state.activeKey;
@ -49,15 +49,15 @@ const Test = React.createClass({
} }
const newTabs = tabs.filter(tab => { const newTabs = tabs.filter(tab => {
if (tab.index !== index) { if (tab.index !== targetIndex) {
return true; return true;
} else { } else {
foundIndex = index; foundIndex = targetIndex;
return false; return false;
} }
}); });
if (activeKey === index) { if (activeKey === targetIndex) {
activeKey = tabs[foundIndex - 1].index; activeKey = tabs[foundIndex - 1].index;
} }
@ -101,7 +101,7 @@ const Test = React.createClass({
</Tabs> </Tabs>
); );
} }
}) });
ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add')); ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));
```` ````

View File

@ -15,7 +15,7 @@ function callback(key) {}
ReactDOM.render( ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}> <Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="选项卡一" key="1">选项卡一</TabPane> <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
<TabPane tab="选项卡二" disabled={true} key="2">选项卡二</TabPane> <TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三</TabPane> <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-disabled')); , document.getElementById('components-tabs-demo-disabled'));

View File

@ -10,7 +10,7 @@
import { Tabs, Icon } from 'antd'; import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
var tabContent = [ const tabContent = [
<span><Icon type="apple" />选项卡一</span>, <span><Icon type="apple" />选项卡一</span>,
<span><Icon type="android" />选项卡二</span>, <span><Icon type="android" />选项卡二</span>,
<span><Icon type="lock" />选项卡三</span>, <span><Icon type="lock" />选项卡三</span>,

View File

@ -11,7 +11,7 @@ import { Timeline } from 'antd';
const container = document.getElementById('components-timeline-demo-pending'); const container = document.getElementById('components-timeline-demo-pending');
ReactDOM.render( ReactDOM.render(
<Timeline pending={true}> <Timeline pending>
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item> <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item> <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item> <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>

View File

@ -12,7 +12,7 @@ const AntTimepicker = React.createClass({
onChange() {}, onChange() {},
locale: {}, locale: {},
align: { align: {
offset: [0, -1], offset: [0, -2],
}, },
open: false, open: false,
disabled: false, disabled: false,

View File

@ -17,7 +17,7 @@ API
--- ---
```html ```html
<Timepicker value="13:30:56" /> <Timepicker defaultValue="13:30:56" />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
@ -30,8 +30,5 @@ API
| hourOptions | 特定可选择的小时 | array | 0 到 24 组成的数组 | | hourOptions | 特定可选择的小时 | array | 0 到 24 组成的数组 |
| minuteOptions | 特定可选择的分钟 | array | 0 到 60 组成的数组 | | minuteOptions | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
| secondOptions | 特定可选择的秒 | array | 0 到 60 组成的数组 | | secondOptions | 特定可选择的秒 | array | 0 到 60 组成的数组 |
| inputClassName | 输入框的样式 | string | |
| placement | 显示位置 | string | bottomLeft |
| transitionName | 显示动画 | string | slide-up |
<style> .code-box-demo .ant-timepicker-picker { margin: 0 12px 12px 0; }</style> <style>.code-box-demo .ant-timepicker { margin: 0 8px 12px 0; }</style>

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