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');
<NordicListCard
icon={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最外层容器样式StylePropnull
iconStyle图标样式StylePropnull
textStyle标题样式StylePropnull
width容器宽度numbercx(327)
padding容器内边距number[][cx(24), cx(16), cx(24), cx(16)]
radius容器圆角numbercx(16)
backgroundColor背景色string'#FFF'
iconSize图标大小numbercx(16)
iconColor图标颜色string'#1082FE'
text标题string'Temp'
fontColor标题颜色string'rgba(0, 0, 0, 0.9)'
fontSize标题大小numbercx(16)
fontWeight标题字重string | number400
value选中值stringnull
dataSource数据源IDataSource[]null
activeIconColor激活状态下的图标颜色string'#FFF'
inActiveIconColor非激活状态下的图标颜色string'#FFF'
activeIconBgColor激活状态下的图标背景颜色string'#1082FE'
inActiveIconBgColor非激活状态下的图标背景颜色string'#1082FE'
itemIconSize列表项图标大小numbercx(20)
itemIconBgSize列表项图标背景大小numbercx(36)
itemIconStyle列表项图标样式StylePropnull
activeTextColor激活状态下的文字颜色string'rgba(0, 0, 0, 0.9)'
inActiveTextColor数据源文本颜色stringnull
textSize数据源文本大小numbernull
textWeight数据源文本字重string | numbernull
itemTextStyle数据源文本样式StylePropnull
activeBgColor激活的列表项背景颜色string'rgba(16, 130, 254, 0.09)'
inActiveBgColor列表项背景颜色string'transparent'
onPress点按回调函数(value: string) => voidnull
icon图标 svg pathstring--
image图片地址,图标的优先级更高string--
iconBgSize组件背景尺寸numbercx(50)
showIcon是否显示图标booleantrue
showIconBg是否显示图标背景booleantrue
iconBgColor图标背景颜色 只能设置 rgb、rgba 或者 hexBackgroundType#158CFB
iconBgRadius图标背景圆角numbercx(50)
imageRadius图片圆角number0
tuya07:31