ListCard

Code demo

Nordic

import { NordicListCard } from 'tuya-panel-nordic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';
const [value, setValue] = React.useState('world');
<NordicListCard
icon={TuyaRNSvgs.power}
value={value}
onPress={value => setValue(value)}
dataSource={[
{ icon: TuyaRNSvgs.power, text: 'Hello World', value: 'world' },
{ icon: TuyaRNSvgs.power, text: 'Hello Tuya', value: 'tuya' },
{ icon: TuyaRNSvgs.power, text: 'Hello China', value: 'china' },
]}
/>;

API

NordicListCard

NameDescriptionTypeDefault
styleOutermost container styleStylePropnull
iconStyleIcon styleStylePropnull
textStyleTitle styleStylePropnull
widthContainer widthnumbercx(327)
paddingContainer paddingnumber[][cx(24), cx(16), cx(24), cx(16)]
radiusThe container with rounded cornersnumbercx(16)
backgroundColorBackground Colorstring'#FFF'
iconSizeIcon sizenumbercx(16)
iconColorIcon colorstring'#1082FE'
textTitlestring'Temp'
fontColorTitle Colorstring'rgba(0, 0, 0, 0.9)'
fontSizeTitle sizenumbercx(16)
fontWeightTitle weightstring | number400
valueValuestringnull
dataSourceThe data sourceIDataSource[]null
activeIconColorIcon color in active statestring'#FFF'
inActiveIconColorColor of the icon in inactive statestring'#FFF'
activeIconBgColorActive icon background colorstring'#1082FE'
inActiveIconBgColorInActive icon background colorstring'#1082FE'
itemIconSizeList item icon sizenumbercx(20)
itemIconBgSizeList item icon background sizenumbercx(36)
itemIconStyleList item icon styleStylePropnull
activeTextColorColor of text in active statestring'rgba(0, 0, 0, 0.9)'
inActiveTextColorData source text colorstringnull
textSizeData source text sizenumbernull
textWeightData source text weightstring | numbernull
itemTextStyleData source text styleStylePropnull
activeBgColorActive list item background colorstring'rgba(16, 130, 254, 0.09)'
inActiveBgColorList item background colorstring'transparent'
onPressClick the callback function(value: string) => voidnull
iconicon svg pathstring--
imageimage url,icon has a higher prioritystring--
iconBgSizeicon background sizenumbercx(50)
showIconWhether to display iconbooleantrue
showIconBgWhether to display icon backgroundbooleantrue
iconBgColoricon background color, only rgb、rgba or hexBackgroundType#158CFB
iconBgRadiusicon background radiusnumbercx(50)
imageRadiusimage radiusnumber0
tuya07:31