BlockCard
Code demo
Studio
import { ClassicBlockCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicBlockCard icon={TuyaRNSvgs.power} />;
Nordic
import { NordicBlockCard } from 'tuya-panel-nordic-kit';<NordicBlockCard />;
Acrylic
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
| Name | Description | Type | Default |
|---|---|---|---|
| style | Outermost container style | StyleProp | null |
| backgroundColor | Background Color | string | '#Fff' |
| padding | Container padding | number[] | [cx(22), cx(20), cx(20), cx(24)] |
| width | Container width | number | cx(175) |
| radius | The container with rounded corners | number | cx(14) |
| text | Title | string | 'Block Card' |
| fontWeight | Title weight | string | number | 500 |
| fontColor | Title Color | string | '#3D3D3D' |
| fontSize | Title size | number | cx(15) |
| textStyle | Title style | StyleProp | null |
| switchSize | Switch size configuration | { width?: number; height?: number; activeSize?: number; margin?: number; } | { width: cx(40), height: cx(24), activeSize: cx(20), margin: cx(2) } |
| switchIconSize | Icon size on switch | number | null |
| switchIconColor | Icon color on switch | string | null |
| switchStyle | Switch the style | StyleProp | null |
| iconStyle | Icon Style | StyleProp | null |
| icon | icon svg path | string | -- |
| image | image url，icon has a higher priority | string | -- |
| iconSize | icon size | number | cx(24) |
| iconBgSize | icon background size | number | cx(50) |
| showIcon | Whether to display icon | boolean | true |
| showIconBg | Whether to display icon background | boolean | true |
| iconColor | icon color | string | #fff |
| iconBgColor | icon background color, only rgb、rgba or hex | BackgroundType | #158CFB |
| iconBgRadius | icon background radius | number | cx(50) |
| imageRadius | image radius | number | 0 |
NordicBlockCard
NordicBlockCard
| Name | Description | Type | Default |
|---|---|---|---|
| style | Outermost container style | StyleProp | null |
| padding | Container padding | number[] | [cx(24), cx(20), cx(24), cx(20)] |
| width | Container width | number | cx(155) |
| radius | The container with rounded corners | number | cx(16) |
| text | Title | string | 'Block Card' |
| fontWeight | Title weight | string | number | 400 |
| fontColor | Title Color | string | '#3D3D3D' |
| fontSize | Title size | number | cx(16) |
| textStyle | Title style | StyleProp | null |
| switchSize | Switch size configuration | { width?: number; height?: number; activeSize?: number; margin?: number; } | { width: cx(52), height: cx(28), activeSize: cx(20), margin: cx(4) } |
| switchIconSize | Icon size on switch | number | null |
| switchIconColor | Icon color on switch | string | null |
| switchStyle | Switch the style | StyleProp | null |