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/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 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 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: '又一个待运行', diff --git a/package.json b/package.json index e705b5cae3..e30eb74cf6 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "rc-pagination": "^1.0.0", "rc-progress": "~1.0.0", "rc-select": "~4.2.1", - "rc-slider": "~1.2.4", - "rc-steps": "~1.1.3", + "rc-slider": "^1.2.5", + "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0" diff --git a/style/components/pagination.less b/style/components/pagination.less index 95f91f11c4..bdc58fe4f0 100644 --- a/style/components/pagination.less +++ b/style/components/pagination.less @@ -1,5 +1,4 @@ -@prefixClass: rc-pagination; - +@prefixClass: ant-pagination; .@{prefixClass} { user-select: none; @@ -15,7 +14,7 @@ visibility: hidden; } - .@{prefixClass}-item { + &-item { cursor: pointer; border-radius: 6px; min-width: 28px; @@ -27,31 +26,32 @@ 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; + &-active { + background-color: @primary-color; + border-color: @primary-color; - a { + a, + &:hover a { color: #fff; } } } - .jump-prev, .jump-next { + &-jump-prev, &-jump-next { &:after { content: "•••"; display: block; @@ -63,13 +63,13 @@ &:hover { &:after { - color: #2db7f5; + color: @primary-color; } } } - .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 { @@ -111,92 +111,53 @@ } &:hover { - border-color: #2db7f5; + border-color: @primary-color; a { - color: #2db7f5; + color: @primary-color; } + } - &.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 +165,11 @@ font-size: 18px; } - .simple-pager { + &-simple &-simple-pager { float: left; margin-right: 8px; - .slash { + &-slash { margin: 0 10px; } @@ -222,13 +183,49 @@ padding: 5px 8px; width: 30px; min-height: 20px; + text-align: center; &:hover { - border-color: #2db7f5; + border-color: @primary-color; } } } } +.@{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; + } + } + } +} 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 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 {