blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(Slider): add more css variables (#4305)

Browse Source 
* feat(Slider): add more css variables

* fix(Slider): remove barHeight default value
This commit is contained in:
nemo-shen 2021-06-29 09:42:46 +08:00 committed by GitHub
parent c416ff16b6
commit 6e7bebdb32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/common/style/var.less
View File

@ -455,6 +455,7 @@
@slider-active-background-color: @blue; @slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-3; @slider-inactive-background-color: @gray-3;
@slider-disabled-opacity: @disabled-opacity; @slider-disabled-opacity: @disabled-opacity;
@slider-bar-height: 2px;
@slider-button-width: 24px; @slider-button-width: 24px;
@slider-button-height: 24px; @slider-button-height: 24px;
@slider-button-border-radius: 50%; @slider-button-border-radius: 50%;

20
packages/slider/README.md
View File

@ -85,16 +85,16 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | -------------- | -------------------------------- | ------------------ | --------- | ---- |
| value | 当前进度百分比，取值范围为 0-100 | _number_ | `0` | - | | value | 当前进度百分比，取值范围为 0-100 | _number_ | `0` | - |
| disabled | 是否禁用滑块 | _boolean_ | `false` | - | | disabled | 是否禁用滑块 | _boolean_ | `false` | - |
| max | 最大值 | _number_ | `100` | - | | max | 最大值 | _number_ | `100` | - |
| min | 最小值 | _number_ | `0` | - | | min | 最小值 | _number_ | `0` | - |
| step | 步长 | _number_ | `1` | - | | step | 步长 | _number_ | `1` | - |
| bar-height | 进度条高度，默认单位为 `px` | _string \| number_ | `2px` | - | | bar-height | 进度条高度，默认单位为 `px` | _string \| number_ | `2px` | - |
| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | - | | active-color | 进度条激活态颜色 | _string_ | `#1989fa` | - |
| inactive-color | 进度条默认颜色 | _string_ | `#e5e5e5` | - | | inactive-color | 进度条默认颜色 | _string_ | `#e5e5e5` | - |
### Events ### Events

18
packages/slider/index.less
View File

@ -3,6 +3,7 @@
.van-slider { .van-slider {
position: relative; position: relative;
.theme(height, '@slider-bar-height');
.theme(border-radius, '@border-radius-max'); .theme(border-radius, '@border-radius-max');
.theme(background-color, '@slider-inactive-background-color'); .theme(background-color, '@slider-inactive-background-color');
@ -18,16 +19,19 @@
&__bar { &__bar {
position: relative; position: relative;
border-radius: inherit; width: 100%;
.theme(transition, 'width @animation-duration-fast'); height: 100%;
.theme(background-color, '@slider-active-background-color'); .theme(background-color, '@slider-active-background-color');
border-radius: inherit;
.theme(transition, 'all @animation-duration-fast');
} }
&__button { &__button {
width: @slider-button-width; .theme(width, '@slider-button-width');
height: @slider-button-height; .theme(height, '@slider-button-height');
border-radius: @slider-button-border-radius; .theme(border-radius, '@slider-button-border-radius');
box-shadow: @slider-button-box-shadow; .theme(box-shadow, '@slider-button-box-shadow');
.theme(background-color, '@slider-button-background-color'); .theme(background-color, '@slider-button-background-color');
&-wrapper { &-wrapper {
@ -39,6 +43,6 @@
} }
&--disabled { &--disabled {
opacity: @slider-disabled-opacity; .theme(opacity, '@slider-disabled-opacity');
} }
} }

5
packages/slider/index.ts
View File

@ -32,10 +32,7 @@ VantComponent({
} }
}, },
}, },
barHeight: { barHeight: null,
type: null,
value: 2,
},
}, },
created() { created() {

12
packages/slider/index.wxml
View File

@ -1,17 +1,17 @@
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" /> <wxs src="../wxs/style.wxs" module="style" />
<view <view
class="custom-class {{ utils.bem('slider', { disabled }) }}" class="custom-class {{ utils.bem('slider', { disabled }) }}"
style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}" style="{{ style({ background: inactiveColor, height: utils.addUnit(barHeight) }) }}"
bind:tap="onClick" bind:tap="onClick"
> >
<view <view
class="van-slider__bar" class="{{ utils.bem('slider__bar') }}"
style="{{ barStyle }};{{ computed.barStyle(barHeight, activeColor) }}" style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
> >
<view <view
class="van-slider__button-wrapper" class="{{ utils.bem('slider__button-wrapper') }}"
bind:touchstart="onTouchStart" bind:touchstart="onTouchStart"
catch:touchmove="onTouchMove" catch:touchmove="onTouchMove"
bind:touchend="onTouchEnd" bind:touchend="onTouchEnd"
@ -23,7 +23,7 @@
/> />
<view <view
wx:else wx:else
class="van-slider__button" class="{{ utils.bem('slider__button') }}"
/> />
</view> </view>
</view> </view>