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

feat(Slider): add @slider-bar-height less var

Browse Source
This commit is contained in:
陈嘉涵 2020-01-27 12:21:37 +08:00
parent 1e9b8c8466
commit a5819c286e
5 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/slider/index.js
View File

@ -10,6 +10,7 @@ export default createComponent({
props: {
disabled: Boolean,
vertical: Boolean,
barHeight: [Number, String],
buttonSize: [Number, String],
activeColor: String,
inactiveColor: String,
@ -29,10 +30,6 @@ export default createComponent({
type: Number,
default: 0,
},
barHeight: {
type: [Number, String],
default: 2,
},
},
data() {
@ -49,7 +46,6 @@ export default createComponent({
buttonStyle() {
if (this.buttonSize) {
const size = addUnit(this.buttonSize);
return {
width: size,
height: size,

2
src/slider/index.less
View File

@ -18,6 +18,7 @@
&__bar {
position: relative;
height: @slider-bar-height;
background-color: @slider-active-background-color;
border-radius: inherit;
transition: width @animation-duration-fast;
@ -50,6 +51,7 @@
&--vertical {
display: inline-block;
width: @slider-bar-height;
height: 100%;
.van-slider__button-wrapper {

12
src/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-slider van-slider--disabled">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(238, 10, 36);">
<div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="custom-button">50</div>
</div>
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div style="height: 120px; padding-left: 30px;">
<div class="van-slider van-slider--vertical">
<div class="van-slider__bar" style="height: 50%; width: 2px;">
<div class="van-slider__bar" style="height: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>

14
src/slider/test/__snapshots__/index.spec.js.snap
View File

@ -12,7 +12,7 @@ exports[`bar-height prop 1`] = `
exports[`button-size prop 1`] = `
<div class="van-slider">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button" style="width: 10px; height: 10px;"></div>
</div>
@ -22,7 +22,7 @@ exports[`button-size prop 1`] = `
exports[`click bar 1`] = `
<div class="van-slider van-slider--disabled">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -32,7 +32,7 @@ exports[`click bar 1`] = `
exports[`click bar 2`] = `
<div class="van-slider">
<div class="van-slider__bar" style="width: 100%; height: 2px;">
<div class="van-slider__bar" style="width: 100%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -42,7 +42,7 @@ exports[`click bar 2`] = `
exports[`click vertical 1`] = `
<div class="van-slider van-slider--vertical">
<div class="van-slider__bar" style="height: 100%; width: 2px;">
<div class="van-slider__bar" style="height: 100%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -52,7 +52,7 @@ exports[`click vertical 1`] = `
exports[`drag button 1`] = `
<div class="van-slider van-slider--disabled">
<div class="van-slider__bar" style="width: 50%; height: 2px;">
<div class="van-slider__bar" style="width: 50%;">
<div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -62,7 +62,7 @@ exports[`drag button 1`] = `
exports[`drag button 2`] = `
<div class="van-slider">
<div class="van-slider__bar" style="width: 100%; height: 2px;">
<div class="van-slider__bar" style="width: 100%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>
@ -72,7 +72,7 @@ exports[`drag button 2`] = `
exports[`drag button vertical 1`] = `
<div class="van-slider van-slider--vertical">
<div class="van-slider__bar" style="height: 100%; width: 2px;">
<div class="van-slider__bar" style="height: 100%;">
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
<div class="van-slider__button"></div>
</div>

1
src/style/var.less
View File

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