ItemCard 展示型卡片
代码演示
Studio 风格
import { ClassicItemCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicItemCard icon={TuyaRNSvgs.power} /><ClassicItemCardicon={TuyaRNSvgs.power}subText="switch card"style={{ marginTop: 20 }}padding={[cx(12), cx(20), cx(12), cx(20)]}/>
北欧风格
import { NordicItemCard } from 'tuya-panel-nordic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<NordicItemCard icon={TuyaRNSvgs.power} />;
亚克力风格
import { AcrylicItemCard } from 'tuya-panel-acrylic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<AcrylicItemCard icon={TuyaRNSvgs.power} />;
API
ClassicItemCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| backgroundColor | 背景颜色 | string | #FFF |
| padding | 最外层容器内边距，格式为 [paddingTop, paddingRight, paddingBottom, paddingLeft] | number[] | null |
| width | 容器宽度 | number | cx(316) |
| radius | 容器圆角 | number | cx(14) |
| text | 标题 | string | 'Switch Card' |
| fontColor | 标题颜色 | string | #3D3D3D |
| fontSize | 标题大小 | number | cx(15) |
| fontWeight | 标题字重 | string | number | 400 |
| textStyle | 标题样式 | StyleProp | null |
| subText | 副标题 | string | null |
| subFontColor | 副标题颜色 | string | rgba(61, 61, 61, 0.5) |
| subFontSize | 副标题大小 | number | cx(14) |
| subFontWeight | 副标题字重 | string | number | 400 |
| subTextStyle | 副标题样式 | StyleProp | null |
| switchSize | 开关尺寸大小 | { width?: number; height?: number; activeSize?: number; margin?: number; } | { width: cx(40), height: cx(24), activeSize: cx(20), margin: cx(2) } |
| switchStyle | 开关样式 | StyleProp | null |
| iconStyle | 图标样式 | StyleProp | null |
| type | 卡片类型，默认不传，为文本类型卡片 | "switch" | "arrow" | null |
| value | 卡片右侧文本 | string | boolean | null |
| valueColor | 卡片右侧文本颜色 | string | null |
| valueSize | 卡片右侧文本大小 | number | null |
| valueFontWeight | 卡片右侧文本字重 | string | number | null |
| valueStyle | 卡片右侧文本样式 | StyleProp | null |
| unit | 卡片右侧单位 | string | null |
| unitSize | 卡片右侧单位大小 | number | null |
| unitColor | 卡片右侧单位颜色 | string | null |
| unitWeight | 卡片右侧单位字重 | string | number | null |
| unitStyle | 卡片右侧单位样式 | StyleProp | null |
| arrowSize | 卡片右侧箭头大小 | number | cx(12) |
| arrowColor | 卡片右侧箭头颜色 | string | rgba(0, 0, 0, 0.25) |
| children | 卡片右侧自定义组件 | ReactNode | null |
| disabled | 卡片是否禁用 | boolean | true |
| onPress | 短按 | () => void | null |
| onLongPress | 长按 | () => void | null |
| milliseconds | 长按时间间隔 | number | 500 |
| icon | 图标 svg path | string | -- |
| image | 图片地址，图标的优先级更高 | string | -- |
| iconSize | 图标尺寸 | number | cx(24) |
| iconBgSize | 组件背景尺寸 | number | cx(50) |
| showIcon | 是否显示图标 | boolean | true |
| showIconBg | 是否显示图标背景 | boolean | true |
| iconColor | 图标颜色 | string | #fff |
| iconBgColor | 图标背景颜色 只能设置 rgb、rgba 或者 hex | BackgroundType | #158CFB |
| iconBgRadius | 图标背景圆角 | number | cx(50) |
| imageRadius | 图片圆角 | number | 0 |