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

2
src/slider/index.less
View File

@ -18,6 +18,7 @@
&__bar { &__bar {
position: relative; position: relative;
height: @slider-bar-height;
background-color: @slider-active-background-color; background-color: @slider-active-background-color;
border-radius: inherit; border-radius: inherit;
transition: width @animation-duration-fast; transition: width @animation-duration-fast;
@ -50,6 +51,7 @@
&--vertical { &--vertical {
display: inline-block; display: inline-block;
width: @slider-bar-height;
height: 100%; height: 100%;
.van-slider__button-wrapper { .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> <div>
<div class="van-slider"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-slider"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-slider van-slider--disabled"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-slider"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-slider"> <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 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 class="custom-button">50</div>
</div> </div>
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div style="height: 120px; padding-left: 30px;"> <div style="height: 120px; padding-left: 30px;">
<div class="van-slider van-slider--vertical"> <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 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 class="van-slider__button"></div>
</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`] = ` exports[`button-size prop 1`] = `
<div class="van-slider"> <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 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 class="van-slider__button" style="width: 10px; height: 10px;"></div>
</div> </div>
@ -22,7 +22,7 @@ exports[`button-size prop 1`] = `
exports[`click bar 1`] = ` exports[`click bar 1`] = `
<div class="van-slider van-slider--disabled"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -32,7 +32,7 @@ exports[`click bar 1`] = `
exports[`click bar 2`] = ` exports[`click bar 2`] = `
<div class="van-slider"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -42,7 +42,7 @@ exports[`click bar 2`] = `
exports[`click vertical 1`] = ` exports[`click vertical 1`] = `
<div class="van-slider van-slider--vertical"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -52,7 +52,7 @@ exports[`click vertical 1`] = `
exports[`drag button 1`] = ` exports[`drag button 1`] = `
<div class="van-slider van-slider--disabled"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -62,7 +62,7 @@ exports[`drag button 1`] = `
exports[`drag button 2`] = ` exports[`drag button 2`] = `
<div class="van-slider"> <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 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 class="van-slider__button"></div>
</div> </div>
@ -72,7 +72,7 @@ exports[`drag button 2`] = `
exports[`drag button vertical 1`] = ` exports[`drag button vertical 1`] = `
<div class="van-slider van-slider--vertical"> <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 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 class="van-slider__button"></div>
</div> </div>

1
src/style/var.less
View File

@ -590,6 +590,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%;