docs(slider): update docs and demo (#458)

* fix(slider): update docs and demo

* docs(slider): update docs and demo

* fix(slider): update snap

src/slider/__test__/demo.test.jsx

@@ -8,6 +8,8 @@ import disableVue from '@/slider/demos/disable.vue';
 import markVue from '@/slider/demos/mark.vue';
 import mobileVue from '@/slider/demos/mobile.vue';
 import rangeVue from '@/slider/demos/range.vue';
+import titleVue from '@/slider/demos/title.vue';
+import unZeroVue from '@/slider/demos/unZero.vue';
 import valueVue from '@/slider/demos/value.vue';
 
 const mapper = {
@@ -16,6 +18,8 @@ const mapper = {
   markVue,
   mobileVue,
   rangeVue,
+  titleVue,
+  unZeroVue,
   valueVue,
 };
 

src/slider/demos/base.vue

@@ -1,12 +1,11 @@
 <template>
-  <t-slider v-model="value" :label="label" :on-change="onChange" />
+  <t-slider v-model="value" :label="false" :on-change="onChange" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const value = ref(60);
-const label = ref(false);
+const value = ref(0);
 const onChange = ($event: number | number[]) => {
   console.log(`change to ${$event}`);
 };

src/slider/demos/disable.vue

@@ -1,34 +1,3 @@
 <template>
-  <div class="section">
-    <t-slider :default-value="60" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="30" :min="30" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="50" :label="label" :marks="marks" disabled />
-  </div>
-  <div class="section">
-    <t-slider :default-value="[30, 70]" range disabled />
-  </div>
+  <t-slider :default-value="30" :min="30" disabled :label="false" />
 </template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const marks = ref({ 0: '小', 50: '中', 100: '大' });
-const label = ref(false);
-</script>
-
-<style lang="less" scoped>
-.section {
-  // display: flex;
-  align-items: center;
-  padding-top: 16px;
-  padding-bottom: 16px;
-
-  & + .section {
-    margin-top: 16px;
-  }
-}
-</style>

src/slider/demos/mark.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-slider v-model="value" :label="label" :marks="marks" />
+  <t-slider v-model="value" :label="label" :marks="marks" :step="50" />
 </template>
 
 <script lang="ts" setup>
@@ -8,10 +8,4 @@ import { ref } from 'vue';
 const value = ref(50);
 const label = ref(false);
 const marks = ref({ 0: '小', 50: '中', 100: '大' });
-// const marks = ref([0, 50, 100]);
-// const marks = ref({
-//   0: (val: number) => `${val}%`,
-//   50: (val: number) => `${val}%`,
-//   100: (val: number) => `${val}%`,
-// });
 </script>

src/slider/demos/mobile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tdesign-mobile-demo">
     <h1 class="title">Slider 滑动选择器</h1>
-    <p class="summary">滑动滑块来选择一个数值，在具体场景中也可以增加来刻度和展示数值来方便用户使用</p>
+    <p class="summary">用于选择横轴上的数值、区间、档位</p>
     <tdesign-demo-block title="01 类型" summary="基础滑动选择器">
       <div class="slider-demo">
         <BaseDemo />
@@ -14,7 +14,7 @@
     </tdesign-demo-block>
     <tdesign-demo-block summary="起始非零滑动选择器">
       <div class="slider-demo">
-        <t-slider :default-value="30" :min="30"> </t-slider>
+        <UnZeroDemo />
       </div>
     </tdesign-demo-block>
     <tdesign-demo-block summary="带刻度滑动选择器">
@@ -32,6 +32,16 @@
         <DisableDemo />
       </div>
     </tdesign-demo-block>
+    <tdesign-demo-block title="03 规格" summary="无标题滑动选择器">
+      <div class="slider-demo">
+        <BaseDemo />
+      </div>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="有标题滑动选择器">
+      <div class="slider-demo">
+        <TitleDemo />
+      </div>
+    </tdesign-demo-block>
   </div>
 </template>
 
@@ -41,6 +51,8 @@ import MarkDemo from './mark.vue';
 import ValueDemo from './value.vue';
 import RangeDemo from './range.vue';
 import DisableDemo from './disable.vue';
+import UnZeroDemo from './unZero.vue';
+import TitleDemo from './title.vue';
 </script>
 
 <style scoped>

src/slider/demos/title.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex">
+    <span :style="{ width: '120px', 'margin-right': '10px' }"> 选择器标题 </span>
+    <t-slider v-model="value" :label="false" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+<style>
+.flex {
+  display: flex;
+  align-items: center;
+}
+</style>

src/slider/demos/unZero.vue

@@ -0,0 +1,3 @@
+<template>
+  <t-slider :default-value="30" :min="30" :max="200" :label="false"> </t-slider>
+</template>

src/slider/demos/value.vue

@@ -5,5 +5,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const value = ref(60);
+const value = ref(50);
 </script>