feat: migrate Slider component

This commit is contained in:
chenjiahan
2020-07-12 15:16:56 +08:00
parent e111fd4208
commit 75d76d2cec
10 changed files with 962 additions and 8 deletions
@@ -0,0 +1,71 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-slider">
<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>
</div>
</div>
</div>
<div>
<div class="van-slider">
<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>
</div>
</div>
</div>
<div>
<div class="van-slider van-slider--disabled">
<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>
</div>
</div>
</div>
<div>
<div class="van-slider">
<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>
</div>
</div>
</div>
<div>
<div class="van-slider" style="height: 4px;">
<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="van-slider__button"></div>
</div>
</div>
</div>
</div>
<div>
<div class="van-slider">
<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>
</div>
</div>
</div>
<div>
<div style="height: 120px; padding-left: 30px;">
<div class="van-slider van-slider--vertical">
<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>
</div>
</div>
</div>
</div>
</div>
`;
@@ -0,0 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`bar-height prop 1`] = `
<div class="van-slider" style="height: 10px;">
<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>
</div>
</div>
`;
exports[`button-size prop 1`] = `
<div class="van-slider">
<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>
</div>
</div>
`;
exports[`click bar 1`] = `
<div class="van-slider van-slider--disabled">
<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>
</div>
</div>
`;
exports[`click bar 2`] = `
<div class="van-slider">
<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>
</div>
</div>
`;
exports[`click vertical 1`] = `
<div class="van-slider van-slider--vertical">
<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>
</div>
</div>
`;
exports[`drag button 1`] = `
<div class="van-slider van-slider--disabled">
<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>
</div>
</div>
`;
exports[`drag button 2`] = `
<div class="van-slider">
<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>
</div>
</div>
`;
exports[`drag button vertical 1`] = `
<div class="van-slider van-slider--vertical">
<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>
</div>
</div>
`;