StepCard

Code demo

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 })} />;

Nordic

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

Name	Description	Type	Default
style	Outermost container style	StyleProp	`null`
buttonStyle	Add and subtract button styles	StyleProp	`null`
buttonWidth	Add or subtract button width	number	`cx(140)`
buttonHeight	Add and subtract button background colors	number	`cx(48)`
minusIcon	Subtraction button icon	string	`null`
buttonIconColor	Button icon color	string	`'#158CFB'`
plusIcon	Add button icon	string	`null`
buttonIconSize	Button icon size	number	`cx(16)`
minusDisabled	Whether to disable the subtraction button	boolean	`false`
plusDisabled	Whether to disable the add button	boolean	`false`
value	Value	number	`10`
min	Min	number	`0`
max	Max	number	`99`
stepValue	Step length	number	`1`
milliseconds	Hold down the interval	number	`500`
onValueChange	Value change callback	(value: number) => void	`null`

NordicStepCard

Name	Description	Type	Default
iconStyle	Header icon style	StyleProp	`null`
textStyle	Header text style	StyleProp	`null`
valueStyle	Concrete value style	StyleProp	`null`
width	Container width	number	`cx(327)`
padding	Container padding	number[]	`[cx(24), cx(20), cx(24), cx(20)]`
radius	The container with rounded corners	number	`cx(16)`
backgroundColor	Container background color	string	`#FFF'`
iconSize	Header icon size	number	`cx(16)`
iconColor	Header icon color	string	`'#1082FE'`
text	Header text	string	`'Temp'`
fontColor	Header text word color	string	`'rgba(0, 0, 0, 0.9)'`
fontSize	Header text word size	number	`cx(16)`
fontWeight	Header text word weight	string \| number	`400`
valueSize	Specific value word size	number	`cx(24)`
valueColor	Specific value word color	string	`'#000'`
valueWeight	Specific value word weight	string \| number	`500`
unit	Unit	string	`null`
style	Outermost container style	StyleProp	`null`
buttonStyle	Add and subtract button styles	StyleProp	`null`
buttonWidth	Add or subtract button width	number	`cx(140)`
buttonHeight	Add and subtract button background colors	number	`cx(48)`
minusIcon	Subtraction button icon	string	`null`
buttonIconColor	Button icon color	string	`'#158CFB'`
plusIcon	Add button icon	string	`null`
buttonIconSize	Button icon size	number	`cx(16)`
minusDisabled	Whether to disable the subtraction button	boolean	`false`
plusDisabled	Whether to disable the add button	boolean	`false`
value	Value	number	`10`
min	Min	number	`0`
max	Max	number	`99`
stepValue	Step length	number	`1`
milliseconds	Hold down the interval	number	`500`
onValueChange	Value change callback	(value: number) => void	`null`
icon	icon svg path	string	`--`
image	image url，icon has a higher priority	string	`--`
iconBgSize	icon background size	number	`cx(50)`
showIcon	Whether to display icon	boolean	`true`
showIconBg	Whether to display icon background	boolean	`true`
iconBgColor	icon background color, only rgb、rgba or hex	BackgroundType	`#158CFB`
iconBgRadius	icon background radius	number	`cx(50)`
imageRadius	image radius	number	`0`

Tuya Design

StepCard

Code demo

Studio

Nordic

API

ClassicStepCard

ClassicStepCard

NordicStepCard

NordicStepCard