From 7375222ba494ee80061b07509e996c84cc9dc3ec Mon Sep 17 00:00:00 2001 From: simaQ Date: Tue, 14 Jul 2015 12:06:04 +0800 Subject: [PATCH 1/9] update slider version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e705b5cae3..28d659dccb 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "rc-pagination": "^1.0.0", "rc-progress": "~1.0.0", "rc-select": "~4.2.1", - "rc-slider": "~1.2.4", + "rc-slider": "^1.2.5", "rc-steps": "~1.1.3", "rc-switch": "~1.2.0", "rc-tabs": "~5.2.0", From a4795453b8deb78a0b23ad118f36f7c868b6c517 Mon Sep 17 00:00:00 2001 From: simaQ Date: Tue, 14 Jul 2015 12:06:44 +0800 Subject: [PATCH 2/9] update slider demo --- components/slider/demo/basic.md | 14 +++ components/slider/demo/icon-slider.md | 94 +++++++++++++++++++ components/slider/demo/input-number-slider.md | 45 +++++++++ components/slider/demo/mark.md | 12 ++- 4 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 components/slider/demo/icon-slider.md create mode 100644 components/slider/demo/input-number-slider.md diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md index 6a1ba462e0..65268b67e3 100644 --- a/components/slider/demo/basic.md +++ b/components/slider/demo/basic.md @@ -10,7 +10,21 @@ var Slider = antd.Slider; React.render( +
+ +
, document.getElementById('components-slider-demo-basic')); ```` + \ No newline at end of file diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md new file mode 100644 index 0000000000..4298b57687 --- /dev/null +++ b/components/slider/demo/icon-slider.md @@ -0,0 +1,94 @@ +# 带 icon 的滑块 + +- order: 2 + +--- + +````jsx +var Slider = antd.Slider; + +var IconSlider = React.createClass({ + getInitialState() { + var max = this.props.max; + var min = this.props.min; + var mid = ((max - min) / 2).toFixed(5); + + var preIcon, nextIcon; + if (this.props.value >= mid) { + preIcon = this.props.icon[0]; + nextIcon = this.props.icon[1] + ' anticon-highlight'; + } else { + preIcon = this.props.icon[0] + ' anticon-highlight'; + nextIcon = this.props.icon[1]; + } + + return { + preIcon: preIcon, + nextIcon: nextIcon, + mid: mid, + sliderValue: this.props.value + }; + }, + + handleChange(v) { + var preIcon, nextIcon; + if (v >= this.state.mid) { + preIcon = this.props.icon[0]; + nextIcon = this.props.icon[1] + ' anticon-highlight'; + } else { + preIcon = this.props.icon[0] + ' anticon-highlight'; + nextIcon = this.props.icon[1]; + } + + this.setState( + { + preIcon: preIcon, + nextIcon: nextIcon, + sliderValue: v + } + ); + }, + + render() { + return ( +
+ + + +
+ ); + } +}); + +React.render( + +, document.getElementById('components-slider-demo-icon-slider')); +```` + + \ No newline at end of file diff --git a/components/slider/demo/input-number-slider.md b/components/slider/demo/input-number-slider.md new file mode 100644 index 0000000000..a423550a3a --- /dev/null +++ b/components/slider/demo/input-number-slider.md @@ -0,0 +1,45 @@ +# 带输入框的滑块 + +- order: 1 + + + +--- + +````jsx +var Slider = antd.Slider; +var InputNumber = antd.InputNumber; + +var Test = React.createClass({ + getInitialState() { + return { + inputValue: 0 + }; + }, + onChange(v){ + this.setState({ + inputValue: v + }); + }, + render() { + return ( +
+
+ +
+
+ +
+
+ ); + } +}); + +React.render(, document.getElementById('components-slider-demo-input-number-slider')); +```` + + diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index f20d5150d8..dc704a8ef9 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -10,7 +10,17 @@ var Slider = antd.Slider; React.render( - +
+

包含关系

+ +

并列关系

+ +
, document.getElementById('components-slider-demo-mark')); ```` + \ No newline at end of file From 4807c3a0ad4346e7dc4df00ccded62c4871f4b6a Mon Sep 17 00:00:00 2001 From: simaQ Date: Tue, 14 Jul 2015 12:07:04 +0800 Subject: [PATCH 3/9] update slider style --- style/components/slider.less | 60 ++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/style/components/slider.less b/style/components/slider.less index 0cd72131ce..87835ac062 100644 --- a/style/components/slider.less +++ b/style/components/slider.less @@ -1,10 +1,17 @@ @sliderClass: ~"@{css-prefix}slider"; -// color +// slider color @disabledColor: #ccc; +// tooltip +@tooltip-color: #fff; +@tooltip-bg: tint(#666, 4%); +@tooltip-arrow-width: 4px; +@tooltip-distance: @tooltip-arrow-width+4; +@tooltip-arrow-color: @tooltip-bg; .@{sliderClass} { position: relative; + margin: 12px 0; height: 4px; width: 100%; border-radius: @border-radius-base; @@ -44,7 +51,7 @@ &-mark { position: absolute; - top: 8px; + top: 10px; left: 0px; width: 100%; font-size: 12px; @@ -95,7 +102,7 @@ } &-disabled { - background-color: @disabledColor; + background-color: #e9e9e9; .@{sliderClass}-track { background-color: @disabledColor; @@ -111,4 +118,51 @@ cursor: not-allowed!important; } } + + // slider tooltip style + &-tooltip { + position: absolute; + left: -9999px; + top: -9999px; + z-index: 4; + visibility: visible; + + &-hidden { + display: none; + } + + &-placement-top { + padding: @tooltip-arrow-width 0 @tooltip-distance 0; + } + + &-inner { + padding: 6px 0; + width: 24px; + height: 24px; + font-size: @font-size-base; + line-height: 1; + color: @tooltip-color; + text-align: center; + text-decoration: none; + background-color: @tooltip-bg; + border-radius: @border-radius-base; + box-shadow: 0 0 4px #d9d9d9; + } + + &-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &-placement-top &-arrow { + bottom: @tooltip-distance - @tooltip-arrow-width; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + } } \ No newline at end of file From f93f9ee93191bcdfbda80da5b1af852d3f978a46 Mon Sep 17 00:00:00 2001 From: Yuwei Ba Date: Tue, 14 Jul 2015 12:09:29 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pagination/demo/mini-more.md | 19 ---- components/pagination/index.jsx | 4 +- components/pagination/index.md | 2 +- style/components/pagination.less | 129 ++++++++++++------------ 4 files changed, 67 insertions(+), 87 deletions(-) delete mode 100644 components/pagination/demo/mini-more.md diff --git a/components/pagination/demo/mini-more.md b/components/pagination/demo/mini-more.md deleted file mode 100644 index e193f0eb9a..0000000000 --- a/components/pagination/demo/mini-more.md +++ /dev/null @@ -1,19 +0,0 @@ -# 迷你的改变 - -- order: 5 - -改变每页显示条目数 - ---- - -````jsx -var Pagination = antd.Pagination; - -function onChange(page) { - console.log(page); -} - -React.render( - , - document.getElementById('components-pagination-demo-mini-more')); -```` diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 66b24f5453..f76365c930 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -3,11 +3,11 @@ let Pagination = require('rc-pagination'); let React = require('react'); -let prefixCls = 'ant-patination'; +let prefixCls = 'ant-pagination'; class AntPagination extends React.Component { render() { - return ; + return ; } } diff --git a/components/pagination/index.md b/components/pagination/index.md index a328e2af94..04ee0230aa 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -25,4 +25,4 @@ | showSizeChanger | 是否可以改变 pageSize | Bool | false | | showQuickJump | 是否可以快速跳转至某页 | Bool | false | | className | 当为「mini」时，是小尺寸分页 | String | ant-pagination | -| simple | 当添加该属性时，显示未简单分页 | Object | 无 | +| simple | 当添加该属性时，显示为简单分页 | Object | 无 | diff --git a/style/components/pagination.less b/style/components/pagination.less index 95f91f11c4..6b695876d7 100644 --- a/style/components/pagination.less +++ b/style/components/pagination.less @@ -1,4 +1,4 @@ -@prefixClass: rc-pagination; +@prefixClass: ant-pagination; .@{prefixClass} { @@ -15,7 +15,7 @@ visibility: hidden; } - .@{prefixClass}-item { + &-item { cursor: pointer; border-radius: 6px; min-width: 28px; @@ -41,7 +41,7 @@ } } - &.active { + &-active { background-color: #2db7f5; border: none; @@ -51,7 +51,7 @@ } } - .jump-prev, .jump-next { + &-jump-prev, &-jump-next { &:after { content: "•••"; display: block; @@ -69,7 +69,7 @@ } - .jump-prev { + &-jump-prev { &:hover { &:after { content: "‹‹"; @@ -77,7 +77,7 @@ } } - .jump-next { + &-jump-next { &:hover { &:after { content: "››"; @@ -85,10 +85,10 @@ } } - .prev, .jump-prev, .jump-next { + &-prev, &-jump-prev, &-jump-next { margin-right: 8px; } - .prev, .next, .jump-prev, .jump-next { + &-prev, &-next, &-jump-prev, &-jump-next { cursor: pointer; color: #666; font-size: 10px; @@ -101,7 +101,7 @@ text-align: center; } - .prev, .next { + &-prev, &-next { border: 1px solid #d9d9d9; a { @@ -116,87 +116,50 @@ a { color: #2db7f5; } + } - &.disabled { - cursor: not-allowed; + } + + &-disabled { + &:hover { + border-color: #d9d9d9; a { color: #ccc; + cursor: not-allowed; } } + cursor: not-allowed; + a { + color: #ccc; + } } - .options { + &-options { float: left; margin-left: 15px; - .size-changer { + &-size-changer { float: left; width: 90px; + margin-right: 10px; } - .quick-jumper { + &-quick-jumper { float: left; - margin-left: 16px; height: 28px; line-height: 28px; input { + .input; margin: 0 8px; - box-sizing: border-box; - background-color: #fff; - border-radius: 6px; - border: 1px solid #d9d9d9; - outline: none; - padding: 3px 12px; width: 50px; - height: 28px; - - &:hover { - border-color: #2db7f5; - } } } } -} -.@{prefixClass}.mini { - .@{prefixClass}-item { - border: none; - margin: 0; - min-width: 20px; - height: 20px; - line-height: 20px; - } - .prev, .next { - margin: 0; - min-width: 20px; - height: 20px; - line-height: 20px; - border: none; - } - - .jump-prev, .jump-next { - height: 20px; - line-height: 20px; - } - - .quick-jumper { - height: 20px; - line-height: 20px; - - input { - padding: 3px 7px; - width: 40px; - height: 20px; - line-height: 20px; - } - } -} - -.@{prefixClass}.simple { - .prev, .next { + &-simple &-prev, &-simple &-next { border: none; height: 24px; line-height: 24px; @@ -204,11 +167,11 @@ font-size: 18px; } - .simple-pager { + &-simple &-simple-pager { float: left; margin-right: 8px; - .slash { + &-slash { margin: 0 10px; } @@ -222,6 +185,7 @@ padding: 5px 8px; width: 30px; min-height: 20px; + text-align: center; &:hover { @@ -232,3 +196,38 @@ } } +.@{prefixClass} { + + &.mini &-item { + border: none; + margin: 0; + min-width: 20px; + height: 20px; + line-height: 20px; + } + + &.mini &-prev, + &.mini &-next { + margin: 0; + min-width: 20px; + height: 20px; + line-height: 20px; + border: none; + } + + &.mini &-jump-prev, &.mini &-jump-next { + height: 20px; + line-height: 20px; + } + + &.mini &-options { + &-quick-jumper { + height: 20px; + line-height: 20px; + + input { + .input-sm; + } + } + } +} From f2126bc3437c123039d4d434167e4350d09276b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= Date: Tue, 14 Jul 2015 13:43:05 +0800 Subject: [PATCH 5/9] update rc-steps to 1.1.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e705b5cae3..013494b547 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "rc-progress": "~1.0.0", "rc-select": "~4.2.1", "rc-slider": "~1.2.4", - "rc-steps": "~1.1.3", + "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0" From 778634788df0ee45054543631d238fdbf5af6449 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= Date: Tue, 14 Jul 2015 13:43:25 +0800 Subject: [PATCH 6/9] =?UTF-8?q?=E8=B0=83=E6=95=B4steps=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style/components/steps.less | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/style/components/steps.less b/style/components/steps.less index de50a8cab1..4a0f8abe11 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -4,11 +4,11 @@ @process-icon-color: @primary-color; @process-title-color: #666; @process-description-color: @process-title-color; -@process-tail-color: #bcbcbc; -@wait-icon-color: #bcbcbc; +@process-tail-color: #e9e9e9; +@wait-icon-color: #ccc; @wait-title-color: #999; @wait-description-color: @wait-title-color; -@wait-tail-color: @wait-icon-color; +@wait-tail-color: @process-tail-color; @finish-icon-color: @process-icon-color; @finish-title-color: @wait-title-color; @finish-description-color: @finish-title-color; @@ -93,7 +93,9 @@ height: auto; > .@{stepsPrefixClass}-icon { font-size: 20px; - top: 0; + top: 2px; + width: 20px; + height: 20px; } } &.@{stepsPrefixClass}-status-process { @@ -134,6 +136,8 @@ &.anticon { font-size: 12px; + position: relative; + top: -2px; } } } @@ -167,7 +171,7 @@ > i { display: inline-block; background: @wait-tail-color; - height: 2px; + height: 1px; border-radius: 1px; width: 100%; .transition(background 0.3s ease); @@ -188,6 +192,7 @@ font-size: 12px; font-size: ~"9px \9"; // ie8-9 .scale(0.75); + top: -1px; } } .@{stepsPrefixClass}-main { From bdd9e335652a1ffab25f899f5c6fee69ab1fc150 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 14 Jul 2015 16:50:08 +0800 Subject: [PATCH 7/9] improve pagination style --- style/components/pagination.less | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/style/components/pagination.less b/style/components/pagination.less index 6b695876d7..bdc58fe4f0 100644 --- a/style/components/pagination.less +++ b/style/components/pagination.less @@ -1,6 +1,5 @@ @prefixClass: ant-pagination; - .@{prefixClass} { user-select: none; font-size: 12px; @@ -27,25 +26,26 @@ border: 1px solid #d9d9d9; background-color: #fff; margin-right: 8px; + transition: all 0.3s ease; a { text-decoration: none; color: #666; } - &:hover { - border-color: #2db7f5; + border-color: @primary-color; a { - color: #2db7f5; + color: @primary-color; } } &-active { - background-color: #2db7f5; - border: none; + background-color: @primary-color; + border-color: @primary-color; - a { + a, + &:hover a { color: #fff; } } @@ -63,7 +63,7 @@ &:hover { &:after { - color: #2db7f5; + color: @primary-color; } } @@ -111,10 +111,10 @@ } &:hover { - border-color: #2db7f5; + border-color: @primary-color; a { - color: #2db7f5; + color: @primary-color; } } @@ -157,8 +157,6 @@ } } - - &-simple &-prev, &-simple &-next { border: none; height: 24px; @@ -189,7 +187,7 @@ &:hover { - border-color: #2db7f5; + border-color: @primary-color; } } From fa6e97364a57f2d89d538d17323d53f253a1962c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= Date: Tue, 14 Jul 2015 17:57:32 +0800 Subject: [PATCH 8/9] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E8=A7=86=E8=A7=89review?= =?UTF-8?q?=E5=BB=BA=E8=AE=AE=EF=BC=8C=E5=88=A0=E6=8E=89=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E6=96=87=E5=AD=97=E8=AE=A9demo=E7=9C=8B=E8=B5=B7=E6=9D=A5?= =?UTF-8?q?=E6=9B=B4=E5=A5=BD=E7=9C=8B=E4=BA=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/steps/demo/simple.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md index eb7c49c366..f8b2540eff 100644 --- a/components/steps/demo/simple.md +++ b/components/steps/demo/simple.md @@ -18,7 +18,7 @@ var steps = [{ }, { status: 'process', title: '进行中', - description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶' + description: '这里是多信息的耶哦耶哦哦耶哦耶' }, { status: 'wait', title: '又一个待运行', From 4d9bbf8179abd1d727afb43a3173bd78edf618cc Mon Sep 17 00:00:00 2001 From: simaQ Date: Tue, 14 Jul 2015 18:14:58 +0800 Subject: [PATCH 9/9] update index.md --- components/slider/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/slider/index.md b/components/slider/index.md index 1061bc34d0..d8dd81ecb2 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -20,5 +20,6 @@ | step | Number | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除 | value | Number | 0 | 当前取值 | marks | Array | [] | 分段标记，标记每一个 step，如果 step 属性没有定义，则 `marks` 属性会被忽略 +| isIncluded | Boolean | true | 分段式滑块，值为 true 时表示值为包含关系，false 表示并列 | index | Number | 0 | 为具备 `step` 或者 `marks` 的 slider 提供滑块操作按钮最初的位置 | disabled | Boolean | false | 值为 `true` 时，滑块为 disable 禁用状态 \ No newline at end of file