StepCard 步进器卡片
代码演示
Studio 风格
import { ClassicStepCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicStepCard onValueChange={value => console.log({ value })} />;
北欧风格
import { NordicStepCard } from 'tuya-panel-nordic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<NordicStepCard icon={TuyaRNSvgs.power} unit="%" />;
API
ClassicStepCard
ClassicStepCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| buttonStyle | 加减按钮样式 | StyleProp | null |
| buttonWidth | 加减按钮宽度 | number | cx(140) |
| buttonHeight | 加减按钮高度 | number | cx(48) |
| buttonRadius | 加减按钮圆角 | number | -- |
| buttonBgColor | 加减按钮背景色 | string | -- |
| minusIcon | 减法按钮图标 | string | null |
| buttonIconColor | 按钮图标颜色 | string | '#158CFB' |
| plusIcon | 加法按钮图标 | string | null |
| buttonIconSize | 按钮图标尺寸 | number | cx(16) |
| minusDisabled | 是否禁用减法按钮 | boolean | false |
| plusDisabled | 是否禁用加法按钮 | boolean | false |
| value | 具体值 | number | 10 |
| min | 最小值 | number | 0 |
| max | 最大值 | number | 99 |
| stepValue | 步长 | number | 1 |
| milliseconds | 长按间隔时长 | number | 500 |
| onValueChange | 值变化回调 | (value: number) => void | null |
NordicStepCard
NordicStepCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| iconStyle | 头部栏图标样式 | StyleProp | null |
| textStyle | 头部栏文本样式 | StyleProp | null |
| valueStyle | 具体值样式 | StyleProp | null |
| width | 容器宽度 | number | cx(327) |
| padding | 容器内边距 | number[] | [cx(24), cx(20), cx(24), cx(20)] |
| radius | 容器圆角 | number | cx(16) |
| backgroundColor | 容器背景颜色 | string | #FFF' |
| iconSize | 头部图标大小 | number | cx(16) |
| iconColor | 头部图标大小 | string | '#1082FE' |
| text | 头部栏文本 | string | 'Temp' |
| fontColor | 头部栏文本颜色 | string | 'rgba(0, 0, 0, 0.9)' |
| fontSize | 头部栏文本大小 | number | cx(16) |
| fontWeight | 头部栏文本字重 | string | number | 400 |
| valueSize | 具体值大小 | number | cx(24) |
| valueColor | 具体值颜色 | string | '#000' |
| valueWeight | 具体值字重 | string | number | 500 |
| unit | 单位 | string | null |
| style | 最外层容器样式 | StyleProp | null |
| buttonStyle | 加减按钮样式 | StyleProp | null |
| buttonWidth | 加减按钮宽度 | number | cx(140) |
| buttonHeight | 加减按钮高度 | number | cx(48) |
| buttonRadius | 加减按钮圆角 | number | -- |
| buttonBgColor | 加减按钮背景色 | string | -- |
| minusIcon | 减法按钮图标 | string | null |
| buttonIconColor | 按钮图标颜色 | string | '#158CFB' |
| plusIcon | 加法按钮图标 | string | null |
| buttonIconSize | 按钮图标尺寸 | number | cx(16) |
| minusDisabled | 是否禁用减法按钮 | boolean | false |
| plusDisabled | 是否禁用加法按钮 | boolean | false |
| value | 具体值 | number | 10 |
| min | 最小值 | number | 0 |
| max | 最大值 | number | 99 |
| stepValue | 步长 | number | 1 |
| milliseconds | 长按间隔时长 | number | 500 |
| onValueChange | 值变化回调 | (value: number) => void | null |
| icon | 图标 svg path | string | -- |
| image | 图片地址，图标的优先级更高 | string | -- |
| iconBgSize | 组件背景尺寸 | number | cx(50) |
| showIcon | 是否显示图标 | boolean | true |
| showIconBg | 是否显示图标背景 | boolean | true |
| iconBgColor | 图标背景颜色 只能设置 rgb、rgba 或者 hex | BackgroundType | #158CFB |
| iconBgRadius | 图标背景圆角 | number | cx(50) |
| imageRadius | 图片圆角 | number | 0 |