diff --git a/demo/Slider/SliderDemo.jsx b/demo/Slider/SliderDemo.jsx new file mode 100644 index 00000000..0e0bedcb --- /dev/null +++ b/demo/Slider/SliderDemo.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import Slider from 'salt-slider'; +import './SliderDemo.styl' + +export default class App extends React.Component { + log = (name) => { + return (value) => { + console.log(`${name}: ${value}`); + }; + } + + render() { + return ( +
+

基本滑块

+ +

滑块-禁用

+ +

滑块-带刻度

+ +

滑块-自定义颜色

+ +
+ ) + } +} diff --git a/demo/Slider/SliderDemo.styl b/demo/Slider/SliderDemo.styl new file mode 100644 index 00000000..80e39ed2 --- /dev/null +++ b/demo/Slider/SliderDemo.styl @@ -0,0 +1,15 @@ +@require '../../dev/demo' +@require '../../src/Slider/Slider' + +.slider-demo-wrapper { + margin-bottom: 15px; + margin-left: 30px; + margin-right: 30px; +} + +.sub-title { + color: #888; + font-size: 14px; + padding: 30px 0 18px 0; + margin-left: 10px; +} diff --git a/demo/Slider/index.js b/demo/Slider/index.js new file mode 100644 index 00000000..3469e842 --- /dev/null +++ b/demo/Slider/index.js @@ -0,0 +1,11 @@ +import 'salt-context'; + +import Demo from './SliderDemo'; +import './SliderDemo.styl'; + +// 渲染 demo +if (window.FastClick) { + window.FastClick.attach(document.body); +} + +export default Demo; diff --git a/dev/demo.styl b/dev/demo.styl index 11445d17..ea88f615 100644 --- a/dev/demo.styl +++ b/dev/demo.styl @@ -1 +1 @@ -@require '/../style/theme/green/saltui'; \ No newline at end of file +@require '/../style/theme/salt-ui/saltui'; diff --git a/docs/Slider.md b/docs/Slider.md new file mode 100644 index 00000000..61c1e2b1 --- /dev/null +++ b/docs/Slider.md @@ -0,0 +1,24 @@ +## 滑动条 + +左边为最小值，右边为最大值。 + +## Props 定义 +所有 Props 都是可选的 + +配置项 | 类型 | 默认值 | 说明 +----|-----|------|------ +| min | number | 0 | 最小值 | +| max | number | 100 | 最大值 | +| step | number or null | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | +| value | number | | 设置当前取值。 | +| defaultValue | number | 0 | 设置初始取值。| +| disabled | boolean | false | 值为 `true` 时，滑块为禁用状态 | +| onChange | function | noop | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | +| onAfterChange | function | noop | 与 `ontouchend` 触发时机一致，把当前值作为参数传入。 | +| marks | object{number: string} | { } | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内 | +| dots | boolean | false | 是否只能拖拽到刻度上 | +| included | boolean | true | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | +| handleStyle | object | | 滑块的样式 | +| trackStyle | object | | 选中部分滑动条的样式 | +| railStyle | object | | 未选中部分 | +| className | string | salt-ui-slider | 自定义的 class 名称| diff --git a/package.json b/package.json index 27299215..941f33e7 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "rc-dialog": "^6.5.11", "rc-drawer": "^0.4.9", "rc-input-number": "^3.6.8", + "rc-slider": "^8.6.3", "rc-tabs": "^8.0.0", "rc-tooltip": "^3.5.0", "rc-util": "^4.5.1", @@ -87,4 +88,4 @@ "uploadcore": "^2.3.1", "uxcore-formatter": "^0.1.6" } -} \ No newline at end of file +} diff --git a/src/Slider/Slider.jsx b/src/Slider/Slider.jsx new file mode 100644 index 00000000..f673eb1c --- /dev/null +++ b/src/Slider/Slider.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import RcSlider from 'rc-slider/lib/Slider'; +import './Slider' +import Context from '../Context'; + +export default class Slider extends React.Component { + static defaultProps = { + className: 'salt-ui-slider', + }; + + render() { + return ( +
+ +
+ ); + } +} + +Slider.propTypes = { + value: PropTypes.number, + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + onChange: PropTypes.func, + onAfterChange: PropTypes.func, + defaultValue: PropTypes.number, + tipFormatter: PropTypes.func, + disabled: PropTypes.boolean, + handle: PropTypes.any, + className: PropTypes.string, + marks: PropTypes.object, + dots: PropTypes.boolean, + included: PropTypes.boolean, + handleStyle: React.CSSProperties, + trackStyle: React.CSSProperties, + railStyle: React.CSSProperties, +} diff --git a/src/Slider/Slider.styl b/src/Slider/Slider.styl new file mode 100644 index 00000000..cb30c602 --- /dev/null +++ b/src/Slider/Slider.styl @@ -0,0 +1,109 @@ + + +$sliderPrefixCls = 't-slider'; +$gray = #ddd; + +.{$sliderPrefixCls} { + position: relative; + + &-rail { + position: absolute; + width: 100%; + background-color: $gray; + height: 2px; + box-sizing: border-box; + } + + &-track { + position: absolute; + left: 0; + height: 2px; + border-radius: 2px; + background-color: $brand-primary; + } + + &-handle { + position: absolute; + margin-left: -12px; + margin-top: -10px; + width: 22px; + height: 22px; + cursor: pointer; + border-radius: 50%; + border: 2px solid $brand-primary; + background-color: #fff; + box-sizing: border-box; + + &:focus { + background-color: tint($brand-primary, 20%); + } + } + + &-mark { + position: absolute; + top: 20px; + left: 0; + width: 100%; + font-size: 12px; + } + + &-mark-text { + position: absolute; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + color: #000; + + &-active { + opacity: .3; + } + } + + &-step { + position: absolute; + width: 100%; + height: 4px; + background: transparent; + } + + &-dot { + position: absolute; + bottom: -5px; + margin-left: -4px; + width: 12px; + height: 12px; + border: 2px solid $gray; + background-color: #fff; + cursor: pointer; + border-radius: 50%; + vertical-align: middle; + + &:first-child { + margin-left: -4px; + } + + &:last-child { + margin-left: -4px; + } + + &-active { + border-color: $brand-primary; + } + } + + &-disabled { + opacity: .3; + + .{$sliderPrefixCls}-track { + height: 2px; + } + + .{$sliderPrefixCls}-handle, + .{$sliderPrefixCls}-mark-text, + .{$sliderPrefixCls}-dot { + cursor: not-allowed; + box-shadow: none; + } + } +} diff --git a/src/Slider/index.js b/src/Slider/index.js new file mode 100644 index 00000000..12b099f9 --- /dev/null +++ b/src/Slider/index.js @@ -0,0 +1 @@ +export default from './Slider';