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 |