ItemCard

Code demo

Studio

import { ClassicItemCard } from 'tuya-panel-classic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<ClassicItemCard icon={TuyaRNSvgs.power} />
<ClassicItemCard
  icon={TuyaRNSvgs.power}
  subText="switch card"
  style={{ marginTop: 20 }}
  padding={[cx(12), cx(20), cx(12), cx(20)]}
/>

Nordic

import { NordicItemCard } from 'tuya-panel-nordic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<NordicItemCard icon={TuyaRNSvgs.power} />;

Acrylic

import { AcrylicItemCard } from 'tuya-panel-acrylic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<AcrylicItemCard icon={TuyaRNSvgs.power} />;

API

ClassicItemCard

Name	Description	Type	Default
style	Outermost container style	StyleProp	`null`
backgroundColor	The background color	string	`#FFF`
padding	[paddingTop, paddingRight, paddingBottom, paddingLeft]	number[]	`null`
width	Width of the container	number	`cx(316)`
radius	Radius of the container	number	`cx(14)`
text	The title	string	`'Switch Card'`
fontColor	The title color	string	`#3D3D3D`
fontSize	The title size	number	`cx(15)`
fontWeight	The title weight	string \| number	`400`
textStyle	The title style	StyleProp	`null`
subText	subtitle	string	`null`
subFontColor	Subtitle color	string	`rgba(61, 61, 61, 0.5)`
subFontSize	Subtitle size	number	`cx(14)`
subFontWeight	Subtitle weight	string \| number	`400`
subTextStyle	Subtitle style	StyleProp	`null`
switchSize	Switch size	{ width?: number; height?: number; activeSize?: number; margin?: number; }	`{ width: cx(40), height: cx(24), activeSize: cx(20), margin: cx(2) }`
switchStyle	Switch the style	StyleProp	`null`
iconStyle	Icon style	StyleProp	`null`
type	The card type is a text card, which is not transmitted by default	"switch" \| "arrow"	`null`
value	Text on the right side of the card	string \| boolean	`null`
valueColor	Color of text on the right side of the card	string	`null`
valueSize	Size of text on the right side of the card	number	`null`
valueFontWeight	Weight of text on the right side of the card	string \| number	`null`
valueStyle	Style of text on the right side of the card	StyleProp	`null`
unit	Unit on right side of card	string	`null`
unitSize	Unit size on the right side of the card	number	`null`
unitColor	Unit color on the right side of the card	string	`null`
unitWeight	Unit weight on the right side of the card	string \| number	`null`
unitStyle	Unit style on the right side of the card	StyleProp	`null`
arrowSize	Size of arrow on right side of card	number	`cx(12)`
arrowColor	Color of arrow on right side of card	string	`rgba(0, 0, 0, 0.25)`
children	Custom components on the right of the card	ReactNode	`null`
disabled	Whether the card is disabled	boolean	`true`
onPress	Short press	() => void	`null`
onLongPress	Long press	() => void	`null`
milliseconds	Long press the interval	number	`500`
icon	icon svg path	string	`--`
image	image url，icon has a higher priority	string	`--`
iconSize	icon size	number	`cx(24)`
iconBgSize	icon background size	number	`cx(50)`
showIcon	Whether to display icon	boolean	`true`
showIconBg	Whether to display icon background	boolean	`true`
iconColor	icon color	string	`#fff`
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

ItemCard

Code demo

Studio

Nordic

Acrylic

API

ClassicItemCard