SliderCard 滚动条卡片
代码演示
Studio 风格
import { ClassicSliderCard, ClassicLargeSliderCard } from 'tuya-panel-classic-kit';<ClassicSliderCardstyle={{ marginTop: 20 }}title="Slider Card"icon={TuyaRNSvgs.power}value={value}unit="%"handValueChange={setValue}canTouchTrack/><ClassicLargeSliderCardicon={TuyaRNSvgs.power}showIconBgiconBgColor={{deg: 90,stops: {'0%': 'red','100%': 'yellow',},}}style={{ marginTop: 20 }}title="Thick sliders"unit="%"value={value}handSlidingComplete={setValue}disabled/>
北欧风
import { NordicLargeSliderCard } from 'tuya-panel-nordic-kit';<NordicLargeSliderCardtitle="The wind speed"icon={TuyaRNSvgs.power}maximumValue={enumValue.length - 1}minimumValue={0}value={0}renderValue={value => enumValue[value]}/>;
亚克力风格
import { AcrylicSliderCard } from 'tuya-panel-acrylic-kit';<AcrylicSliderCardiconSize={20}title="Function"icon={IMAGE}bothSideIcons={[{ icon: IMAGE, isImage: true },{ icon: IMAGE, isImage: true },]}bothSideIconIsImageiconIsImagevalue={value1}bottomPromptTexts={['Low', 'Max']}handValueChange={setValue1}/><AcrylicSliderCardstyle={{ marginTop: 20 }}iconSize={20}iconIsImagetitle="Function"icon={IMAGE}bothSideIcons={[{ icon: TuyaRNSvgs.power }, { icon: TuyaRNSvgs.power }]}value={value1}bottomPromptTexts={['min', 'max']}handSlidingComplete={setValue1}/><AcrylicSliderCardstyle={{ marginTop: 20 }}iconSize={20}title="Function"icon={TuyaRNSvgs.power}maximumValue={enumValue.length - 1}minimumValue={0}value={0}bottomPromptTexts={['min', 'max']}renderValue={value => enumValue[value]}/>
API
ClassicSliderCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| sliderProps | Slider props 文档：https://panel-docs.tuyacn.com/docs/data-entry/slider | SliderProps | -- |
| style | 外层容器样式 | StyleProp | -- |
| titleStyle | 标题容器样式 | StyleProp | -- |
| titleTextStyle | 标题字体样式 | StyleProp | -- |
| contentStyle | 内容容器样式 | StyleProp | -- |
| thumbStyle | Slider滑块样式 | StyleProp | -- |
| theme | SliderProps.theme 文档：https://panel-docs.tuyacn.com/docs/data-entry/slider | Record | -- |
| backgroundColor | 组件背景颜色 | string | -- |
| radius | 组件背景圆角 | number | -- |
| maximumValue | 最大值 | number | 100 |
| minimumValue | 最小值 | number | 0 |
| trackStyle | 滑动槽样式 | StyleProp | -- |
| value | 滑动条的值 | number | -- |
| unit | 参数的单位 | string | -- |
| stepValue | 滑动条步长 | number | 1 |
| hasControl | 滑动条是否为受控的 | boolean | false |
| canTouchTrack | 触摸轨道是否可以更改值 | boolean | false |
| disabled | 是否禁用 | boolean | -- |
| handValueChange | 值改变回调 | (value: number) => void | -- |
| handSlidingComplete | 值改变完成回调 | (value: number) => void | -- |
| type | 滑块的类型，parcel：包裹类型 | "parcel" | "normal" | normal |
| renderMinimumTrack | 定制渲染小于当前值的轨道 | () => ReactElement | -- |
| renderTitle | 自定义渲染标题 | (value: number) => ReactElement | -- |
| padding | 外层容器的padding [上，右，下，左] | number[] | -- |
| title | 标题 | string | -- |
| showTitle | 是否显示标题 | boolean | true |
| titleFontColor | 标题字体颜色 | string | -- |
| titleFontSize | 标题字体大小 | number | -- |
| titleFontWeight | 标题字重 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| valueFontColor | 参数字体颜色 | string | -- |
| valueFontSize | 参数字体大小 | number | -- |
| valueFontWeight | 参数字重 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| sliderBgColor | 滑动条背景色 | string | -- |
| sliderGrooveBgColor | 滑动槽背景色 | string | -- |
| sliderThumbColor | 滑块颜色 | string | -- |
| sliderThumbSize | 滑块大小 | number | -- |
| sliderThumbRadius | 滑块圆角 | number | -- |
| bottomPromptTexts | 底部左右提示文字 | [string, string] | -- |
| bottomPromptTextFontSize | 底部提示文字字体大小 | number | -- |
| bottomPromptTextFontColor | 底部提示文字字体颜色 | string | -- |
| bottomPromptTextFontWeight | 底部提示文字字重 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | -- |
| bothSideIcons | 滑动条两侧的图标 | [IconItem, IconItem] | -- |
| bothSideIconSize | 滑动条两侧图标的尺寸 | number | -- |
| bothSideIconColor | 滑动条两侧图标的颜色 | string | -- |
| renderValue | 自定义的值的渲染 | (value: number) => ReactNode | -- |
| iconIsImage | 卡片图标是否为图片 | boolean | false |
| icon | 图标 svg path | string | -- |
| iconSize | 图标尺寸 | number | cx(24) |
| iconBgSize | 组件背景尺寸 | number | cx(50) |
| showIconBg | 是否显示图标背景 | boolean | true |
| iconColor | 图标颜色 | string | #fff |
| iconBgColor | 图标背景颜色 只能设置 rgb、rgba 或者 hex | BackgroundType | #158CFB |
| iconBgRadius | 图标背景圆角 | number | cx(50) |