mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
f8257d2756
@ -9,15 +9,15 @@ class Form extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { prefixCls, className } = this.props;
|
const { prefixCls, className, style } = this.props;
|
||||||
const formClassName = classNames({
|
const formClassName = classNames({
|
||||||
[className]: !!className,
|
|
||||||
[`${prefixCls}-horizontal`]: this.props.horizontal,
|
[`${prefixCls}-horizontal`]: this.props.horizontal,
|
||||||
[`${prefixCls}-inline`]: this.props.inline,
|
[`${prefixCls}-inline`]: this.props.inline,
|
||||||
|
[className]: !!className,
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form {...this.props} className={formClassName}>
|
<form {...this.props} className={formClassName} style={style}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
@ -151,6 +151,7 @@ class FormItem extends React.Component {
|
|||||||
renderFormItem(children) {
|
renderFormItem(children) {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
const prefixCls = props.prefixCls;
|
const prefixCls = props.prefixCls;
|
||||||
|
const style = props.style;
|
||||||
const itemClassName = {
|
const itemClassName = {
|
||||||
[`${prefixCls}-item`]: true,
|
[`${prefixCls}-item`]: true,
|
||||||
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
|
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
|
||||||
@ -158,7 +159,7 @@ class FormItem extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(itemClassName)}>
|
<div className={classNames(itemClassName)} style={style}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -12,8 +12,8 @@ export default React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
const { className, size, ...other } = this.props;
|
const { className, size, ...other } = this.props;
|
||||||
const inputNumberClass = classNames({
|
const inputNumberClass = classNames({
|
||||||
'ant-input-number-lg': size === 'large',
|
[`${this.props.prefixCls}-lg`]: size === 'large',
|
||||||
'ant-input-number-sm': size === 'small',
|
[`${this.props.prefixCls}-sm`]: size === 'small',
|
||||||
[className]: !!className,
|
[className]: !!className,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -7,7 +7,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { QueueAnim, Button, Checkbox, Radio } from 'antd';
|
import { QueueAnim, Button, Radio, Input, Form, Row, Col } from 'antd';
|
||||||
|
const FormItem = Form.Item;
|
||||||
const RadioGroup = Radio.Group;
|
const RadioGroup = Radio.Group;
|
||||||
|
|
||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
@ -22,54 +23,37 @@ const Test = React.createClass({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
|
const formItemLayout = {
|
||||||
|
labelCol: { span: 6 },
|
||||||
|
wrapperCol: { span: 14 },
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<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>
|
<QueueAnim component={Form} className="ant-form ant-form-horizontal" type="bottom" leaveReverse>
|
||||||
{this.state.show ? [
|
{this.state.show ? [
|
||||||
<div className="ant-form-item ant-form-item-compact" key="name">
|
<FormItem key="item1" {...formItemLayout} label="用户名:">
|
||||||
<label htmlFor="userName" className="col-6" required>用户名:</label>
|
<p className="ant-form-text">大眼萌 minion</p>
|
||||||
<div className="col-6">
|
</FormItem>,
|
||||||
<p className="ant-form-text">大眼萌 minion</p>
|
<FormItem key="item2" {...formItemLayout} label="密码:">
|
||||||
</div>
|
<Input type="password" placeholder="请输入密码" />
|
||||||
</div>,
|
</FormItem>,
|
||||||
<div className="ant-form-item" key="password">
|
<FormItem key="item3" {...formItemLayout} label="您的性别:">
|
||||||
<label htmlFor="password" className="col-6" required>密码:</label>
|
<RadioGroup>
|
||||||
<div className="col-14">
|
<Radio value="male">男的</Radio>
|
||||||
<input className="ant-input" type="password" id="password" placeholder="请输入密码" />
|
<Radio value="female">女的</Radio>
|
||||||
</div>
|
</RadioGroup>
|
||||||
</div>,
|
</FormItem>,
|
||||||
<div className="ant-form-item ant-form-item-compact" key="sex">
|
<FormItem key="item4" {...formItemLayout} label="备注:">
|
||||||
<label className="col-6" required>您的性别:</label>
|
<Input type="textarea" placeholder="随便写" />
|
||||||
<div className="col-14">
|
</FormItem>,
|
||||||
<RadioGroup value="male">
|
<Row key="submit">
|
||||||
<Radio value="male">男的</Radio>
|
<Col span="16" offset="6">
|
||||||
<Radio value="female">女的</Radio>
|
<Button type="primary" htmlType="submit">确定</Button>
|
||||||
</RadioGroup>
|
</Col>
|
||||||
</div>
|
</Row>,
|
||||||
</div>,
|
|
||||||
<div className="ant-form-item" key="remark">
|
|
||||||
<label htmlFor="remark" className="col-6" required>备注:</label>
|
|
||||||
<div className="col-14">
|
|
||||||
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
|
|
||||||
<p className="ant-form-explain">随便写点什么</p>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
<div className="ant-form-item ant-form-item-compact" key="checkbox">
|
|
||||||
<div className="col-14 col-offset-6">
|
|
||||||
<label>
|
|
||||||
<Checkbox />
|
|
||||||
同意
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
<div className="row" key="btn">
|
|
||||||
<div className="col-16 col-offset-6">
|
|
||||||
<Button type="primary">确定</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
] : null}
|
] : null}
|
||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
import { QueueAnim } from 'antd';
|
import { QueueAnim } from 'antd';
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<QueueAnim delay={500}>
|
<QueueAnim delay={500} style={{ height: 150 }}>
|
||||||
<div key="a">依次进场</div>
|
<div key="a">依次进场</div>
|
||||||
<div key="b">依次进场</div>
|
<div key="b">依次进场</div>
|
||||||
<div key="c">依次进场</div>
|
<div key="c">依次进场</div>
|
||||||
|
@ -35,7 +35,6 @@ for (let i = 0; i < 46; i++) {
|
|||||||
|
|
||||||
const pagination = {
|
const pagination = {
|
||||||
total: data.length,
|
total: data.length,
|
||||||
current: 1,
|
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
onShowSizeChange(current, pageSize) {
|
onShowSizeChange(current, pageSize) {
|
||||||
console.log('Current: ', current, '; PageSize: ', pageSize);
|
console.log('Current: ', current, '; PageSize: ', pageSize);
|
||||||
|
@ -264,6 +264,7 @@ let AntTable = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handlePageChange(current) {
|
handlePageChange(current) {
|
||||||
|
const props = this.props;
|
||||||
let pagination = objectAssign({}, this.state.pagination);
|
let pagination = objectAssign({}, this.state.pagination);
|
||||||
if (current) {
|
if (current) {
|
||||||
pagination.current = current;
|
pagination.current = current;
|
||||||
@ -274,10 +275,22 @@ let AntTable = React.createClass({
|
|||||||
|
|
||||||
const newState = {
|
const newState = {
|
||||||
selectionDirty: false,
|
selectionDirty: false,
|
||||||
pagination
|
pagination,
|
||||||
};
|
};
|
||||||
|
// Controlled current prop will not respond user interaction
|
||||||
|
if (props.pagination && 'current' in props.pagination) {
|
||||||
|
newState.pagination = {
|
||||||
|
...pagination,
|
||||||
|
current: this.state.pagination.current,
|
||||||
|
};
|
||||||
|
}
|
||||||
this.setState(newState);
|
this.setState(newState);
|
||||||
this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
|
|
||||||
|
this.props.onChange(...this.prepareParamsArguments({
|
||||||
|
...this.state,
|
||||||
|
selectionDirty: false,
|
||||||
|
pagination,
|
||||||
|
}));
|
||||||
},
|
},
|
||||||
|
|
||||||
onRadioChange(ev) {
|
onRadioChange(ev) {
|
||||||
|
@ -7,25 +7,29 @@
|
|||||||
|
|
||||||
Ant Design 提供了一些预设的组件动画样式。
|
Ant Design 提供了一些预设的组件动画样式。
|
||||||
|
|
||||||
|
可以使用 [rc-animate](https://github.com/react-component/animate) 的 [transitionName](http://react-component.github.io/animate/examples/simple.html) 属性来给任意元素指定动画。
|
||||||
|
|
||||||
|
> 示例延长了动画时长以便展示。
|
||||||
|
|
||||||
<div id="components-motion-demo-basic"></div>
|
<div id="components-motion-demo-basic"></div>
|
||||||
|
|
||||||
通过设置组件的 `transitionName` 指定组件动画。
|
|
||||||
|
|
||||||
| 组件 | 中文名 | 采用动画 |
|
| 组件 | 中文名 | 采用动画 |
|
||||||
|--------------|---------------------|-------------------------------------------------|
|
|--------------|--------------------|-------------------------------------------------|
|
||||||
| popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
| Popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||||
| popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
| Popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||||
| tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
| Tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||||
| modal | 弹出框 | `zoom` |
|
| Modal | 弹出框 | `zoom` |
|
||||||
| confirm | 弹出确认框 | `zoom` |
|
| Badge | 徽标数 | `zoom` |
|
||||||
| message | 信息提示条 | `move-up` |
|
| message | 信息提示条 | `move-up` |
|
||||||
| notification | 通知框 | `move-right` & `slide-up` |
|
| notification | 通知框 | `move-right` & `slide-up` |
|
||||||
| dropdown | 下拉菜单 | `slide-up` |
|
| Dropdown | 下拉菜单 | `slide-up` |
|
||||||
| select | 选择框 | `slide-up` |
|
| Select | 选择框 | `slide-up` |
|
||||||
| datepicker | 日期选择框 | `slide-up` |
|
| Cascader | 级联选择框 | `slide-up` |
|
||||||
| alert | 警告提示 | `slide-up` |
|
| TreeSelect | 树选择框 | `slide-up` |
|
||||||
| menu | 导航菜单 | `slide-up` |
|
| DatePicker | 日期选择框 | `slide-up` |
|
||||||
| datepicker | 日期选择框 | `slide-up` |
|
| TatePicker | 日期选择框 | `slide-up` |
|
||||||
|
| Alert | 警告提示 | `slide-up` |
|
||||||
|
| Menu | 导航菜单 | `slide-up` |
|
||||||
|
|
||||||
|
|
||||||
`````jsx
|
`````jsx
|
||||||
@ -34,7 +38,6 @@ var Select = antd.Select;
|
|||||||
var Option = Select.Option;
|
var Option = Select.Option;
|
||||||
var OptGroup = Select.OptGroup;
|
var OptGroup = Select.OptGroup;
|
||||||
|
|
||||||
|
|
||||||
var motions = [];
|
var motions = [];
|
||||||
motions = motions.concat([[{
|
motions = motions.concat([[{
|
||||||
name: '淡入',
|
name: '淡入',
|
||||||
@ -186,15 +189,15 @@ motions = motions.concat([[{
|
|||||||
direction: 'enter',
|
direction: 'enter',
|
||||||
type: '其他'
|
type: '其他'
|
||||||
}]]);
|
}]]);
|
||||||
var leave='-leave';
|
var leave = '-leave';
|
||||||
var Test = React.createClass({
|
var Test = React.createClass({
|
||||||
handleChange(e) {
|
handleChange(e) {
|
||||||
var value = e;
|
var value = e;
|
||||||
if(value){
|
if (value) {
|
||||||
this.demoNode.style.visibility='';
|
this.demoNode.style.visibility = '';
|
||||||
cssAnimation(this.demoNode, value, () => {
|
cssAnimation(this.demoNode, value, () => {
|
||||||
if(value.slice(-leave.length)===leave){
|
if (value.slice(-leave.length) === leave) {
|
||||||
this.demoNode.style.visibility='hidden';
|
this.demoNode.style.visibility = 'hidden';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -218,7 +221,6 @@ var Test = React.createClass({
|
|||||||
<div className="motion-select-wrapper">
|
<div className="motion-select-wrapper">
|
||||||
<Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
|
<Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -227,6 +229,11 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
|
|||||||
`````
|
`````
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#components-motion-demo-basic {
|
||||||
|
margin: 40px 0;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
.motion-container {
|
.motion-container {
|
||||||
height: 190px;
|
height: 190px;
|
||||||
line-height: 190px;
|
line-height: 190px;
|
||||||
@ -243,6 +250,7 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
|
|||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
animation-duration: 0.5s!important;
|
||||||
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
|
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
|
||||||
}
|
}
|
||||||
.motion-select-wrapper{
|
.motion-select-wrapper{
|
||||||
|
@ -58,7 +58,11 @@ module.exports = {
|
|||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
|
||||||
postcss: [autoprefixer],
|
postcss: [
|
||||||
|
autoprefixer({
|
||||||
|
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8']
|
||||||
|
})
|
||||||
|
],
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExtractTextPlugin('[name].css'),
|
new ExtractTextPlugin('[name].css'),
|
||||||
|
Loading…
Reference in New Issue
Block a user