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 |