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');<NordicListCardicon={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
| Name | Description | Type | Default | 
|---|---|---|---|
| style | Outermost container style | StyleProp | null | 
| iconStyle | Icon style | StyleProp | null | 
| textStyle | Title style | StyleProp | null | 
| width | Container width | number | cx(327) | 
| padding | Container padding | number[] | [cx(24), cx(16), cx(24), cx(16)] | 
| radius | The container with rounded corners | number | cx(16) | 
| backgroundColor | Background Color | string | '#FFF' | 
| iconSize | Icon size | number | cx(16) | 
| iconColor | Icon color | string | '#1082FE' | 
| text | Title | string | 'Temp' | 
| fontColor | Title Color | string | 'rgba(0, 0, 0, 0.9)' | 
| fontSize | Title size | number | cx(16) | 
| fontWeight | Title weight | string | number | 400 | 
| value | Value | string | null | 
| dataSource | The data source | IDataSource[] | null | 
| activeIconColor | Icon color in active state | string | '#FFF' | 
| inActiveIconColor | Color of the icon in inactive state | string | '#FFF' | 
| activeIconBgColor | Active icon background color | string | '#1082FE' | 
| inActiveIconBgColor | InActive icon background color | string | '#1082FE' | 
| itemIconSize | List item icon size | number | cx(20) | 
| itemIconBgSize | List item icon background size | number | cx(36) | 
| itemIconStyle | List item icon style | StyleProp | null | 
| activeTextColor | Color of text in active state | string | 'rgba(0, 0, 0, 0.9)' | 
| inActiveTextColor | Data source text color | string | null | 
| textSize | Data source text size | number | null | 
| textWeight | Data source text weight | string | number | null | 
| itemTextStyle | Data source text style | StyleProp | null | 
| activeBgColor | Active list item background color | string | 'rgba(16, 130, 254, 0.09)' | 
| inActiveBgColor | List item background color | string | 'transparent' | 
| onPress | Click the callback function | (value: string) => 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 |