DepictCard
Code demo
Studio
import { ClassicDepictCard } from 'tuya-panel-classic-kit';<ClassicDepictCard backgroundColor="#fff" />;
Nordic
import { NordicDepictCard } from 'tuya-panel-nordic-kit';<NordicDepictCard />;
Acrylic
import { AcrylicDepictCard, AcrylicDepictIconCard } from 'tuya-panel-acrylic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<AcrylicDepictCard style={{ marginBottom: 20 }} /><AcrylicDepictIconCard icon={TuyaRNSvgs.power} />
API
ClassicDepictCard
| Name | Description | Type | Default |
|---|---|---|---|
| style | Outermost container style | StyleProp | null |
| iconStyle | Icon style | StyleProp | null |
| textStyle | Title style | StyleProp | null |
| unitStyle | Unit style | StyleProp | null |
| valueStyle | Value style | StyleProp | null |
| backgroundColor | Background Color | string | '#Fff' |
| radius | The container with rounded corners | number | cx(14) |
| width | Container width | number | null |
| padding | Container padding | number[] | [cx(16), cx(45), cx(18), cx(47)] |
| text | Title | string | 'Current Temp' |
| fontSize | Title size | number | cx(12) |
| fontColor | Title Color | string | 'rgba(80, 80, 80, 0.5)' |
| fontWeight | Title weight | number | 400 |
| unit | Unit | string | '°C' |
| unitSize | Unit size | number | cx(18) |
| unitColor | Unit Color | string | '#000' |
| unitWeight | Unit weight | number | 400 |
| value | Value | string | number | 32 |
| valueSize | Value | number | cx(18) |
| valueColor | Value Color | string | '#505050' |
| valueWeight | Value Weight | number | 600 |
| isUnitInBottom | Whether the unit is in the lower right corner of the text | boolean | false |
| isAlignCenter | Whether the text is horizontally centered | boolean | true |
| marginBottom | The spacing between the title and the specific value | number | cx(6) |
| 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 |