@tuya-miniapp/smart-ui 2.13.2-beta-0 → 2.13.2-beta-2

package/dist/nav-bar/README.md

@@ -0,0 +1,378 @@
+---
+category: 导航
+---
+
+# NavBar 导航栏
+
+### 介绍
+
+为页面提供导航功能，常用于页面顶部。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-nav-bar": "@tuya-miniapp/smart-ui/lib/nav-bar/index"
+}
+```
+
+## 代码演示
+
+### 首页
+
+首页的文本样式默认左对齐并加粗，点击左侧文本时触发事件；background `v2.7.0` 属性可以设置nav-bar的背景色。  
+通过 `slot="left"` 可在左侧区域插入自定义内容（如图标），插入的内容使用 `margin-left: auto` 可在不脱离文档流的情况下在左侧容器内居右排列 `v2.12.0`。
+
+```html
+<smart-nav-bar
+  left-text="Home"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+/>
+<smart-nav-bar
+  background="#E4EDFF"
+  left-text="HomeHomeHomeHomeHome"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+/>
+<smart-nav-bar
+  background="#E4EDFF"
+  custom-class="demo-nav-bar"
+  left-text="HomeHomeHomeHomeHome"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+>
+  <smart-icon 
+    style="margin-left: auto;padding-left: 16px;" 
+    slot="left" 
+    name="https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png" size="24px" 
+  />
+</smart-nav-bar>
+```
+
+```js
+Page({
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-单图标
+
+当中间标题内容比较长，且两侧内容较少时可以设置 `v2.7.3` `side-width` 为 `min`。
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  right-icon="{{ iconMore }}"
+  side-width="min"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-常见情况
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  right-icon="{{ iconMore }}"
+  side-width="mid"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+>
+  <smart-icon
+    slot="right"
+    size="24px"
+    style="margin-right: 16px;"
+    name="{{ iconHouse }}"
+  />
+</smart-nav-bar>
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  right-text="确认"
+  left-text="取消"
+  side-width="mid"
+  right-text-color="#F04C4C"
+  bind:click-right-text="onClickRightText"
+  bind:click-left-text="onClickLeftText"
+  bind:click-title="onClickTitle"
+/>
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  side-width="mid"
+  right-text="确认"
+  right-text-color="#F04C4C"
+  bind:click-right-text="onClickRightText"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import House from '@tuya-miniapp/icons/dist/svg/House';
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconHouse: House,
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+  onClickRightText() {
+    ty.showToast({ title: '点击右侧文本', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-短标题
+
+当两侧操作内容较多时可以设置 `side-width` `v2.7.3` 为 `max`，减小标题区域的大小。
+
+```html
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-arrow
+  side-width="max"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-text="Abbrechen"
+  right-text="Speichern"
+  right-text-color="#F04C4C"
+  side-width="max"
+  bind:click-left-text="onClickLeftText"
+  bind:click-title="onClickTitle"
+  bind:click-right-text="onClickRightText"
+/>
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-arrow
+  right-text="Speichern"
+  right-text-color="#F04C4C"
+  side-width="max"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+  bind:click-right-text="onClickRightText"
+/>
+```
+
+```js
+Page({
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+  onClickRightText() {
+    ty.showToast({ title: '点击右侧文本', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+});
+```
+
+### 自定义宽度 `v2.7.3`
+
+`side-width` 也支持传如 `100`、`100px`、`100rpx` 去自定义两边的宽度。
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  side-width="100px"
+  right-icon="{{ iconMore }}"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 左标题
+
+部分二级页面标题位于左侧，或同时附带 icon。
+
+```html
+<smart-nav-bar
+  left-text="Home"
+  left-text-type="title"
+  side-width="mid"
+  left-icon="https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png"
+  bind:click-left-icon="onClickLeftIcon"
+  bind:click-left-text="onClickLeftText"
+/>
+```
+
+```js
+Page({
+  onClickLeftIcon() {
+    ty.showToast({ title: '点击左侧图标', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数                | 说明                               | 类型      | 默认值  |
+| ------------------- | ---------------------------------- | --------- | ------- |
+| border              | 是否显示下边框                     | _boolean_ | `true` `v2.0.0` `false` `v2.7.0`  |
+| custom-style        | 根节点自定义样式                   | _string_  | -       |
+| fixed               | 是否固定在顶部                     | _boolean_ | `false` |
+| left-arrow          | 是否显示左侧箭头                   | _boolean_ | `false` |
+| left-arrow-aria-label `v2.13.0` | 左侧返回箭头的无障碍读屏文案 | _string_  | -       |
+| left-text           | 左侧文案                           | _string_  | `''`    |
+| left-text-type `v2.0.0`          | 左侧文本的样式类型，范围为 `home`、`title`、`back`                           | _string_  | `back`    |
+| left-icon `v2.0.0`         | 左侧 Icon                           | _string_  | `''`    |
+| left-icon-aria-label `v2.13.0` | 左侧图标按钮的无障碍读屏文案 | _string_  | -       |
+| left-icon-size `v2.0.0`        | 左侧 Icon 大小，默认为 32                           | _string \| number_  | `32`    |
+| round `v2.1.0`               | 是否显示圆角                     | _boolean_ | `false` |
+| placeholder         | 固定在顶部时是否开启占位           | _boolean_ | `false` |
+| right-text          | 右侧文案                           | _string_  | `''`    |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true`  |
+| title               | 标题                               | _string_  | `''`    |
+| z-index             | 元素 z-index                       | _number_  | `1`     |
+| right-text-color `v2.7.0` | 右侧文案的颜色    | _string_  | -   |
+| right-icon `v2.7.0` | 右侧图标    | _string_  | -   |
+| right-icon-aria-label `v2.13.0` | 右侧图标按钮的无障碍读屏文案 | _string_  | -   |
+| right-icon-color `v2.7.0` | 右侧图标颜色    | _string_  | -   |
+| right-icon-size `v2.7.0` | 右侧图标大小    | _number_  | `32px`   |
+| left-icon-color `v2.7.0` | 左侧图标颜色 （非返回 icon）    | _string_  | -   |
+| background `v2.7.0` | 整体背景色    | _string_  | -   |
+| side-width `v2.7.3` | 两边控制栏的宽度, 提供 `min`、`mid`、`max`三档内置值；也可以传具体宽度值    | _string\/number\/`min`\/`mid`\/`max`_  | `mid` `v2.7.3` `max` `v2.9.0`   |
+
+### Slot
+
+| 名称  | 说明               |
+| ----- | ------------------ |
+| left  | 自定义左侧区域内容 |
+| right | 自定义右侧区域内容 |
+| title | 自定义标题         |
+
+### Events
+
+| 事件名           | 说明               | 参数 |
+| ---------------- | ------------------ | ---- |
+| bind:click-left  | 点击左侧返回 icon 时触发 | -    |
+| bind:click-right | 点击右侧按钮时触发 | -    |
+| bind:click-title `v2.0.0` | 点击中央标题时触发 | -    |
+| bind:click-left-icon `v2.0.0` | 点击左侧 icon 时触发（非返回 icon） | -    |
+| bind:click-left-text `v2.0.0` | 点击左侧文本时触发 | -    |
+| bind:click-right-icon `v2.7.0` | 点击右侧图标时触发 | -    |
+| bind:click-right-text `v2.7.0` | 点击右侧文本时触发 | -    |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| title-class  | 标题样式类   |
+| left-icon-class `v2.0.0` | 左侧图标样式类 |
+| right-text-class `v2.1.0` | 右侧文字样式类 |
+| right-icon-class `v2.7.0` | 右侧图标样式类 |
+| left-text-class `v2.7.0` | 左侧文字样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --nav-bar-height    | _var(--app-device-navbar-height, 46px)_     | 导航栏高度 |
+| --nav-bar-round-min-height `v2.1.0`    | _56px_        | 导航栏圆角存在时的最小高度 |
+| --nav-bar-round-border-radius `v2.1.0`   | _16px 16px 0px 0px_     | 是否显示导航栏圆角 |
+| --nav-bar-background-color    | _var(--app-B2, #ffffff)_               | 导航栏背景色 |
+| --nav-bar-arrow-color         | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏箭头颜色 |
+| --nav-bar-icon-size `@deprecated v2.7.0`   | _32px_     | 导航栏图标大小 |
+| --nav-bar-icon-color          | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏图标颜色 |
+| --nav-bar-icon-margin `@deprecated v2.7.0`    | _0_      | 导航栏图标外边距 |
+| --nav-bar-text-font-size `v2.1.0`         | _16px_ `v2.1.0` _17px_ `v2.7.3`   | 导航栏侧边文字大小 |
+| --nav-bar-text-font-weight `v2.7.0`         | _600_ `v2.7.0` _normal_ `v2.7.3`   | 导航栏侧边文字字体字重 |
+| --nav-bar-text-color          | _var(--app-B2-N2, rgba(0, 0, 0, 1))_   | 导航栏文字颜色 |
+| --nav-bar-title-font-size     | _17px_                  | 导航栏标题文字大小 |
+| --nav-bar-title-font-weight   | _600_                                  | 导航栏标题字重 |
+| --nav-bar-title-text-color    | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏标题文字颜色 |
+| --nav-bar-home-font-size      | _22px_                                 | 导航栏首页文字大小 |
+| --nav-bar-home-font-weight    | _600_                                  | 导航栏首页字重 |
+| --nav-bar-home-text-color     | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏首页文字颜色 |
+| --nav-bar-right-text-color `v2.5.1`  | _var(--app-B2-N1, rgba(0, 0, 0, 1))_  | 导航栏右侧文字颜色 |
+| --nav-bar-title-max-width `v2.6.0`    | _56%_ `v2.6.0` _calc(100% - 98px - 16px)_ `v2.7.0`   | 导航栏标题的宽度 |
+| --nav-bar-side-width `v2.7.0`    | _98px_ `v2.7.0` _80px_ `v2.7.3`  | 两边默认宽度 |
+| --nav-bar-text-padding `v2.7.0`    | _20px_ `v2.7.0` _16px_ `v2.7.3`    | 两边文字内边距 |
+| --nav-bar-icon-padding `v2.7.0`    | _16px_   | 两边图标内边距 |
+| --nav-bar-title-margin `v2.7.0`    | _16px_   | 标题外边距 |
+| --nav-bar-home-max-width `v2.7.0`    | _calc(100% - 98px - 16px)_   | 小程序首页时左侧标题最大宽度 |
+| --nav-bar-side-width-min `v2.7.3`    | _40px_   | 侧边min时宽度 |
+| --nav-bar-side-width-max `v2.7.3`    | _105px_   | 侧边max时宽度 |
+
+
+
+

package/dist/normal-slider/README.md

@@ -0,0 +1,325 @@
+---
+category: 数据录入
+---
+
+# Slider 滑块
+
+### 介绍
+
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-slider": "@tuya-miniapp/smart-ui/lib/normal-slider/index"
+}
+```
+
+## 代码演示
+
+### 普通滑动条
+
+> 注意 instanceId 值必选，需要设置为一个字符串值且不能数字开头，每个 slider 实例的 instanceId 不同
+
+```html
+<smart-slider
+  instanceId="slider1"
+  trackStyle="height:4px"
+  barStyle="height:4px"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条
+
+设置 `step` 属性可开启间隔拖动模式
+
+```html
+<smart-slider
+  instanceId="slider2"
+  trackStyle="height:8px"
+  barStyle="height:8px"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:4px;"
+  activeStepStyle="background:#fff;"
+  showSteps="{{true}}"
+  step="{{10}}"
+  min="{{0}}"
+  max="{{100}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条隐藏滑块
+
+设置 `hideThumbButton` 为 `true` 可以隐藏滑块
+
+```html
+<smart-slider
+  instanceId="slider3"
+  trackStyle="height:40px;border-radius:16px;"
+  barStyle="height:40px;border-radius:16px;"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:12px;border-radius:4px;"
+  activeStepStyle="width:4px;height:12px;border-radius:4px;background:#fff;"
+  hideThumbButton="{{true}}"
+  showSteps="{{true}}"
+  step="{{30}}"
+  min="{{0}}"
+  max="{{90}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 拖动滑动条
+
+设置 `parcel` 为true，可以使滑块包裹在滑条内。
+
+```html
+<smart-slider
+  instanceId="slider4"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:13px;"
+  barStyle="height:22px;border-radius:13px;"
+  thumbStyle="width:20px;height:20px;background:#fff;border-radius:50%;"
+  parcelThumbWidth="{{18}}"
+  parcelThumbHeight="{{18}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式1
+
+可通过 `trackStyle`、`barStyle`、`thumbStyle` 自定义滑槽、滑动条、滑块的样式
+
+```html
+<smart-slider
+  instanceId="slider5"
+  trackStyle="height:45px;border-radius:8px;"
+  barStyle="height:45px;border-radius:8px;"
+  thumbStyle="width:15px;height:50px;background:#BBC5D4;border:2px solid #FFFFFF;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.5);border-radius:2px;"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式2
+
+```html
+<smart-slider
+  instanceId="slider6"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:5px;"
+  barStyle="height:22px;border-radius:5px;"
+  parcelThumbWidth="{{3}}"
+  parcelThumbHeight="{{16}}"
+  thumbStyle="width:5px;height:16px;background:#fff;"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 双滑块滑动条
+
+两个滑块的滑动条，需要引用：
+
+```json
+"usingComponents": {
+  "smart-range-slider": "@tuya-miniapp/smart-ui/lib/slider/index"
+}
+```
+
+```html
+<smart-range-slider
+  min="{{0}}"
+  max="{{100}}"
+  value="{{range}}"
+  bind:change="onRangeChange"
+  bar-height="4px"
+  inactive-color="#D8D9DC"
+  active-color="#007AFF"
+/>
+```
+
+```js
+Page({
+  data: {
+    range: [10, 40],
+  },
+  onRangeChange(event) {
+    this.setData({
+      range: event.detail,
+    });
+  },
+});
+```
+
+### 竖向
+
+```html
+<smart-slider
+  instanceId="slider7"
+  direction="vertical"
+  reverse
+  step="{{5}}"
+  min="{{0}}"
+  max="{{100}}"
+  parcel
+  parcelMargin="{{2}}"
+  useParcelPadding="{{false}}"
+  parcelThumbWidth="{{12}}"
+  parcelThumbHeight="{{2}}"
+  thumbStyle="width: 12px;height:2px;border-radius:2px;background: #FFFFFF;"
+  trackStyle="width:48px;height:203px;border-radius:10px;background:rgba(0, 0, 0, 0.08);"
+  barStyle="width:48px;height:114px;background:#1989FA;"
+/>
+```
+
+## API
+
+### Props
+
+| 参数                             | 说明                                   | 类型         | 默认值   |
+| -------------------------------- | -------------------------------------- | ------------ | -------- |
+| active-step-style                | 激活阶段样式                           | _string_     | null     |
+| bar-style                        | 滑条样式                               | _string_     | null     |
+| class-name                       | css 样式名                             | _string_     | null     |
+| direction                        | 滑条方向（"horizontal"                 | "vertical"） | _string_ | null |
+| disable                          | 是否禁用滑块                           | _boolean_    | false    |
+| enable-touch                     | 是否启用触摸跳跃                       | _boolean_    | true     |
+| enable-touch-bar                 | 是否启用触摸 bar 增加偏移              | _boolean_    | false    |
+| hidden                           | 是否隐藏组件                           | _boolean_    | null     |
+| hide-bar-on-first-render         | 是否在首次渲染时隐藏 bar               | _boolean_    | false    |
+| hide-thumb                       | 是否隐藏滑块                           | _boolean_    | false    |
+| hide-thumb-button                | 是否隐藏 thumb 按钮                    | _boolean_    | false    |
+| hot-area-style                   | 点击热区样式                           | _string_     | null     |
+| instance-id                      | 唯一 ID                                | _string_     | null     |
+| max                              | 最大值                                 | _number_     | 100      |
+| min                              | 最小值                                 | _number_     | 0        |
+| parcel                           | 是否启用 parcel 模式                   | _boolean_    | false    |
+| parcel-margin                    | parcel 模式下滑块边距                  | _number_     | 0        |
+| parcel-thumb-height              | parcel 模式下滑块高度                  | _number_     | null     |
+| parcel-thumb-width               | parcel 模式下滑块宽度                  | _number_     | null     |
+| reverse                          | 是否反转滑条                           | _boolean_    | false    |
+| show-steps                       | 是否显示阶段提示                       | _boolean_    | false    |
+| show-text                        | 是否在 bar 上显示文本                  | _boolean_    | null     |
+| step                             | 阶段值                                 | _number_     | 1        |
+| step-style                       | 阶段样式                               | _string_     | null     |
+| text-style                       | 文本样式                               | _string_     | null     |
+| text-template                    | 文本格式化模板，例如 "比率 {{text}} %" | _string_     | null     |
+| thumb-height                     | 滑块高度                               | _number_     | null     |
+| thumb-style                      | 滑块样式                               | _string_     | null     |
+| thumb-style-calc                 | 动态计算 thumb 样式                    | _null_       | null     |
+| thumb-style-render-formatter     | 自定义 thumb 样式渲染格式化函数        | _null_       | null     |
+| thumb-style-render-value-reverse | 是否反转 thumb 样式渲染的值            | _boolean_    | false    |
+| thumb-style-render-value-scale   | 自定义 thumb 样式渲染时的值缩放比例    | _number_     | 1        |
+| thumb-style-render-value-start   | 自定义 thumb 样式渲染时的起始值        | _number_     | 1        |
+| thumb-width                      | 滑块宽度                               | _number_     | null     |
+| thumb-wrap-style                 | 滑块包装样式                           | _null_       | null     |
+| track-style                      | 轨道样式                               | _string_     | null     |
+| value                            | 右滑块初始值/单向滑条初始值            | _number_     | 0        |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| bar | 滑动条插槽 |
+| thumb | 滑块插槽 |
+
+### Events
+
+| 事件名      | 说明         | 参数                         |
+| ----------- | ------------ | ---------------------------- |
+| bind:change | 值改变后触发 | event.detail.value: 当前进度 |
+| bind:end    | 拖动松手触发 | event.detail.value: 当前进度 |
+| bind:start  | 拖动前触发   | event.detail.value: 当前进度 |