ListCard 列表类卡片
代码演示
北欧风格
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
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| iconStyle | 图标样式 | StyleProp | null |
| textStyle | 标题样式 | StyleProp | null |
| width | 容器宽度 | number | cx(327) |
| padding | 容器内边距 | number[] | [cx(24), cx(16), cx(24), cx(16)] |
| radius | 容器圆角 | number | cx(16) |
| backgroundColor | 背景色 | string | '#FFF' |
| iconSize | 图标大小 | number | cx(16) |
| iconColor | 图标颜色 | string | '#1082FE' |
| text | 标题 | string | 'Temp' |
| fontColor | 标题颜色 | string | 'rgba(0, 0, 0, 0.9)' |
| fontSize | 标题大小 | number | cx(16) |
| fontWeight | 标题字重 | string | number | 400 |
| value | 选中值 | string | null |
| dataSource | 数据源 | IDataSource[] | null |
| activeIconColor | 激活状态下的图标颜色 | string | '#FFF' |
| inActiveIconColor | 非激活状态下的图标颜色 | string | '#FFF' |
| activeIconBgColor | 激活状态下的图标背景颜色 | string | '#1082FE' |
| inActiveIconBgColor | 非激活状态下的图标背景颜色 | string | '#1082FE' |
| itemIconSize | 列表项图标大小 | number | cx(20) |
| itemIconBgSize | 列表项图标背景大小 | number | cx(36) |
| itemIconStyle | 列表项图标样式 | StyleProp | null |
| activeTextColor | 激活状态下的文字颜色 | string | 'rgba(0, 0, 0, 0.9)' |
| inActiveTextColor | 数据源文本颜色 | string | null |
| textSize | 数据源文本大小 | number | null |
| textWeight | 数据源文本字重 | string | number | null |
| itemTextStyle | 数据源文本样式 | StyleProp | null |
| activeBgColor | 激活的列表项背景颜色 | string | 'rgba(16, 130, 254, 0.09)' |
| inActiveBgColor | 列表项背景颜色 | string | 'transparent' |
| onPress | 点按回调函数 | (value: string) => void | null |
| icon | 图标 svg path | string | -- |
| image | 图片地址,图标的优先级更高 | string | -- |
| iconBgSize | 组件背景尺寸 | number | cx(50) |
| showIcon | 是否显示图标 | boolean | true |
| showIconBg | 是否显示图标背景 | boolean | true |
| iconBgColor | 图标背景颜色 只能设置 rgb、rgba 或者 hex | BackgroundType | #158CFB |
| iconBgRadius | 图标背景圆角 | number | cx(50) |
| imageRadius | 图片圆角 | number | 0 |