From c25d3b2e14fe0f1194ce8e7a8a61f7517867790b Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 29 Jul 2015 10:32:01 +0800 Subject: [PATCH 01/35] update form validation style --- style/components/form.less | 39 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/style/components/form.less b/style/components/form.less index 36e64e8fa..ddbd2c179 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -260,15 +260,54 @@ form { } // Validation state +.has-success, .has-warning, .has-error, .is-validating { + &.has-feedback:after { + position: absolute; + bottom: 0; + right: 0; + font-family: "anticon" !important; + width: 32px; + height: 32px; + line-height: 32px; + text-align: center; + font-size: 14px; + } +} + .has-success { .form-control-validation(@success-color; @input-hover-border-color;); .@{css-prefix}input { border-color: @input-border-color; } + + &.has-feedback:after { + content: '\e614'; + color: @success-color; + } } + .has-warning { .form-control-validation(@warning-color; @warning-color;); + + &.has-feedback:after { + content: '\e628'; + color: @warning-color; + } } + .has-error { .form-control-validation(@error-color; @error-color;); + + &.has-feedback:after { + content: '\e628'; + color: @error-color; + } +} + +.is-validating { + &.has-feedback:after { + display: inline-block; + .animation(loadingCircle 1s infinite linear); + content:"\e610"; + } } From 7653aab6bcf04228b09186b4c79dd0b9b5cbda54 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 29 Jul 2015 10:32:21 +0800 Subject: [PATCH 02/35] update form demo --- components/form/demo/validate.md | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md index 26d760a7a..98ac20e4c 100644 --- a/components/form/demo/validate.md +++ b/components/form/demo/validate.md @@ -39,41 +39,37 @@
-
+
- +
信息审核中...
-
信息审核中...
-
+
-
+
-
-
+
-
+
- +
请输入数字和字母组合
-
请输入数字和字母组合
-
+
-
+
-
From d97da23e3a8143849182730e85632a9d821531d0 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 29 Jul 2015 10:32:55 +0800 Subject: [PATCH 03/35] add form-validation demo --- components/validation/demo/basic.md | 153 ++++++++++++++++++++++++++++ components/validation/index.jsx | 3 + components/validation/index.md | 21 ++++ index.js | 3 +- package.json | 1 + 5 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 components/validation/demo/basic.md create mode 100644 components/validation/index.jsx create mode 100644 components/validation/index.md diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md new file mode 100644 index 000000000..dd2e66d98 --- /dev/null +++ b/components/validation/demo/basic.md @@ -0,0 +1,153 @@ +# 基本 + +- order: 0 + +表单校验实例 + +--- + +````jsx +var Validation = antd.Validation; +var Validator = Validation.Validator; + +function toNumber(v) { + var num = Number(v); + // num === ' ' + if (!isNaN(num)) { + num = parseInt(v); + } + return isNaN(num) ? v : num; +} + +function cx(classNames) { + if (typeof classNames === 'object') { + return Object.keys(classNames).filter(function(className) { + return classNames[className]; + }).join(' '); + } else { + return Array.prototype.join.call(arguments, ' '); + } +} + +var Form = React.createClass({ + mixins: [Validation.FieldMixin], + + getInitialState() { + return { + status: { + number: {}, + pass: {}, + pass2: {}, + blurNumber: {}, + optionalNumber: {}, + name: {}, + must: {} + }, + formData: { + number: 0, + pass: undefined, + pass2: undefined, + blurNumber: undefined, + optionalNumber: undefined, + name: undefined, + must: undefined + } + }; + }, + + handleReset(e) { + this.refs.validation.reset(); + this.setState(this.getInitialState()); + e.preventDefault(); + }, + + handleSubmit(e) { + e.preventDefault(); + var validation = this.refs.validation; + validation.validate((valid) => { + if (!valid) { + console.log('error in form'); + return; + } else { + console.log('submit'); + } + console.log(this.state.formData); + }); + }, + + userExists(rule, value, callback) { + + if (!value) { + callback(); + } else { + setTimeout(function () { + if (value === '1') { + callback([new Error('are you kidding?')]); + } else if (value === 'yiminghe') { + callback([new Error('forbid yiminghe')]); + } else { + callback(); + } + }, 1000); + } + }, + + checkPass(rule, value, callback) { + if (this.state.formData.pass2) { + this.refs.validation.forceValidate(['pass2']); + } + callback(); + }, + + checkPass2(rule, value, callback) { + if (value !== this.state.formData.pass) { + callback('two password are not same!'); + } else { + callback(); + } + }, + + render() { + var formData = this.state.formData; + var status = this.state.status; + + var nameClasses = cx({ + 'has-feedback': true, + 'has-error': status.name.errors, + 'is-validating': status.name.isValidating, + 'has-success': formData.name && !status.name.errors && !status.name.isValidating + }); + + return ( +
+ +
+ +
+
+ + + + {status.name.isValidating ?
信息审核中...
: null} + {status.name.errors ?
{status.name.errors.join(',')}
: null} +
+
+
+ +
+
+ +     + 重 置 +
+
+ +
+ ); + } +}); + +React.render( +
+, document.getElementById('components-validation-demo-basic')); +```` diff --git a/components/validation/index.jsx b/components/validation/index.jsx new file mode 100644 index 000000000..00589d928 --- /dev/null +++ b/components/validation/index.jsx @@ -0,0 +1,3 @@ +import Validation from 'rc-form-validation'; + +export default Validation; diff --git a/components/validation/index.md b/components/validation/index.md new file mode 100644 index 000000000..b1d89a6f9 --- /dev/null +++ b/components/validation/index.md @@ -0,0 +1,21 @@ +# Validation + +- category: Components +- chinese: 表单校验 +- order: 19 + +--- + +表单校验。 + +## 何时使用 + +需要对表单域进行校验时。 + +## API + +属性如下 + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| + diff --git a/index.js b/index.js index 78dad6240..28a70941f 100644 --- a/index.js +++ b/index.js @@ -23,7 +23,8 @@ var antd = { message: require('./components/message'), Slider: require('./components/slider'), Radio: require('./components/radio'), - RadioGroup: require('./components/radio/group') + RadioGroup: require('./components/radio/group'), + Validation: require('./components/validation') }; module.exports = antd; diff --git a/package.json b/package.json index 88e44618c..cbc2a2aaa 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "rc-collapse": "~1.2.3", "rc-dialog": "~4.4.0", "rc-dropdown": "~1.1.1", + "rc-form-validation": "^2.4.7", "rc-input-number": "~2.0.1", "rc-menu": "~3.4.2", "rc-notification": "~1.0.1", From 9718bc9de7558ee256dbce95a8bd94c900705168 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 29 Jul 2015 19:14:44 +0800 Subject: [PATCH 04/35] update form validate stylr --- style/components/form.less | 22 ++++++++++++++++++++++ style/mixins/form.less | 6 ++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/style/components/form.less b/style/components/form.less index ddbd2c179..5ca117e76 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -278,6 +278,7 @@ form { .form-control-validation(@success-color; @input-hover-border-color;); .@{css-prefix}input { border-color: @input-border-color; + box-shadow: none; } &.has-feedback:after { @@ -293,6 +294,16 @@ form { content: '\e628'; color: @warning-color; } + + .@{selectPrefixCls} { + &-selection { + border-color: @warning-color; + box-shadow: 0 0 0 2px tint(@warning-color, 80%); + } + &-arrow { + color: @warning-color; + } + } } .has-error { @@ -302,6 +313,17 @@ form { content: '\e628'; color: @error-color; } + + .@{selectPrefixCls} { + &-selection { + border-color: @error-color; + box-shadow: 0 0 0 2px tint(@error-color, 80%); + } + + &-arrow { + color: @error-color; + } + } } .is-validating { diff --git a/style/mixins/form.less b/style/mixins/form.less index bf9ffddad..edd5b36c9 100644 --- a/style/mixins/form.less +++ b/style/mixins/form.less @@ -5,10 +5,8 @@ // 输入框的不同校验状态 .@{css-prefix}input { border-color: @border-color; - &:focus { - border-color: @border-color; - box-shadow: 0 0 0 2px tint(@border-color, 80%); - } + box-shadow: 0 0 0 2px tint(@border-color, 80%); + &:not([disabled]):hover { border-color: @border-color; } From 9cda1103e875e1de02c6264d56c34df5c832d5a7 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 29 Jul 2015 19:14:59 +0800 Subject: [PATCH 05/35] update demo --- components/validation/demo/basic.md | 118 ++++++++++++++++++---------- 1 file changed, 75 insertions(+), 43 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index dd2e66d98..e2e0c27c4 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -9,6 +9,8 @@ ````jsx var Validation = antd.Validation; var Validator = Validation.Validator; +var Select = antd.Select; +var Option = Select.Option; function toNumber(v) { var num = Number(v); @@ -29,32 +31,45 @@ function cx(classNames) { } } + var Form = React.createClass({ mixins: [Validation.FieldMixin], getInitialState() { return { status: { - number: {}, - pass: {}, - pass2: {}, - blurNumber: {}, - optionalNumber: {}, + must: {}, + email: {}, name: {}, - must: {} + select: {}, + startDate: {}, + endDate: {} }, formData: { - number: 0, - pass: undefined, - pass2: undefined, - blurNumber: undefined, - optionalNumber: undefined, + must: undefined, + email: undefined, name: undefined, - must: undefined + select: undefined, + startDate: undefined, + endDate: undefined } }; }, + validateStyle(item, hasFeedback=true) { + var formData = this.state.formData; + var status = this.state.status; + + var classes = cx({ + 'has-feedback': hasFeedback, + 'has-error': status[item].errors, + 'is-validating': status[item].isValidating, + 'has-success': formData[item] && !status[item].errors && !status[item].isValidating + }); + + return classes; + }, + handleReset(e) { this.refs.validation.reset(); this.setState(this.getInitialState()); @@ -76,15 +91,12 @@ var Form = React.createClass({ }, userExists(rule, value, callback) { - if (!value) { callback(); } else { setTimeout(function () { - if (value === '1') { - callback([new Error('are you kidding?')]); - } else if (value === 'yiminghe') { - callback([new Error('forbid yiminghe')]); + if (value === 'yiminghe') { + callback([new Error('抱歉，该用户名已被占用。')]); } else { callback(); } @@ -92,48 +104,68 @@ var Form = React.createClass({ } }, - checkPass(rule, value, callback) { - if (this.state.formData.pass2) { - this.refs.validation.forceValidate(['pass2']); - } - callback(); - }, - - checkPass2(rule, value, callback) { - if (value !== this.state.formData.pass) { - callback('two password are not same!'); - } else { - callback(); - } - }, - render() { var formData = this.state.formData; var status = this.state.status; - - var nameClasses = cx({ - 'has-feedback': true, - 'has-error': status.name.errors, - 'is-validating': status.name.isValidating, - 'has-success': formData.name && !status.name.errors && !status.name.isValidating - }); return ( +
+ +
+
+ + + + {status.must.errors ?
{status.must.errors.join(',')}
: null} +
+
+
+ +
+ +
+
+ + + + {status.email.isValidating ?
正在校验中...
: null} + {status.email.errors ?
{status.email.errors.join(',')}
: null} +
+
+
+
-
- - +
+ + - {status.name.isValidating ?
信息审核中...
: null} + {status.name.isValidating ?
正在校验中...
: null} {status.name.errors ?
{status.name.errors.join(',')}
: null}
+
+ +
+
+ + + + {status.select.errors ?
{status.select.errors.join(',')}
: null} +
+
+
+
From d6e0678fba04c3816f0373f968f9daad4a172182 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 30 Jul 2015 20:24:43 +0800 Subject: [PATCH 06/35] update validation basic demo --- components/validation/demo/basic.md | 199 ++++++++++++++++++---------- 1 file changed, 126 insertions(+), 73 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index e2e0c27c4..ee7621f0d 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -2,7 +2,9 @@ - order: 0 -表单校验实例 +表单校验。 + +为每一个 Validator 定义 rules 以及 validator，rules 对应 Validation 提供的原生校验规则（通过定义 rules 中的 message 属性可以自定义错误信息的提示，详见 [async-validator](https://github.com/yiminghe/async-validator)），而 validator 为用户提供自定义的校验规则， --- @@ -11,15 +13,8 @@ var Validation = antd.Validation; var Validator = Validation.Validator; var Select = antd.Select; var Option = Select.Option; - -function toNumber(v) { - var num = Number(v); - // num === ' ' - if (!isNaN(num)) { - num = parseInt(v); - } - return isNaN(num) ? v : num; -} +var Radio = antd.Radio; +var RadioGroup = antd.RadioGroup; function cx(classNames) { if (typeof classNames === 'object') { @@ -31,27 +26,28 @@ function cx(classNames) { } } - var Form = React.createClass({ mixins: [Validation.FieldMixin], getInitialState() { return { status: { - must: {}, email: {}, name: {}, select: {}, - startDate: {}, - endDate: {} + radio: {}, + passwd: {}, + rePasswd: {}, + textarea: {} }, formData: { - must: undefined, email: undefined, name: undefined, select: undefined, - startDate: undefined, - endDate: undefined + radio: undefined, + passwd: undefined, + rePasswd: undefined, + textarea: undefined } }; }, @@ -104,82 +100,139 @@ var Form = React.createClass({ } }, + checkPass(rule, value, callback) { + if (this.state.formData.passwd) { + this.refs.validation.forceValidate(['rePasswd']); + } + callback(); + }, + + checkPass2(rule, value, callback) { + if (value !== this.state.formData.passwd) { + callback('两次输入密码不一致！'); + } else { + callback(); + } + }, + render() { var formData = this.state.formData; var status = this.state.status; return ( - - -
- -
-
- - - - {status.must.errors ?
{status.must.errors.join(',')}
: null} + + +
+ +
+
+ + + + {status.name.isValidating ?
正在校验中...
: null} + {status.name.errors ?
{status.name.errors.join(',')}
: null} +
-
-
- -
-
- - - - {status.email.isValidating ?
正在校验中...
: null} - {status.email.errors ?
{status.email.errors.join(',')}
: null} +
+ +
+
+ + + + {status.email.errors ?
{status.email.errors.join(',')}
: null} +
-
-
- -
-
- - - - {status.name.isValidating ?
正在校验中...
: null} - {status.name.errors ?
{status.name.errors.join(',')}
: null} +
+ +
+
+ + + + {status.select.errors ?
{status.select.errors.join(',')}
: null} +
+
+
+ +
+ +
+
+ + + 男 + 女 + + + {status.radio.errors ?
{status.radio.errors.join(',')}
: null} +
-
-
- -
-
- - - - {status.select.errors ?
{status.select.errors.join(',')}
: null} +
+ +
+
+ + + + {status.passwd.errors ?
{status.passwd.errors.join(',')}
: null} +
-
-
-
- -     - 重 置 +
+ +
+
+ + + + {status.rePasswd.errors ?
{status.rePasswd.errors.join(', ')}
: null} +
+
-
- - + + +
+ +
+
+ + + + {status.textarea.errors ?
{status.textarea.errors.join(',')}
: null} +
+
+
+ +
+
+ +     + 重 置 +
+
+ + ); } }); -React.render( -
-, document.getElementById('components-validation-demo-basic')); +React.render(, document.getElementById('components-validation-demo-basic')); ```` From d2d5efa7233f21a38688bc1a0a29da05982dd5c6 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Fri, 31 Jul 2015 10:24:56 +0800 Subject: [PATCH 07/35] update validate style --- style/components/form.less | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/style/components/form.less b/style/components/form.less index 5ca117e76..2c08df511 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -295,6 +295,7 @@ form { color: @warning-color; } + // ant-select .@{selectPrefixCls} { &-selection { border-color: @warning-color; @@ -304,6 +305,11 @@ form { color: @warning-color; } } + + // ant-datepicker + .@{prefixCalendarClass}-picker-icon:after { + color: @warning-color; + } } .has-error { @@ -313,7 +319,8 @@ form { content: '\e628'; color: @error-color; } - + + // ant-select .@{selectPrefixCls} { &-selection { border-color: @error-color; @@ -324,6 +331,11 @@ form { color: @error-color; } } + + // ant-datepicker + .@{prefixCalendarClass}-picker-icon:after { + color: @error-color; + } } .is-validating { From 4a2159800fd2b57b1a60578e61f22f8e24630789 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Fri, 31 Jul 2015 10:40:17 +0800 Subject: [PATCH 08/35] add password validation demo --- components/validation/demo/customize.md | 249 ++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 components/validation/demo/customize.md diff --git a/components/validation/demo/customize.md b/components/validation/demo/customize.md new file mode 100644 index 000000000..be71cf5ce --- /dev/null +++ b/components/validation/demo/customize.md @@ -0,0 +1,249 @@ +# 自定义校验规则 + +- order: 1 + +密码校验实例。 + +--- + +````jsx +var Validation = antd.Validation; +var Validator = Validation.Validator; + +function cx(classNames) { + if (typeof classNames === 'object') { + return Object.keys(classNames).filter(function(className) { + return classNames[className]; + }).join(' '); + } else { + return Array.prototype.join.call(arguments, ' '); + } +} + +var Form = React.createClass({ + mixins: [Validation.FieldMixin], + + getInitialState() { + return { + status: { + pass: {}, + rePass: {} + }, + formData: { + pass: undefined, + rePass: undefined + }, + passBarShow: false, // 是否显示密码强度提示条 + rePassBarShow: false, + passStrength: 'L', // 密码强度 + rePassStrength: 'L' + }; + }, + + handleSubmit(e) { + e.preventDefault(); + var validation = this.refs.validation; + validation.validate((valid) => { + if (!valid) { + console.log('error in form'); + return; + } else { + console.log('submit'); + } + console.log(this.state.formData); + }); + }, + + handleReset(e) { + this.refs.validation.reset(); + this.setState(this.getInitialState()); + e.preventDefault(); + }, + + renderValidateStyle(item, hasFeedback=true) { + var formData = this.state.formData; + var status = this.state.status; + + var classes = cx({ + 'has-feedback': hasFeedback, + 'has-error': status[item].errors, + 'is-validating': status[item].isValidating, + 'has-success': formData[item] && !status[item].errors && !status[item].isValidating + }); + + return classes; + }, + + getPassStrenth(value, type) { + if (value) { + var strength; + // 密码强度的校验规则自定义，这里只是做个简单的示例 + if (value.length < 6) { + strength = 'L'; + } else if (value.length <= 9) { + strength = 'M'; + } else { + strength = 'H'; + } + type === 'pass' ? this.setState({ passBarShow: true, passStrength: strength }) : this.setState({ rePassBarShow: true, rePassStrength: strength }); + } else { + type === 'pass' ? this.setState({ passBarShow: false }) : this.setState({ rePassBarShow: false }); + } + }, + + checkPass(rule, value, callback) { + this.getPassStrenth(value, 'pass'); + + if (this.state.formData.pass) { + this.refs.validation.forceValidate(['rePass']); + } + + callback(); + }, + + checkPass2(rule, value, callback) { + this.getPassStrenth(value, 'rePass'); + + if (value && value !== this.state.formData.pass) { + callback('两次输入密码不一致！'); + } else { + callback(); + } + }, + + renderPassStrengthBar(type) { + var strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength; + var classSet = cx({ + 'ant-pwd-strength': true, + 'ant-pwd-strength-low': strength === 'L', + 'ant-pwd-strength-medium': strength === 'M', + 'ant-pwd-strength-high': strength === 'H' + }); + var level = { + L: '低', + M: '中', + H: '高' + }; + + return ( +
+
    +
  • +
  • +
  • + + {level[strength]} + +
+
+ ); + }, + + render() { + var formData = this.state.formData; + var status = this.state.status; + + return ( + + + +
+ +
+
+ + + + {status.pass.errors ?
{status.pass.errors.join(',')}
: null} +
+
+
+ {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} +
+
+ +
+ +
+
+ + + + {status.rePass.errors ?
{status.rePass.errors.join(', ')}
: null} +
+
+
+ {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} +
+
+ +
+
+ +     + 重 置 +
+
+ + + ); + } +}); + +React.render(
, document.getElementById('components-validation-demo-customize')); +```` + + From ed43331251867ce46c8a6d346d2af6693082fdcd Mon Sep 17 00:00:00 2001 From: SimaQ Date: Fri, 31 Jul 2015 16:03:24 +0800 Subject: [PATCH 09/35] update instruction --- components/validation/demo/basic.md | 6 ++- components/validation/index.md | 59 +++++++++++++++++++++++++++-- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index ee7621f0d..271534b8d 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -2,9 +2,11 @@ - order: 0 -表单校验。 +基本的表单校验栗子。 -为每一个 Validator 定义 rules 以及 validator，rules 对应 Validation 提供的原生校验规则（通过定义 rules 中的 message 属性可以自定义错误信息的提示，详见 [async-validator](https://github.com/yiminghe/async-validator)），而 validator 为用户提供自定义的校验规则， +每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating` `errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 + +表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。 --- diff --git a/components/validation/index.md b/components/validation/index.md index b1d89a6f9..ee751d878 100644 --- a/components/validation/index.md +++ b/components/validation/index.md @@ -10,12 +10,63 @@ ## 何时使用 -需要对表单域进行校验时。 +同表单结合使用，对表单域进行校验。 ## API -属性如下 +```html + + + + + + +``` + + +### Validation + +| 属性 | 类型 | 说明 | +|-----------|---------------|--------------------| +| onValidate | func | 当内部 Validator 开始校验时被调用。 | + +| 方法 | 说明 | +|------------|----------------| +| validate(callback) | 对所有表单域进行校验。 | +| reset() | 将表单域的值恢复为初始值。 | +| forceValidate(fields, callback) | 对指定的表单域进行校验，fields 对应每个 Validator 包裹的表单域的 name 属性值。| + +### Validation.Validator + +一个 Validator 对应一个表单域，校验的表单域需要声明 `name` 属性作为校验标识，如 ``。 + +| 属性 | 类型 | 默认值 | 说明 | +|-----------|---------------|--------------------| +| rules | array 或者 object | | 支持多规则校验，默认提供的规则详见 [async-validator](https://github.com/yiminghe/async-validator)，同时支持用户自定义校验规则。| +| trigger | String | onChange | 设定如何触发校验动作。 | + +### rules 说明（[async-validator](https://github.com/yiminghe/async-validator)） + +示例： `{type: "string", required: true, min: 5, message: "请至少填写 5 个字符。" }` + +- `type` : 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 [type](https://github.com/yiminghe/async-validator#user-content-type)； +- `required`: 是否必填； +- `pattern`: 声明校验正则表达式； +- `min` / `max`: 最小值、最大值声明； +- `len`: 字符长度； +- `enum`: 枚举值，对应 type 值为 `enum`，例如 `role: {type: "enum", enum: ['A', 'B', 'C']}`； +- `whitespace`: 是否允许空格， `true` 为允许； +- `fields`: 当你需要对类型为 object 或者 array 的每个值做校验时使用，详见 [fields](https://github.com/yiminghe/async-validator#deep-rules)； +- `transform`: 当你需要在校验前对值做一些处理的时候； +- `message`: 自定义提示信息，[更多](https://github.com/yiminghe/async-validator#messages)； +- `validator`: 自定义校验规则。 + + + + + + + -| 成员 | 说明 | 类型 | 默认值 | -|-------------|----------------|--------------------|--------------| From e74845896c1f369a89426c27d45885a647defb6a Mon Sep 17 00:00:00 2001 From: SimaQ Date: Fri, 31 Jul 2015 16:26:09 +0800 Subject: [PATCH 10/35] update form demo --- components/form/demo/horizontal-form.md | 4 ++-- components/form/demo/inputs.md | 5 +---- components/form/demo/validate.md | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index fb9b5aafe..5b3600c4e 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -4,11 +4,11 @@ 为 `` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。 -如需将一行静态文本和 `
-
+
@@ -92,7 +90,6 @@ React.render(
-

请输入正确的电话号码

diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md index 98ac20e4c..c75443565 100644 --- a/components/form/demo/validate.md +++ b/components/form/demo/validate.md @@ -8,7 +8,7 @@ 将以上三种校验状态类添加到这些控件的父级元素即可。 -另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可。 +另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。 **注意**: 反馈图标只能使用在文本输入框 `` 元素上。 From 19560e2d753e6f9bc3145d08a400c85e7828be8a Mon Sep 17 00:00:00 2001 From: SimaQ Date: Mon, 3 Aug 2015 11:32:45 +0800 Subject: [PATCH 11/35] update --- components/validation/index.md | 9 --------- package.json | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/components/validation/index.md b/components/validation/index.md index ee751d878..9fe000149 100644 --- a/components/validation/index.md +++ b/components/validation/index.md @@ -61,12 +61,3 @@ - `transform`: 当你需要在校验前对值做一些处理的时候； - `message`: 自定义提示信息，[更多](https://github.com/yiminghe/async-validator#messages)； - `validator`: 自定义校验规则。 - - - - - - - - - diff --git a/package.json b/package.json index cbc2a2aaa..cc28db1d1 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "rc-collapse": "~1.2.3", "rc-dialog": "~4.4.0", "rc-dropdown": "~1.1.1", - "rc-form-validation": "^2.4.7", + "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", "rc-menu": "~3.4.2", "rc-notification": "~1.0.1", From 8516f308e55895926b59bfcb80f11afffdeb1fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 3 Aug 2015 13:12:13 +0800 Subject: [PATCH 12/35] =?UTF-8?q?Revert=20"=E8=A1=A8=E5=8D=95=E6=A0=A1?= =?UTF-8?q?=E9=AA=8C"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/form/demo/horizontal-form.md | 4 +- components/form/demo/inputs.md | 5 +- components/form/demo/validate.md | 24 ++- components/validation/demo/basic.md | 240 ----------------------- components/validation/demo/customize.md | 249 ------------------------ components/validation/index.jsx | 3 - components/validation/index.md | 63 ------ index.js | 3 +- package.json | 1 - style/components/form.less | 73 ------- style/mixins/form.less | 6 +- 11 files changed, 25 insertions(+), 646 deletions(-) delete mode 100644 components/validation/demo/basic.md delete mode 100644 components/validation/demo/customize.md delete mode 100644 components/validation/index.jsx delete mode 100644 components/validation/index.md diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index 5b3600c4e..fb9b5aafe 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -4,11 +4,11 @@ 为 `
` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。 -如需将一行静态文本和 `
-
+
@@ -90,6 +92,7 @@ React.render(
+

请输入正确的电话号码

diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md index c75443565..26d760a7a 100644 --- a/components/form/demo/validate.md +++ b/components/form/demo/validate.md @@ -8,7 +8,7 @@ 将以上三种校验状态类添加到这些控件的父级元素即可。 -另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。 +另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可。 **注意**: 反馈图标只能使用在文本输入框 `` 元素上。 @@ -39,37 +39,41 @@
-
+
-
信息审核中...
+
+
信息审核中...
-
+
-
+
+
-
+
-
+
-
请输入数字和字母组合
+
+
请输入数字和字母组合
-
+
-
+
+
diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md deleted file mode 100644 index 271534b8d..000000000 --- a/components/validation/demo/basic.md +++ /dev/null @@ -1,240 +0,0 @@ -# 基本 - -- order: 0 - -基本的表单校验栗子。 - -每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating` `errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 - -表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。 - ---- - -````jsx -var Validation = antd.Validation; -var Validator = Validation.Validator; -var Select = antd.Select; -var Option = Select.Option; -var Radio = antd.Radio; -var RadioGroup = antd.RadioGroup; - -function cx(classNames) { - if (typeof classNames === 'object') { - return Object.keys(classNames).filter(function(className) { - return classNames[className]; - }).join(' '); - } else { - return Array.prototype.join.call(arguments, ' '); - } -} - -var Form = React.createClass({ - mixins: [Validation.FieldMixin], - - getInitialState() { - return { - status: { - email: {}, - name: {}, - select: {}, - radio: {}, - passwd: {}, - rePasswd: {}, - textarea: {} - }, - formData: { - email: undefined, - name: undefined, - select: undefined, - radio: undefined, - passwd: undefined, - rePasswd: undefined, - textarea: undefined - } - }; - }, - - validateStyle(item, hasFeedback=true) { - var formData = this.state.formData; - var status = this.state.status; - - var classes = cx({ - 'has-feedback': hasFeedback, - 'has-error': status[item].errors, - 'is-validating': status[item].isValidating, - 'has-success': formData[item] && !status[item].errors && !status[item].isValidating - }); - - return classes; - }, - - handleReset(e) { - this.refs.validation.reset(); - this.setState(this.getInitialState()); - e.preventDefault(); - }, - - handleSubmit(e) { - e.preventDefault(); - var validation = this.refs.validation; - validation.validate((valid) => { - if (!valid) { - console.log('error in form'); - return; - } else { - console.log('submit'); - } - console.log(this.state.formData); - }); - }, - - userExists(rule, value, callback) { - if (!value) { - callback(); - } else { - setTimeout(function () { - if (value === 'yiminghe') { - callback([new Error('抱歉，该用户名已被占用。')]); - } else { - callback(); - } - }, 1000); - } - }, - - checkPass(rule, value, callback) { - if (this.state.formData.passwd) { - this.refs.validation.forceValidate(['rePasswd']); - } - callback(); - }, - - checkPass2(rule, value, callback) { - if (value !== this.state.formData.passwd) { - callback('两次输入密码不一致！'); - } else { - callback(); - } - }, - - render() { - var formData = this.state.formData; - var status = this.state.status; - - return ( -
- -
- -
-
- - - - {status.name.isValidating ?
正在校验中...
: null} - {status.name.errors ?
{status.name.errors.join(',')}
: null} -
-
-
- -
- -
-
- - - - {status.email.errors ?
{status.email.errors.join(',')}
: null} -
-
-
- -
- -
-
- - - - {status.select.errors ?
{status.select.errors.join(',')}
: null} -
-
-
- -
- -
-
- - - 男 - 女 - - - {status.radio.errors ?
{status.radio.errors.join(',')}
: null} -
-
-
- -
- -
-
- - - - {status.passwd.errors ?
{status.passwd.errors.join(',')}
: null} -
-
-
- -
- -
-
- - - - {status.rePasswd.errors ?
{status.rePasswd.errors.join(', ')}
: null} -
-
-
- - -
- -
-
- - - - {status.textarea.errors ?
{status.textarea.errors.join(',')}
: null} -
-
-
- -
-
- -     - 重 置 -
-
- -
- ); - } -}); - -React.render(
, document.getElementById('components-validation-demo-basic')); -```` diff --git a/components/validation/demo/customize.md b/components/validation/demo/customize.md deleted file mode 100644 index be71cf5ce..000000000 --- a/components/validation/demo/customize.md +++ /dev/null @@ -1,249 +0,0 @@ -# 自定义校验规则 - -- order: 1 - -密码校验实例。 - ---- - -````jsx -var Validation = antd.Validation; -var Validator = Validation.Validator; - -function cx(classNames) { - if (typeof classNames === 'object') { - return Object.keys(classNames).filter(function(className) { - return classNames[className]; - }).join(' '); - } else { - return Array.prototype.join.call(arguments, ' '); - } -} - -var Form = React.createClass({ - mixins: [Validation.FieldMixin], - - getInitialState() { - return { - status: { - pass: {}, - rePass: {} - }, - formData: { - pass: undefined, - rePass: undefined - }, - passBarShow: false, // 是否显示密码强度提示条 - rePassBarShow: false, - passStrength: 'L', // 密码强度 - rePassStrength: 'L' - }; - }, - - handleSubmit(e) { - e.preventDefault(); - var validation = this.refs.validation; - validation.validate((valid) => { - if (!valid) { - console.log('error in form'); - return; - } else { - console.log('submit'); - } - console.log(this.state.formData); - }); - }, - - handleReset(e) { - this.refs.validation.reset(); - this.setState(this.getInitialState()); - e.preventDefault(); - }, - - renderValidateStyle(item, hasFeedback=true) { - var formData = this.state.formData; - var status = this.state.status; - - var classes = cx({ - 'has-feedback': hasFeedback, - 'has-error': status[item].errors, - 'is-validating': status[item].isValidating, - 'has-success': formData[item] && !status[item].errors && !status[item].isValidating - }); - - return classes; - }, - - getPassStrenth(value, type) { - if (value) { - var strength; - // 密码强度的校验规则自定义，这里只是做个简单的示例 - if (value.length < 6) { - strength = 'L'; - } else if (value.length <= 9) { - strength = 'M'; - } else { - strength = 'H'; - } - type === 'pass' ? this.setState({ passBarShow: true, passStrength: strength }) : this.setState({ rePassBarShow: true, rePassStrength: strength }); - } else { - type === 'pass' ? this.setState({ passBarShow: false }) : this.setState({ rePassBarShow: false }); - } - }, - - checkPass(rule, value, callback) { - this.getPassStrenth(value, 'pass'); - - if (this.state.formData.pass) { - this.refs.validation.forceValidate(['rePass']); - } - - callback(); - }, - - checkPass2(rule, value, callback) { - this.getPassStrenth(value, 'rePass'); - - if (value && value !== this.state.formData.pass) { - callback('两次输入密码不一致！'); - } else { - callback(); - } - }, - - renderPassStrengthBar(type) { - var strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength; - var classSet = cx({ - 'ant-pwd-strength': true, - 'ant-pwd-strength-low': strength === 'L', - 'ant-pwd-strength-medium': strength === 'M', - 'ant-pwd-strength-high': strength === 'H' - }); - var level = { - L: '低', - M: '中', - H: '高' - }; - - return ( -
-
    -
  • -
  • -
  • - - {level[strength]} - -
-
- ); - }, - - render() { - var formData = this.state.formData; - var status = this.state.status; - - return ( - - - -
- -
-
- - - - {status.pass.errors ?
{status.pass.errors.join(',')}
: null} -
-
-
- {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} -
-
- -
- -
-
- - - - {status.rePass.errors ?
{status.rePass.errors.join(', ')}
: null} -
-
-
- {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} -
-
- -
-
- -     - 重 置 -
-
- -
- ); - } -}); - -React.render(
, document.getElementById('components-validation-demo-customize')); -```` - - diff --git a/components/validation/index.jsx b/components/validation/index.jsx deleted file mode 100644 index 00589d928..000000000 --- a/components/validation/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -import Validation from 'rc-form-validation'; - -export default Validation; diff --git a/components/validation/index.md b/components/validation/index.md deleted file mode 100644 index 9fe000149..000000000 --- a/components/validation/index.md +++ /dev/null @@ -1,63 +0,0 @@ -# Validation - -- category: Components -- chinese: 表单校验 -- order: 19 - ---- - -表单校验。 - -## 何时使用 - -同表单结合使用，对表单域进行校验。 - -## API - -```html - - - - - - -``` - - -### Validation - -| 属性 | 类型 | 说明 | -|-----------|---------------|--------------------| -| onValidate | func | 当内部 Validator 开始校验时被调用。 | - -| 方法 | 说明 | -|------------|----------------| -| validate(callback) | 对所有表单域进行校验。 | -| reset() | 将表单域的值恢复为初始值。 | -| forceValidate(fields, callback) | 对指定的表单域进行校验，fields 对应每个 Validator 包裹的表单域的 name 属性值。| - -### Validation.Validator - -一个 Validator 对应一个表单域，校验的表单域需要声明 `name` 属性作为校验标识，如 ``。 - -| 属性 | 类型 | 默认值 | 说明 | -|-----------|---------------|--------------------| -| rules | array 或者 object | | 支持多规则校验，默认提供的规则详见 [async-validator](https://github.com/yiminghe/async-validator)，同时支持用户自定义校验规则。| -| trigger | String | onChange | 设定如何触发校验动作。 | - -### rules 说明（[async-validator](https://github.com/yiminghe/async-validator)） - -示例： `{type: "string", required: true, min: 5, message: "请至少填写 5 个字符。" }` - -- `type` : 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 [type](https://github.com/yiminghe/async-validator#user-content-type)； -- `required`: 是否必填； -- `pattern`: 声明校验正则表达式； -- `min` / `max`: 最小值、最大值声明； -- `len`: 字符长度； -- `enum`: 枚举值，对应 type 值为 `enum`，例如 `role: {type: "enum", enum: ['A', 'B', 'C']}`； -- `whitespace`: 是否允许空格， `true` 为允许； -- `fields`: 当你需要对类型为 object 或者 array 的每个值做校验时使用，详见 [fields](https://github.com/yiminghe/async-validator#deep-rules)； -- `transform`: 当你需要在校验前对值做一些处理的时候； -- `message`: 自定义提示信息，[更多](https://github.com/yiminghe/async-validator#messages)； -- `validator`: 自定义校验规则。 diff --git a/index.js b/index.js index 28a70941f..78dad6240 100644 --- a/index.js +++ b/index.js @@ -23,8 +23,7 @@ var antd = { message: require('./components/message'), Slider: require('./components/slider'), Radio: require('./components/radio'), - RadioGroup: require('./components/radio/group'), - Validation: require('./components/validation') + RadioGroup: require('./components/radio/group') }; module.exports = antd; diff --git a/package.json b/package.json index cc28db1d1..88e44618c 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "rc-collapse": "~1.2.3", "rc-dialog": "~4.4.0", "rc-dropdown": "~1.1.1", - "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", "rc-menu": "~3.4.2", "rc-notification": "~1.0.1", diff --git a/style/components/form.less b/style/components/form.less index 2c08df511..36e64e8fa 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -260,88 +260,15 @@ form { } // Validation state -.has-success, .has-warning, .has-error, .is-validating { - &.has-feedback:after { - position: absolute; - bottom: 0; - right: 0; - font-family: "anticon" !important; - width: 32px; - height: 32px; - line-height: 32px; - text-align: center; - font-size: 14px; - } -} - .has-success { .form-control-validation(@success-color; @input-hover-border-color;); .@{css-prefix}input { border-color: @input-border-color; - box-shadow: none; - } - - &.has-feedback:after { - content: '\e614'; - color: @success-color; } } - .has-warning { .form-control-validation(@warning-color; @warning-color;); - - &.has-feedback:after { - content: '\e628'; - color: @warning-color; - } - - // ant-select - .@{selectPrefixCls} { - &-selection { - border-color: @warning-color; - box-shadow: 0 0 0 2px tint(@warning-color, 80%); - } - &-arrow { - color: @warning-color; - } - } - - // ant-datepicker - .@{prefixCalendarClass}-picker-icon:after { - color: @warning-color; - } } - .has-error { .form-control-validation(@error-color; @error-color;); - - &.has-feedback:after { - content: '\e628'; - color: @error-color; - } - - // ant-select - .@{selectPrefixCls} { - &-selection { - border-color: @error-color; - box-shadow: 0 0 0 2px tint(@error-color, 80%); - } - - &-arrow { - color: @error-color; - } - } - - // ant-datepicker - .@{prefixCalendarClass}-picker-icon:after { - color: @error-color; - } -} - -.is-validating { - &.has-feedback:after { - display: inline-block; - .animation(loadingCircle 1s infinite linear); - content:"\e610"; - } } diff --git a/style/mixins/form.less b/style/mixins/form.less index edd5b36c9..bf9ffddad 100644 --- a/style/mixins/form.less +++ b/style/mixins/form.less @@ -5,8 +5,10 @@ // 输入框的不同校验状态 .@{css-prefix}input { border-color: @border-color; - box-shadow: 0 0 0 2px tint(@border-color, 80%); - + &:focus { + border-color: @border-color; + box-shadow: 0 0 0 2px tint(@border-color, 80%); + } &:not([disabled]):hover { border-color: @border-color; } From 0673ba9d16962a0a0a3fdeb00fe45d5137267f4c Mon Sep 17 00:00:00 2001 From: jljsj Date: Mon, 3 Aug 2015 16:04:24 +0800 Subject: [PATCH 13/35] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=BD=AC=E5=9C=BA?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8C=89=E9=92=AE=E4=BA=A4=E4=BA=92=E4=B8=8E?= =?UTF-8?q?=E6=9B=B4=E6=96=B0motion=E9=87=8C=E7=9A=84select?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tabs/index.jsx | 1 + spec/motion.md | 24 +++++++++++----- spec/page-transition.md | 59 ++++++++++++++++++++++----------------- 3 files changed, 52 insertions(+), 32 deletions(-) diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx index 5686353d5..9c0207e08 100644 --- a/components/tabs/index.jsx +++ b/components/tabs/index.jsx @@ -20,3 +20,4 @@ AntTabs.defaultProps = { AntTabs.TabPane = Tabs.TabPane; export default AntTabs; + diff --git a/spec/motion.md b/spec/motion.md index 0853d71c9..71527949c 100644 --- a/spec/motion.md +++ b/spec/motion.md @@ -28,6 +28,11 @@ Ant Design 提供了一些预设的组件动画样式。 `````jsx var cssAnimation = require('css-animation'); +var Select = antd.Select; +var Option = Select.Option; +var OptGroup = Select.OptGroup; + + var motions = []; motions = motions.concat([[{ name: '淡入', @@ -182,7 +187,7 @@ motions = motions.concat([[{ var leave='-leave'; var Test = React.createClass({ handleChange(e) { - var value = e.target.value; + var value = e; if(value){ this.demoNode.style.visibility=''; cssAnimation(this.demoNode, value, () => { @@ -198,19 +203,20 @@ var Test = React.createClass({ }, render() { - var options = [].concat(motions.map(function (m) { + var options = [].concat(motions.map(function (m) { var opts = m.map(function (m2) { - return + return }); - return {opts}; + return {opts}; })); return
-
- +
+
+
; } }); @@ -237,8 +243,12 @@ React.render(, document.getElementById('components-motion-demo-basic')); font-weight: bold; background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px; } -.motion-select { +.motion-select-wrapper{ text-align: center; } +.motion-select { + text-align:left; + width:180px; +} diff --git a/spec/page-transition.md b/spec/page-transition.md index ca5c75185..4a52441dc 100644 --- a/spec/page-transition.md +++ b/spec/page-transition.md @@ -1,10 +1,25 @@ -# 转换动画 +# 互动转换 - category: 动画 - order: 1 --- +## 响应互动 + +响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 + +比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。 + +### 按钮反馈 + +
+ +
+ + +## 转换动画 + ### 视觉连贯性三元素 - Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 @@ -13,30 +28,6 @@ - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 - -## 转场动画 - -从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - - - 大页面转场可采用左出右入的形式。 - - - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 - - - - -
- -
- -> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) - -## 响应互动 - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。 - ### 可折叠面板 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 @@ -57,3 +48,21 @@
+ + +### 页面转场 + +从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + + - 大页面转场可采用左出右入的形式。 + + - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 + + + + +
+ +
+ +> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/) From c18af7db797fa9cb45e74390b89d4f4d95c79fea Mon Sep 17 00:00:00 2001 From: ioldfish Date: Mon, 3 Aug 2015 16:07:21 +0800 Subject: [PATCH 14/35] =?UTF-8?q?=E5=8C=85=E8=A3=85rc-tree=EF=BC=8C?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=85=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/demo/basic.md | 32 +++++++++++++ components/tree/index.jsx | 15 ++++++ index.js | 3 +- package.json | 3 +- style/components/index.less | 1 + style/components/tree.less | 88 +++++++++++++++++++++++++++++++++++ 6 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 components/tree/demo/basic.md create mode 100644 components/tree/index.jsx create mode 100644 style/components/tree.less diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md new file mode 100644 index 000000000..6230a151d --- /dev/null +++ b/components/tree/demo/basic.md @@ -0,0 +1,32 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Tree = antd.Tree; +var TreeNode = Tree.TreeNode; +React.render( + + + leaf + + + leaf + leaf + + leaf + leaf + + + leaf + + leaf + + +, document.getElementById('components-tree-demo-basic')); +```` + diff --git a/components/tree/index.jsx b/components/tree/index.jsx new file mode 100644 index 000000000..9cb9c3033 --- /dev/null +++ b/components/tree/index.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import Tree from 'rc-tree' +var TreeNode = Tree.TreeNode; + +var antDTree = React.createClass({ + + render() { + return + {this.props.children} + + } +}); +antDTree.TreeNode = TreeNode; +module.exports = antDTree; diff --git a/index.js b/index.js index 0675ac188..40875afcd 100644 --- a/index.js +++ b/index.js @@ -27,7 +27,8 @@ var antd = { Radio: require('./components/radio'), RadioGroup: require('./components/radio/group'), Alert: require('./components/alert'), - Validation: require('./components/validation') + Validation: require('./components/validation'), + Tree: require('./components/Tree') }; module.exports = antd; diff --git a/package.json b/package.json index 761ce60f1..df6729320 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,8 @@ "rc-switch": "~1.2.0", "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", - "rc-tooltip": "~2.4.0" + "rc-tooltip": "~2.4.0", + "rc-tree": "~0.10.0" }, "devDependencies": { "autoprefixer-loader": "~2.0.0", diff --git a/style/components/index.less b/style/components/index.less index 488dec4be..88107baaa 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -25,3 +25,4 @@ @import "radio"; @import "tag"; @import "alert"; +@import "tree"; diff --git a/style/components/tree.less b/style/components/tree.less new file mode 100644 index 000000000..a0393182e --- /dev/null +++ b/style/components/tree.less @@ -0,0 +1,88 @@ +@treePrefixCls: rc-tree; + +.@{treePrefixCls} { + margin:0; padding:5px; + + li { + padding: 0; + margin: 0; + list-style: none; + line-height: 14px; + white-space: nowrap; + outline: 0; + + ul{ margin:0; padding:0 0 0 18px} + ul.line{ + //background:url(./img/line_conn.gif) 0 0 repeat-y; + background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y; + } + a { + padding:1px 3px 0 0; margin:0; + cursor:pointer; height:17px; + background-color: transparent; + text-decoration:none; + vertical-align:top; display: inline-block + } + span {line-height:16px; margin-right:2px} + span.button { + line-height:0; margin:0; width:16px; height:16px; + display: inline-block; vertical-align:middle; + border:0 none; cursor: pointer;outline:none; + background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; + //background-image:url("./img/zTreeStandard.png"); + background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png"); + } + span.button.roots_open { background-position: -92px 0; } + span.button.roots_close{background-position:-74px 0} + span.button.center_open{background-position:-92px -18px} + span.button.center_close{background-position:-74px -18px} + span.button.bottom_open{background-position:-92px -36px} + span.button.bottom_close{background-position:-74px -36px} + + span.button.center_docu{background-position:-56px -18px} + span.button.bottom_docu{background-position:-56px -36px} + + span.button.chk { + width: 13px; height: 13px; + margin: 0 3px 0 0; + cursor: auto; + } + span.button.chk.checkbox_false_full {background-position:0 0} + span.button.chk.checkbox_false_full_focus {background-position:0 -14px} + span.button.chk.checkbox_false_part {background-position:0 -28px} + span.button.chk.checkbox_false_part_focus {background-position:0 -42px} + span.button.chk.checkbox_false_disable {background-position:0 -56px} + span.button.chk.checkbox_true_full {background-position:-14px 0} + span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} + span.button.chk.checkbox_true_part {background-position:-14px -28px} + span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} + span.button.chk.checkbox_true_disable {background-position:-14px -56px} + } + + &-selected{ + background-color:#FFE6B0; + border:1px #FFB951 solid; opacity:0.8; + } + + &-treenode-switcher { + display: inline-block; + width: 18px; + height: 18px; + } + &-icon__open { + margin-right: 2px; + background-position: -110px -16px; + vertical-align: top; + } + &-icon__close { + margin-right: 2px; + background-position: -110px 0; + vertical-align: top; + } + &-switcher__open { + //background-position: -92px 0; + } + &-switcher__close { + //background-position: -74px 0; + } +} From 936e5e8369e07492f0c8adb67e15222f8cb10e0c Mon Sep 17 00:00:00 2001 From: ioldfish Date: Mon, 3 Aug 2015 16:11:56 +0800 Subject: [PATCH 15/35] =?UTF-8?q?=E5=8C=85=E8=A3=85rc-tree=EF=BC=8C?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=85=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/tree/index.jsx b/components/tree/index.jsx index 9cb9c3033..adcdbbb4d 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; - -import Tree from 'rc-tree' +import Tree from 'rc-tree'; var TreeNode = Tree.TreeNode; var antDTree = React.createClass({ @@ -8,7 +7,7 @@ var antDTree = React.createClass({ render() { return {this.props.children} - + ; } }); antDTree.TreeNode = TreeNode; From fc6fe4ecd085bc0fd0327c562893769d80ad076e Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Mon, 3 Aug 2015 16:16:07 +0800 Subject: [PATCH 16/35] datepicker size lg sm --- components/datepicker/demo/size.md | 20 ++++++++++++++++++++ components/datepicker/index.jsx | 2 +- components/datepicker/index.md | 1 + 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 components/datepicker/demo/size.md diff --git a/components/datepicker/demo/size.md b/components/datepicker/demo/size.md new file mode 100644 index 000000000..c867dbcfb --- /dev/null +++ b/components/datepicker/demo/size.md @@ -0,0 +1,20 @@ +# 三种大小 + +- order: 1 + +三种大小的输入框，`size`为`lg`和`sm`分别表示高为`32px`和`22px`，默认`28px`。 + +--- + +````jsx +// or require('antd/lib/datepicker'); +var Datepicker = antd.Datepicker; + +React.render( +
+ + + +
+, document.getElementById('components-datepicker-demo-size')); +```` diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index a4fae950f..062842b02 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -74,7 +74,7 @@ export default React.createClass({ value={this.state.value} prefixCls="ant-calendar-picker" onChange={this.handleChange}> - + ); } diff --git a/components/datepicker/index.md b/components/datepicker/index.md index afa0e2636..5f8f4578b 100644 --- a/components/datepicker/index.md +++ b/components/datepicker/index.md @@ -26,6 +26,7 @@ | onSelect | 选择日期的回调 | function | 无 | | showTime | 显示时间选择条 | boolean | false | | disabled | 禁用 | bool | false | +| size | 输入框大小，`lg`代表高为32px，`sm`代表高为22px，默认28px | string | 无 | From eb4f468b49e37d64b79199c4854f1b234495d2ae Mon Sep 17 00:00:00 2001 From: sorrycc Date: Mon, 3 Aug 2015 16:49:42 +0800 Subject: [PATCH 20/35] add Affix --- components/affix/demo/basic.md | 17 +++++++++ components/affix/demo/offset.md | 17 +++++++++ components/affix/index.jsx | 62 +++++++++++++++++++++++++++++++++ components/affix/index.md | 7 ++++ index.js | 1 + package.json | 3 +- 6 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 components/affix/demo/basic.md create mode 100644 components/affix/demo/offset.md create mode 100644 components/affix/index.jsx diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md new file mode 100644 index 000000000..64a022c08 --- /dev/null +++ b/components/affix/demo/basic.md @@ -0,0 +1,17 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Affix = antd.Affix; + +React.render( + + + +, document.getElementById('components-affix-demo-basic')); +```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md new file mode 100644 index 000000000..41cfed3d6 --- /dev/null +++ b/components/affix/demo/offset.md @@ -0,0 +1,17 @@ +# 偏移 + +- order: 1 + +达到一定的偏移量才触发。 + +--- + +````jsx +var Affix = antd.Affix; + +React.render( + + + +, document.getElementById('components-affix-demo-offset')); +```` diff --git a/components/affix/index.jsx b/components/affix/index.jsx new file mode 100644 index 000000000..506bdbf68 --- /dev/null +++ b/components/affix/index.jsx @@ -0,0 +1,62 @@ +import React from 'react'; +import joinClasses from 'react/lib/joinClasses'; +import rcUtil from 'rc-util'; + +var Affix = React.createClass({ + + getDefaultProps() { + return { + offset: 0 + }; + }, + + getInitialState() { + return { + affix: false + }; + }, + + handleScroll() { + var affix = this.state.affix; + var offset = this.props.offset; + var scrollTop = (document.documentElement && document.documentElement.scrollTop) || + document.body.scrollTop; + + if (!affix && scrollTop >= offset) { + this.setState({ + affix: true + }); + } + + if (affix && scrollTop < offset) { + this.setState({ + affix: false + }); + } + }, + + componentDidMount() { + this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll); + }, + + componentWillUnmount() { + if (this.scrollEvent) { + this.scrollEvent.remove(); + } + }, + + render() { + var affix = this.state.affix ? 'affix' : ''; + var className = this.props.className; + + return ( +
+ {this.props.children} +
+ ); + } + +}); + +module.exports = Affix; + diff --git a/components/affix/index.md b/components/affix/index.md index 1adff4151..f9c572c7b 100644 --- a/components/affix/index.md +++ b/components/affix/index.md @@ -5,3 +5,10 @@ --- +## API + +属性如下 + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| offset | 达到指定偏移量后触发 | Number | 0 | diff --git a/index.js b/index.js index 40875afcd..5fb9d84bf 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ require('./style/index.less'); var antd = { + Affix: require('./components/affix'), Datepicker: require('./components/datepicker'), Tooltip: require('./components/tooltip'), Tabs: require('./components/tabs'), diff --git a/package.json b/package.json index df6729320..f2e5ac8a3 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "rc-table": "~3.1.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", - "rc-tree": "~0.10.0" + "rc-tree": "~0.10.0", + "rc-util": "~2.0.3" }, "devDependencies": { "autoprefixer-loader": "~2.0.0", From ad2e78ce806c7686fc5f6e99cc23d9dc3b380122 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 3 Aug 2015 17:39:29 +0800 Subject: [PATCH 21/35] fix #94 --- components/datepicker/index.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index 062842b02..228a38e4f 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -69,12 +69,14 @@ export default React.createClass({ disabled={this.props.disabled} trigger={} calendar={calendar} - adjustOrientOnCalendarOverflow={false} + adjustOrientOnCalendarOverflow={true} formatter={new DateTimeFormat(this.props.format)} value={this.state.value} prefixCls="ant-calendar-picker" onChange={this.handleChange}> - + ); } From e7641557caed61e3a8a702b388f36468355390b1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 3 Aug 2015 17:40:58 +0800 Subject: [PATCH 22/35] fix col responsive view --- static/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index fa0644f59..00cc9b219 100644 --- a/static/style.css +++ b/static/style.css @@ -1853,7 +1853,7 @@ a.entry-link:hover .icon-lego { } @media only screen and (min-width: 320px) and (max-width: 1024px) { - .code-boxes-col { + .code-boxes-col-2-1 { float: none; width: 100%; } From ebf1c3ed25172e72955e55ca09d8d5ed0f20cf85 Mon Sep 17 00:00:00 2001 From: sorrycc Date: Mon, 3 Aug 2015 14:52:26 +0800 Subject: [PATCH 23/35] add Carousel --- components/carousel/demo/autoplay.md | 21 ++++ components/carousel/demo/basic.md | 20 ++++ components/carousel/demo/fade.md | 21 ++++ components/carousel/demo/vertical.md | 20 ++++ components/carousel/index.jsx | 34 ++++++ components/carousel/index.md | 30 ++++++ index.js | 1 + package.json | 3 +- style/components/carousel/slick-theme.less | 119 +++++++++++++++++++++ style/components/carousel/slick.less | 102 ++++++++++++++++++ style/components/index.less | 2 + 11 files changed, 372 insertions(+), 1 deletion(-) create mode 100644 components/carousel/demo/autoplay.md create mode 100644 components/carousel/demo/basic.md create mode 100644 components/carousel/demo/fade.md create mode 100644 components/carousel/demo/vertical.md create mode 100644 components/carousel/index.jsx create mode 100644 style/components/carousel/slick-theme.less create mode 100644 style/components/carousel/slick.less diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md new file mode 100644 index 000000000..ec9416632 --- /dev/null +++ b/components/carousel/demo/autoplay.md @@ -0,0 +1,21 @@ +# 自动切换 + +- order: 3 + +定时切换下一张。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-autoplay')); +```` + diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md new file mode 100644 index 000000000..e5715e1f6 --- /dev/null +++ b/components/carousel/demo/basic.md @@ -0,0 +1,20 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-basic')); +```` diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md new file mode 100644 index 000000000..e04e18680 --- /dev/null +++ b/components/carousel/demo/fade.md @@ -0,0 +1,21 @@ +# 渐显 + +- order: 2 + +切换效果为渐显。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-fade')); +```` + diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md new file mode 100644 index 000000000..37726ba3b --- /dev/null +++ b/components/carousel/demo/vertical.md @@ -0,0 +1,20 @@ +# 垂直 + +- order: 1 + +垂直显示。 + +--- + +````jsx +var Carousel = antd.Carousel; + +React.render( + +

1

+

2

+

3

+

4

+ +, document.getElementById('components-carousel-demo-vertical')); +```` diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx new file mode 100644 index 000000000..a3dd9d575 --- /dev/null +++ b/components/carousel/index.jsx @@ -0,0 +1,34 @@ +import Carousel from 'react-slick'; +import React from 'react'; +import assign from 'object-assign'; + +var AntCarousel = React.createClass({ + + getDefaultProps() { + return { + dots: true, + arrows: false + }; + }, + + render() { + var props = assign({}, this.props); + + if (props.effect === 'fade') { + props.fade = true; + } + + var className = 'ant-carousel'; + if (props.vertical) { + className = className + ' ant-carousel-vertical'; + } + + return ( +
+ +
+ ); + } +}); + +export default AntCarousel; diff --git a/components/carousel/index.md b/components/carousel/index.md index e3767bb4c..1f3762034 100644 --- a/components/carousel/index.md +++ b/components/carousel/index.md @@ -5,3 +5,33 @@ --- +旋转木马，轮播组件。 + +## 何时使用 + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|------------------|----------------------------------------------|----------|---------------------------------| +| effect | 动画效果函数，可取 scrollx, fade | String | scrollx | +| arrow | 是否显示前后翻页箭头 | Boolean | false | +| dots | 是否显示面板指示点 | Boolean | true | +| vertical | 垂直显示 | Boolean | false | +| autoplay | 是否自动切换 | Boolean | false | +| easing | 动画效果 | String | linear | +| onChange | 切换面板的回调 | Function | 无 + + diff --git a/index.js b/index.js index 5fb9d84bf..e4f92edac 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,7 @@ var antd = { Affix: require('./components/affix'), Datepicker: require('./components/datepicker'), Tooltip: require('./components/tooltip'), + Carousel: require('./components/carousel'), Tabs: require('./components/tabs'), Modal: require('./components/modal'), Menu: require('rc-menu'), diff --git a/package.json b/package.json index f2e5ac8a3..1a969f2c0 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,8 @@ "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", "rc-tree": "~0.10.0", - "rc-util": "~2.0.3" + "rc-util": "~2.0.3", + "react-slick": "~0.6.4" }, "devDependencies": { "autoprefixer-loader": "~2.0.0", diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less new file mode 100644 index 000000000..25f0fa3ad --- /dev/null +++ b/style/components/carousel/slick-theme.less @@ -0,0 +1,119 @@ + +/* Arrows */ + +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + margin-top: -10px; + padding: 0; + border: none; + outline: none; + &:hover, &:focus { + outline: none; + background: transparent; + color: transparent; + &:before { + opacity: 1; + } + } + &.slick-disabled:before { + opacity: 0.25; + } +} + +.slick-prev { + left: -25px; + &:before { + content: "←"; + } +} + +.slick-next { + right: -25px; + &:before { + content: "→"; + } +} + +/* Dots */ + +.slick-slider { + margin-bottom: 30px; +} + +.slick-dots { + position: absolute; + bottom: -45px; + list-style: none; + display: block; + text-align: center; + padding: 0; + width: 100%; + li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; + button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; + &:hover, &:focus { + outline: none; + &:before { + opacity: 1; + } + } + &:before { + position: absolute; + top: 0; + left: 0; + content: "•"; + width: 20px; + height: 20px; + font-size: 18px; + font-family: arial, sans-serif; + line-height: 20px; + text-align: center; + color: gray; + opacity: 0.25; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + &.slick-active button:before { + color: black; + opacity: 0.75; + } + } +} + +.ant-carousel-vertical { + + .slick-dots { + width: 20px; + bottom: auto; + right: -35px; + top: 0; + } +} diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less new file mode 100644 index 000000000..7aa122df6 --- /dev/null +++ b/style/components/carousel/slick.less @@ -0,0 +1,102 @@ + +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } +} +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } +} +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + [dir="rtl"] & { + float: right; + } + img { + display: block; + } + &.slick-loading img { + display: none; + } + + display: none; + + &.dragging img { + pointer-events: none; + } + + .slick-initialized & { + display: block; + } + + .slick-loading & { + visibility: hidden; + } + + .slick-vertical & { + display: block; + height: auto; + border: 1px solid transparent; + } +} +.slick-arrow.slick-hidden { + display: none; +} + + + + diff --git a/style/components/index.less b/style/components/index.less index 88107baaa..e92fae757 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -26,3 +26,5 @@ @import "tag"; @import "alert"; @import "tree"; +@import "carousel/slick"; +@import "carousel/slick-theme"; From 6b7f2e543b5157efa43e81d486b88883b77d3b29 Mon Sep 17 00:00:00 2001 From: sorrycc Date: Mon, 3 Aug 2015 17:01:42 +0800 Subject: [PATCH 24/35] dots element take place --- style/components/carousel/slick-theme.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less index 25f0fa3ad..e1150bc73 100644 --- a/style/components/carousel/slick-theme.less +++ b/style/components/carousel/slick-theme.less @@ -47,12 +47,12 @@ /* Dots */ .slick-slider { - margin-bottom: 30px; + padding-bottom: 45px; } .slick-dots { position: absolute; - bottom: -45px; + bottom: 0px; list-style: none; display: block; text-align: center; @@ -110,6 +110,10 @@ .ant-carousel-vertical { + .slick-slider { + padding-bottom: 0; + } + .slick-dots { width: 20px; bottom: auto; From cb1ce102ff41fd5c837e2be0c5f0295368ee896d Mon Sep 17 00:00:00 2001 From: sorrycc Date: Mon, 3 Aug 2015 17:45:58 +0800 Subject: [PATCH 25/35] move style declaractions under .ant-carousel --- components/carousel/index.md | 2 +- style/components/carousel/slick-theme.less | 193 +++++++++++---------- style/components/carousel/slick.less | 168 +++++++++--------- 3 files changed, 183 insertions(+), 180 deletions(-) diff --git a/components/carousel/index.md b/components/carousel/index.md index 1f3762034..a0944e0a4 100644 --- a/components/carousel/index.md +++ b/components/carousel/index.md @@ -23,7 +23,7 @@ | onChange | 切换面板的回调 | Function | 无