From e434361f07ffa3be73abb2daae87320fb92da05b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 16 Jul 2015 16:48:06 +0800 Subject: [PATCH] update slider demo --- components/slider/demo/basic.md | 20 ++++------- components/slider/demo/icon-slider.md | 8 +++-- components/slider/demo/input-number-slider.md | 33 ++++++++----------- components/slider/demo/mark.md | 8 ----- components/slider/index.md | 4 +-- 5 files changed, 28 insertions(+), 45 deletions(-) diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md index 65268b67e3..9753ee29cc 100644 --- a/components/slider/demo/basic.md +++ b/components/slider/demo/basic.md @@ -2,15 +2,14 @@ - order: 0 -基本滑动条 +基本滑动条. --- ````jsx var Slider = antd.Slider; -React.render( -
+React.render(
@@ -18,13 +17,8 @@ React.render( ```` \ No newline at end of file +.code-box-demo .ant-slider { + margin-bottom: 50px; + margin-left: 15px; +} + diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md index 4298b57687..e4094d1bb6 100644 --- a/components/slider/demo/icon-slider.md +++ b/components/slider/demo/icon-slider.md @@ -2,6 +2,8 @@ - order: 2 +滑块左右可以设置图标来表达业务含义。 + --- ````jsx @@ -40,7 +42,7 @@ var IconSlider = React.createClass({ nextIcon = this.props.icon[1]; } - this.setState( + this.setState( { preIcon: preIcon, nextIcon: nextIcon, @@ -48,7 +50,7 @@ var IconSlider = React.createClass({ } ); }, - + render() { return (
@@ -91,4 +93,4 @@ React.render( .anticon.anticon-highlight { color: #666; } - \ No newline at end of file + diff --git a/components/slider/demo/input-number-slider.md b/components/slider/demo/input-number-slider.md index 6b5387c946..1753cbb3cc 100644 --- a/components/slider/demo/input-number-slider.md +++ b/components/slider/demo/input-number-slider.md @@ -2,7 +2,7 @@ - order: 1 - +和[数字输入框](/components/input-number/)组件保持同步。 --- @@ -16,30 +16,25 @@ var Test = React.createClass({ inputValue: 0 }; }, - onChange(v){ + onChange(value) { this.setState({ - inputValue: v + inputValue: value }); }, render() { - return ( -
-
- -
-
- -
-
- ); + 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 6b9abaaef9..4f1f486220 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -18,11 +18,3 @@ 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 d8dd81ecb2..a2d8684979 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -13,7 +13,7 @@ ## API -| 参数 | 类型 | 默认值 |说明 | +| 参数 | 类型 | 默认值 |说明 | |------------|----------------|-------------|--------------| | min | Number | 0 | 最小值 | max | Number | 100 | 最大值 @@ -22,4 +22,4 @@ | 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 +| disabled | Boolean | false | 值为 `true` 时,滑块为 disable 禁用状态