Skip to content

Commit 7970bdd

Browse files
WeilinerLWeilinerL
committed
chore: build slider
1 parent 627b0fe commit 7970bdd

File tree

5 files changed

+400
-0
lines changed

5 files changed

+400
-0
lines changed

‎packages/mpx-cube-ui/lib/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 := $var(color-primary) // 已选择的颜色
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/lib/components/slider/css.rn.styl‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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
45+
text-align: right

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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: 26px
42+
overflow: visible
43+
margin: 0 2px
44+
pointer-events: none
45+
text-align: right
46+

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
<!-- 自定义滑块儿 -->
22+
<slot></slot>
23+
</view>
24+
<view
25+
wx:if="{{!customContent}}"
26+
class="cube-slider-thumb"
27+
wx:style="{{ thumbStyle }}"
28+
></view>
29+
</view>
30+
<view class="cube-slider-track" wx:style="{{ trackStyle }}">
31+
<view class="cube-slider-step" wx:style="{{ stepStyle }}"></view>
32+
</view>
33+
</view>
34+
<view wx:if="{{ showValueLable }}" class="cube-slider-value">
35+
<text
36+
numberOfLines@_ios|_android|_harmony="{{1}}"
37+
ellipsizeMode@_ios|_android|_harmony="clip"
38+
>{{ currentValue }}</text>
39+
</view>
40+
</view>
41+
</template>
42+
43+
<script src="./slider.js"></script>
44+
45+
<style lang="stylus">
46+
/* @mpx-if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') */
47+
@require './css.rn.styl'
48+
/* @mpx-else */
49+
@require './css.styl'
50+
/* @mpx-endif */
51+
</style>
52+
53+
54+
55+
<script type="application/json">
56+
{
57+
"styleIsolation": "shared",
58+
"component": true
59+
}
60+
</script>

0 commit comments

Comments
 (0)