From 4456d37f42c716ddf20318599afd78517ae8a72b Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 3 Sep 2024 19:36:42 +0800 Subject: [PATCH] fix: fix conflict --- src/slider/README.en-US.md | 100 ++++++++++++++++---------------- src/slider/README.md | 113 +++++++++++++++++++++---------------- 2 files changed, 113 insertions(+), 100 deletions(-) diff --git a/src/slider/README.en-US.md b/src/slider/README.en-US.md index b532750fc..5076b3611 100644 --- a/src/slider/README.en-US.md +++ b/src/slider/README.en-US.md @@ -5,62 +5,62 @@ ### Slider Props -| name | type | default | description | required | -| ------------------ | ---------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| style | Object | - | CSS(Cascading Style Sheets) | N | -| custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N | -| colors | Array | [] | `deprecated`。Typescript：`Array` | N | -| disabled | Boolean | undefined | \- | N | -| disabled-color | Array | [] | `deprecated`。Typescript：`Array` | N | -| label | String / Boolean | false | Typescript：`string \| boolean` | N | -| marks | Object / Array | {} | Typescript：`Record \| Array` | N | -| max | Number | 100 | \- | N | -| min | Number | 0 | \- | N | -| range | Boolean | false | \- | N | -| show-extreme-value | Boolean | false | \- | N | -| step | Number | 1 | \- | N | -| theme | String | default | `0.30.0`。options: default/capsule | N | -| value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N | -| default-value | Number / Array | undefined | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N | -| vertical | Boolean | false | \- | N | +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +colors | Array | [] | `deprecated`。Typescript：`Array` | N +disabled | Boolean | undefined | \- | N +disabled-color | Array | [] | `deprecated`。Typescript：`Array` | N +label | String / Boolean | false | Typescript：`string \| boolean` | N +marks | Object / Array | {} | Typescript：`Record \| Array` | N +max | Number | 100 | \- | N +min | Number | 0 | \- | N +range | Boolean | false | \- | N +show-extreme-value | Boolean | false | \- | N +step | Number | 1 | \- | N +theme | String | default | `0.30.0`。options: default/capsule | N +value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N +default-value | Number / Array | undefined | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N +vertical | Boolean | false | \- | N ### Slider Events -| name | params | description | -| --------- | ------------------------------------- | ----------- | -| change | `(value: SliderValue)` | \- | -| dragend | `(value: SliderValue, e: TouchEvent)` | \- | -| dragstart | `(e: TouchEvent)` | \- | - +name | params | description +-- | -- | -- +change | `(value: SliderValue)` | \- +dragend | `(value: SliderValue, e: TouchEvent)` | \- +dragstart | `(e: TouchEvent)` | \- ### Slider External Classes -| className | Description | -| -------------------- | ----------- | -| t-class | \- | -| t-class-bar | \- | -| t-class-bar-active | \- | -| t-class-bar-disabled | \- | -| t-class-cursor | \- | +className | Description +-- | -- +t-class | \- +t-class-bar | \- +t-class-bar-active | \- +t-class-bar-disabled | \- +t-class-cursor | \- + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. -| Name | Default Value | Description | -| --------------------------------- | ---------------------------- | ----------- | -| --td-slider-active-color | @brand-color | - | -| --td-slider-bar-height | 8rpx | - | -| --td-slider-bar-width | 8rpx | - | -| --td-slider-capsule-bar-color | @bg-color-component | - | -| --td-slider-capsule-bar-heihgt | 48rpx | - | -| --td-slider-capsule-bar-width | 48rpx | - | -| --td-slider-capsule-line-heihgt | 36rpx | - | -| --td-slider-default-color | @bg-color-component | - | -| --td-slider-default-color | @bg-color-component-disabled | - | -| --td-slider-disabled-color | @brand-color-disabled | - | -| --td-slider-disabled-text-color | @text-color-disabled | - | -| --td-slider-dot-bg-color | #fff | - | -| --td-slider-dot-color | @component-border | - | -| --td-slider-dot-disabled-bg-color | #fff | - | -| --td-slider-dot-disabled-color | #f3f3f3 | - | -| --td-slider-dot-size | 40rpx | - | -| --td-slider-text-color | @text-color-primary | - | +Name | Default Value | Description +-- | -- | -- +--td-slider-active-color | @brand-color | - +--td-slider-bar-height | 8rpx | - +--td-slider-bar-width | 8rpx | - +--td-slider-capsule-bar-color | @bg-color-component | - +--td-slider-capsule-bar-heihgt | 48rpx | - +--td-slider-capsule-bar-width | 48rpx | - +--td-slider-capsule-line-heihgt | 36rpx | - +--td-slider-default-color | @bg-color-component | - +--td-slider-default-color | @bg-color-component-disabled | - +--td-slider-disabled-color | @brand-color-disabled | - +--td-slider-disabled-text-color | @text-color-disabled | - +--td-slider-dot-bg-color | #fff | - +--td-slider-dot-color | @component-border | - +--td-slider-dot-disabled-bg-color | #fff | - +--td-slider-dot-disabled-border-color | #f3f3f3 | - +--td-slider-dot-size | 40rpx | - +--td-slider-text-color | @text-color-primary | - diff --git a/src/slider/README.md b/src/slider/README.md index a4974214f..797151bc1 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -62,65 +62,78 @@ isComponent: true {{ vertical }} + ## API ### Slider Props -| 名称 | 类型 | 默认值 | 描述 | 必传 | -| ------------------ | ---------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| style | Object | - | 样式 | N | -| custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N | -| colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array` | N | -| disabled | Boolean | undefined | 是否禁用组件 | N | -| disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array` | N | -| label | String / Boolean | false | 滑块当前值文本。
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N | -| marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5: '5¥', 10: '10%' }`。TS 类型：`Record \| Array` | N | -| max | Number | 100 | 滑块范围最大值 | N | -| min | Number | 0 | 滑块范围最小值 | N | -| range | Boolean | false | 双游标滑块 | N | -| show-extreme-value | Boolean | false | 是否边界值 | N | -| step | Number | 1 | 步长 | N | -| theme | String | default | `0.30.0`。滑块风格。可选项：default/capsule | N | -| value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N | -| default-value | Number / Array | undefined | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N | -| vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） | N | +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array` | N +disabled | Boolean | undefined | 是否禁用组件 | N +disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array` | N +label | String / Boolean | false | 滑块当前值文本。
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `${value}%` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N +marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5: '5¥', 10: '10%' }`。TS 类型：`Record \| Array` | N +max | Number | 100 | 滑块范围最大值 | N +min | Number | 0 | 滑块范围最小值 | N +range | Boolean | false | 双游标滑块 | N +show-extreme-value | Boolean | false | 是否边界值 | N +step | Number | 1 | 步长 | N +theme | String | default | `0.30.0`。滑块风格。可选项：default/capsule | N +value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N +default-value | Number / Array | undefined | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N +vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） | N ### Slider Events -| 名称 | 参数 | 描述 | -| --------- | ------------------------------------- | ---------------- | -| change | `(value: SliderValue)` | 滑块值变化时触发 | -| dragend | `(value: SliderValue, e: TouchEvent)` | 结束拖动时触发 | -| dragstart | `(e: TouchEvent)` | 开始拖动时触发 | - -| 类名 | 描述 | -| -------------------- | ---------------- | -| t-class | 根节点样式类 | -| t-class-bar | 滑道底部样式类 | -| t-class-bar-active | 滑道激活态样式类 | -| t-class-bar-disabled | 滑道禁用态样式类 | -| t-class-cursor | 游标样式类 | +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: SliderValue)` | 滑块值变化时触发 +dragend | `(value: SliderValue, e: TouchEvent)` | 结束拖动时触发 +dragstart | `(e: TouchEvent)` | 开始拖动时触发 +### Slider External Classes + +类名 | 描述 +-- | -- +t-class | 根节点样式类 +t-class-bar | 滑道底部样式类 +t-class-bar-active | 滑道激活态样式类 +t-class-bar-disabled | 滑道禁用态样式类 +t-class-cursor | 游标样式类 + +## FAQ + +当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染（在t-popup/t-dialog中同理）。如下： +```html + +``` +```js +const $slider = this.selectComponent('#slider'); +$slider.init(); +``` ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 -| 名称 | 默认值 | 描述 | -| --------------------------------- | ---------------------------- | ---------------------------- | -| --td-slider-active-color | @brand-color | - | -| --td-slider-bar-height | 8rpx | vertical为true时默认为400rpx | -| --td-slider-bar-width | 8rpx | vertical为true时有效 | -| --td-slider-capsule-bar-color | @bg-color-component | - | -| --td-slider-capsule-bar-heihgt | 48rpx | - | -| --td-slider-capsule-bar-width | 48rpx | vertical为true时有效 | -| --td-slider-capsule-line-heihgt | 36rpx | - | -| --td-slider-default-color | @bg-color-component | - | -| --td-slider-default-color | @bg-color-component-disabled | - | -| --td-slider-disabled-color | @brand-color-disabled | - | -| --td-slider-disabled-text-color | @text-color-disabled | - | -| --td-slider-dot-bg-color | #fff | - | -| --td-slider-dot-color | @component-border | - | -| --td-slider-dot-disabled-bg-color | #fff | - | -| --td-slider-dot-disabled-color | #f3f3f3 | - | -| --td-slider-dot-size | 40rpx | - | -| --td-slider-text-color | @text-color-primary | - | +名称 | 默认值 | 描述 +-- | -- | -- +--td-slider-active-color | @brand-color | - +--td-slider-bar-height | 8rpx | - +--td-slider-bar-width | 8rpx | - +--td-slider-capsule-bar-color | @bg-color-component | - +--td-slider-capsule-bar-heihgt | 48rpx | - +--td-slider-capsule-bar-width | 48rpx | - +--td-slider-capsule-line-heihgt | 36rpx | - +--td-slider-default-color | @bg-color-component | - +--td-slider-default-color | @bg-color-component-disabled | - +--td-slider-disabled-color | @brand-color-disabled | - +--td-slider-disabled-text-color | @text-color-disabled | - +--td-slider-dot-bg-color | #fff | - +--td-slider-dot-color | @component-border | - +--td-slider-dot-disabled-bg-color | #fff | - +--td-slider-dot-disabled-border-color | #f3f3f3 | - +--td-slider-dot-size | 40rpx | - +--td-slider-text-color | @text-color-primary | -