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 |