IconCard 图标文本块状卡片
代码演示
Studio 风格
import { ClassicIconBlockCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicIconBlockCard icon={TuyaRNSvgs.power} />;
北欧风格
import { NordicIconBlockCard } from 'tuya-panel-nordic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<NordicIconBlockCard icon={TuyaRNSvgs.power} /><NordicIconBlockCard showIcon={false} hasArrow style={{ marginTop: 20 }} /><NordicIconBlockCard icon={TuyaRNSvgs.power} hasArrow style={{ marginTop: 20 }} />
亚克力风格
import { AcrylicIconBlockCard } from 'tuya-panel-acrylic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<AcrylicIconBlockCard icon={TuyaRNSvgs.power} />;
API
ClassicIconBlockCard && AcrylicIconBlockCard
ClassicIconBlockCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| iconStyle | 图标样式 | StyleProp | null |
| textStyle | 标题样式 | StyleProp | null |
| valueStyle | 数值样式 | StyleProp | null |
| unitStyle | 单位样式 | StyleProp | null |
| backgroundColor | 背景色 | string | '#FFF' |
| radius | 容器圆角 | number | cx(16) |
| width | 容器宽度 | number | cx(175) |
| padding | 容器内边距 | number[] | [cx(16), cx(21), cx(21), cx(16)] |
| text | 标题 | string | 'Temp' |
| fontWeight | 标题字重 | number | 400 |
| fontSize | 标题大小 | number | cx(16) |
| fontColor | 标题颜色 | string | '#3D3D3D' |
| value | 具体值 | string | '42%' |
| valueWeight | 具体值字重 | number | 600 |
| valueColor | 具体值颜色 | string | '#505050' |
| valueSize | 具体值大小 | number | cx(24) |
| unit | 单位 | string | null |
| unitWeight | 单位字重 | number | 400 |
| unitColor | 单位颜色 | string | 'rgba(0, 0, 0, 0.5)' |
| unitSize | 单位尺寸 | number | cx(16) |
| 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 |
NordicIconBlockCard
NordicIconBlockCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| hasArrow | 是否有 arrow 指引图标 | boolean | false |
| arrowSize | arrow 指引图标的大小 | number | cx(10) |
| arrowColor | arrow 指引图标的颜色 | string | 'rgba(0, 0, 0, 0.2)' |
| onPress | 按下动作回调 | () => void | null |
| style | 最外层容器样式 | StyleProp | null |
| iconStyle | 图标样式 | StyleProp | null |
| textStyle | 标题样式 | StyleProp | null |
| valueStyle | 数值样式 | StyleProp | null |
| unitStyle | 单位样式 | StyleProp | null |
| backgroundColor | 背景色 | string | '#FFF' |
| radius | 容器圆角 | number | cx(16) |
| width | 容器宽度 | number | cx(175) |
| padding | 容器内边距 | number[] | [cx(16), cx(21), cx(21), cx(16)] |
| text | 标题 | string | 'Temp' |
| fontWeight | 标题字重 | number | 400 |
| fontSize | 标题大小 | number | cx(16) |
| fontColor | 标题颜色 | string | '#3D3D3D' |
| value | 具体值 | string | '42%' |
| valueWeight | 具体值字重 | number | 600 |
| valueColor | 具体值颜色 | string | '#505050' |
| valueSize | 具体值大小 | number | cx(24) |
| unit | 单位 | string | null |
| unitWeight | 单位字重 | number | 400 |
| unitColor | 单位颜色 | string | 'rgba(0, 0, 0, 0.5)' |
| unitSize | 单位尺寸 | number | cx(16) |
| 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 |