BlockCard 块状布尔类型卡片
代码演示
Studio 风格
import { ClassicBlockCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicBlockCard icon={TuyaRNSvgs.power} />;
北欧风格
import { NordicBlockCard } from 'tuya-panel-nordic-kit';<NordicBlockCard />;
亚克力风格
import { AcrylicBlockCard } from 'tuya-panel-acrylic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<AcrylicBlockCard icon={TuyaRNSvgs.power} />;
API
ClassicBlockCard && AcrylicBlockCard
ClassicBlockCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| backgroundColor | 背景色 | string | '#Fff' |
| padding | 容器内边距 | number[] | [cx(22), cx(20), cx(20), cx(24)] |
| width | 容器宽度 | number | cx(175) |
| radius | 容器圆角 | number | cx(14) |
| text | 标题 | string | 'Block Card' |
| fontWeight | 标题字重 | string | number | 500 |
| fontColor | 标题颜色 | string | '#3D3D3D' |
| fontSize | 标题大小 | number | cx(15) |
| textStyle | 标题样式 | StyleProp | null |
| switchSize | 开关尺寸配置 | { width?: number; height?: number; activeSize?: number; margin?: number; } | { width: cx(40), height: cx(24), activeSize: cx(20), margin: cx(2) } |
| switchIconSize | 开关上图标大小 | number | null |
| switchIconColor | 开关上图标颜色 | string | null |
| switchStyle | 开关样式 | StyleProp | null |
| iconStyle | 图标样式 | StyleProp | null |
| 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 |
NordicBlockCard
NordicBlockCard
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| style | 最外层容器样式 | StyleProp | null |
| padding | 容器内边距 | number[] | [cx(24), cx(20), cx(24), cx(20)] |
| width | 容器宽度 | number | cx(155) |
| radius | 容器圆角 | number | cx(16) |
| text | 标题 | string | 'Block Card' |
| fontWeight | 标题字重 | string | number | 400 |
| fontColor | 标题颜色 | string | '#3D3D3D' |
| fontSize | 标题大小 | number | cx(16) |
| textStyle | 标题样式 | StyleProp | null |
| switchSize | 开关尺寸配置 | { width?: number; height?: number; activeSize?: number; margin?: number; } | { width: cx(52), height: cx(28), activeSize: cx(20), margin: cx(4) } |
| switchIconSize | 开关上图标大小 | number | null |
| switchIconColor | 开关上图标颜色 | string | null |
| switchStyle | 开关样式 | StyleProp | null |