Skip to content

Commit

Permalink
fix: slider vertical demo (#1918)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PengYYYYY
PengYYYYY authored Oct 28, 2022
1 parent 482f344 commit 6cfbda9
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 3 deletions.
3 changes: 2 additions & 1 deletion src/slider/_example/vertical.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<t-space class="slider-demo-container">
<t-space size="200px" class="slider-demo-container">
<t-slider v-model="value1" :layout="layout" :show-tooltip="true" />

<t-slider v-model="value2" :layout="layout" range :show-tooltip="true" />
Expand All @@ -24,5 +24,6 @@ export default defineComponent({
<style>
.slider-demo-container {
padding: 30px 24px;
height: 300px;
}
</style>
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105590,7 +105590,7 @@ exports[`csr snapshot test > csr test ./src/slider/_example/step.vue 1`] = `
exports[`csr snapshot test > csr test ./src/slider/_example/vertical.vue 1`] = `
<div
class="t-space t-space-horizontal slider-demo-container"
style="gap: 16px;"
style="gap: 200px;"
>


Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -872,7 +872,7 @@ exports[`ssr snapshot test > ssr test ./src/slider/_example/min-and-max.vue 1`]

exports[`ssr snapshot test > ssr test ./src/slider/_example/step.vue 1`] = `"<div class=\\"t-space t-space-vertical slider-demo-container\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container\\" show-tooltip=\\"true\\"><div class=\\"t-slider\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"horizontal\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"\\"><div class=\\"t-slider__track\\" style=\\"width:12%;left:0%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"left:12%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----><!----></div></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container\\" show-tooltip=\\"true\\"><div class=\\"t-slider\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"horizontal\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"\\"><div class=\\"t-slider__track\\" style=\\"width:40%;left:30%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"left:30%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><div class=\\"t-slider__button-wrapper\\" style=\\"left:70%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----></div></div><!----></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/slider/_example/vertical.vue 1`] = `"<div class=\\"t-space t-space-horizontal slider-demo-container\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container is-vertical\\" show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:12%;bottom:0%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:12%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----><!----></div></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container is-vertical\\" show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:40%;bottom:30%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:30%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:70%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----></div></div><!----></div></div><!----><!--]--><!--]--></div>"`;
exports[`ssr snapshot test > ssr test ./src/slider/_example/vertical.vue 1`] = `"<div class=\\"t-space t-space-horizontal slider-demo-container\\" style=\\"gap:200px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container is-vertical\\" show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:12%;bottom:0%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:12%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----><!----></div></div><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-slider__container is-vertical\\" show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:40%;bottom:30%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:30%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:70%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----></div></div><!----></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/slider/_example/vertical-marks.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"vertical-marks-block\\"><div class=\\"t-slider__container is-vertical\\" vertical show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:12%;bottom:0%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:12%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><!----><div><div><!--[--><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(100% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(80% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(60% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(40% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(20% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(0% - 1px);\\"></div><!--]--></div><div class=\\"t-slider__mark\\"><!--[--><div class=\\"t-slider__mark-text\\" style=\\"top:calc(100% - 1px);\\">0°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(80% - 1px);\\">20°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(60% - 1px);\\">40°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(40% - 1px);\\">60°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(20% - 1px);\\"><span style=\\"color: #0052d9\\">80°C</span></div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(0% - 1px);\\"><span style=\\"color: #0052d9\\">100°C</span></div><!--]--></div></div></div></div><!----></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"vertical-marks-block\\"><div class=\\"t-slider__container is-vertical\\" vertical show-tooltip=\\"true\\"><div class=\\"t-slider is-vertical t-slider--vertical\\" role=\\"slider\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" aria-orientation=\\"vertical\\" aria-disabled=\\"false\\"><div class=\\"t-slider__rail\\" style=\\"height:100%;\\"><div class=\\"t-slider__track\\" style=\\"height:40%;bottom:30%;\\"></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:30%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><div class=\\"t-slider__button-wrapper\\" style=\\"bottom:70%;\\" tabindex=\\"0\\" show-tooltip=\\"true\\"><!--[--><div class=\\"t-slider__button\\"></div><!----><!--]--></div><!----><div><div><!--[--><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(100% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(80% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(60% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(40% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(20% - 1px);\\"></div><div class=\\"t-slider__stop t-slider__mark-stop\\" style=\\"top:calc(0% - 1px);\\"></div><!--]--></div><div class=\\"t-slider__mark\\"><!--[--><div class=\\"t-slider__mark-text\\" style=\\"top:calc(100% - 1px);\\">0°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(80% - 1px);\\">20°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(60% - 1px);\\">40°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(40% - 1px);\\">60°C</div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(20% - 1px);\\"><span style=\\"color: #0052d9\\">80°C</span></div><div class=\\"t-slider__mark-text\\" style=\\"top:calc(0% - 1px);\\"><span style=\\"color: #0052d9\\">100°C</span></div><!--]--></div></div></div></div><!----></div></div></div><!----><!--]--><!--]--></div>"`;

Expand Down

0 comments on commit 6cfbda9

Please sign in to comment.