Skip to content

Commit 6dcc286

Browse files
WeilinerLWeilinerL
committed
feat: slider
1 parent 70cfdb0 commit 6dcc286

File tree

7 files changed

+399
-1
lines changed

7 files changed

+399
-1
lines changed

‎docs/config/sidebar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@ module.exports = [
128128
{
129129
title: 'Switch 滑动开关',
130130
path: '/components/base/switch'
131+
},
132+
{
133+
title: 'Slider 滑动选择器',
134+
path: '/components/base/slider'
131135
}
132136
]
133137
},

‎example/common/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export default {
6363
'date-picker',
6464
'time-picker',
6565
'rate',
66-
'switch'
66+
'switch',
67+
'slider'
6768
]
6869
},
6970
{

‎packages/mpx-cube-ui/src/common/stylus/theme/components/slider.styl‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// @type slider
2+
$slider-active-color := #e8864c // 已选择的颜色
3+
$slider-background-color := #e9e9e9 // 背景条的颜色
4+
$slider-block-color := #ffffff // 滑块的颜色
5+
$slider-padding := 8px 0 // 轨道padding
6+
$slider-track-height := 4px // 轨道高度

‎packages/mpx-cube-ui/src/components/slider/css.rn.styl‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@require "../../common/stylus/variable.rn.styl"
2+
@require "../../common/stylus/theme/components/slider.styl"
3+
4+
.cube-slider
5+
position: relative
6+
display: flex
7+
align-items: center
8+
9+
.cube-slider-tab-area
10+
flex: 1 0 auto
11+
display: flex
12+
align-items: center
13+
padding: $var(slider-padding)
14+
min-height: $var(slider-track-height)
15+
16+
.cube-slider-handle
17+
position: absolute
18+
transform: translateX(-50%)
19+
z-index: 1
20+
21+
.cube-slider-thumb
22+
background-color: $var(slider-block-color)
23+
border-radius: 100%
24+
25+
.cube-slider-track
26+
position: absolute
27+
left: 0
28+
width: 100%
29+
height: $var(slider-track-height)
30+
background-color: $var(slider-background-color)
31+
border-radius: ($slider-track-height / 2)
32+
33+
.cube-slider-step
34+
height: 100%
35+
background-color: $var(slider-active-color)
36+
border-radius: ($slider-track-height / 2)
37+
38+
.cube-slider-value
39+
position relative
40+
z-index: 1
41+
width: 26px
42+
overflow: visible
43+
margin: 0 2px
44+
pointer-events: none

‎packages/mpx-cube-ui/src/components/slider/css.styl‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@require "../../common/stylus/variable.styl"
2+
@require "../../common/stylus/theme/components/slider.styl"
3+
4+
.cube-slider
5+
position: relative
6+
display: flex
7+
align-items: center
8+
9+
.cube-slider-tab-area
10+
position: relative
11+
flex: 1 0 auto
12+
display: flex
13+
align-items: center
14+
padding: $var(slider-padding)
15+
min-height: $var(slider-track-height)
16+
17+
.cube-slider-handle
18+
position: absolute
19+
transform: translateX(-50%)
20+
z-index: 1
21+
22+
.cube-slider-thumb
23+
background-color: $var(slider-block-color)
24+
border-radius: 100%
25+
26+
.cube-slider-track
27+
position: absolute
28+
left: 0
29+
width: 100%
30+
height: $var(slider-track-height)
31+
background-color: $var(slider-background-color)
32+
border-radius: ($slider-track-height / 2)
33+
34+
.cube-slider-step
35+
height: 100%
36+
background-color: $var(slider-active-color)
37+
border-radius: ($slider-track-height / 2)
38+
.cube-slider-value
39+
position relative
40+
z-index: 1
41+
width: 20px
42+
overflow: visible
43+
margin: 0 2px
44+
pointer-events: none
45+

‎packages/mpx-cube-ui/src/components/slider/index.mpx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<view
3+
wx:class="{{ sliderClass }}"
4+
wx:style="{{ containerStyle }}"
5+
>
6+
<view
7+
wx:ref
8+
class="cube-slider-tab-area"
9+
bind:tap="onClick"
10+
>
11+
<!-- 滑块儿容器 -->
12+
<view
13+
class="cube-slider-handle"
14+
wx:style="{{ handleStyle }}"
15+
catch:touchstart="startHandler"
16+
catch:touchmove="moveHandler"
17+
catch:touchend="endHandler"
18+
>
19+
<!-- 滑块儿 -->
20+
<view class="cube-slider-thumb-custom" wx:style="{{ { display: customContent ? '' : 'none' } }}">
21+
<slot></slot>
22+
</view>
23+
<view
24+
wx:if="{{!customContent}}"
25+
class="cube-slider-thumb"
26+
wx:style="{{ thumbStyle }}"
27+
></view>
28+
</view>
29+
<view class="cube-slider-track" wx:style="{{ trackStyle }}">
30+
<view class="cube-slider-step" wx:style="{{ stepStyle }}"></view>
31+
</view>
32+
</view>
33+
<view wx:if="{{ showValueLable }}" class="cube-slider-value">
34+
<text
35+
numberOfLines@_ios|_android|_harmony="{{1}}"
36+
ellipsizeMode@_ios|_android|_harmony="clip"
37+
>{{ currentValue }}</text>
38+
</view>
39+
</view>
40+
</template>
41+
42+
<script lang="ts" src="./slider.ts"></script>
43+
44+
<style lang="stylus">
45+
/* @mpx-if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') */
46+
@require './css.rn.styl'
47+
/* @mpx-else */
48+
@require './css.styl'
49+
/* @mpx-endif */
50+
</style>
51+
52+
<script type="application/json">
53+
{
54+
"styleIsolation": "shared",
55+
"component": true
56+
}
57+
</script>

0 commit comments

Comments
 (0)