IconCard
Code demo
Studio
import { ClassicIconBlockCard } from 'tuya-panel-classic-kit';import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';<ClassicIconBlockCard icon={TuyaRNSvgs.power} />;
Nordic
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 }} />
Acrylic
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
| Name | Description | Type | Default |
|---|---|---|---|
| style | Outermost container style | StyleProp | null |
| iconStyle | Icon style | StyleProp | null |
| textStyle | Title style | StyleProp | null |
| valueStyle | Value style | StyleProp | null |
| unitStyle | Unit style | StyleProp | null |
| backgroundColor | Background Color | string | '#FFF' |
| radius | The container with rounded corners | number | cx(16) |
| width | Container width | number | cx(175) |
| padding | Container padding | number[] | [cx(16), cx(21), cx(21), cx(16)] |
| text | Title | string | 'Temp' |
| fontWeight | Title weight | number | 400 |
| fontSize | Title size | number | cx(16) |
| fontColor | Title Color | string | '#3D3D3D' |
| value | Value | string | '42%' |
| valueWeight | Value Weight | number | 600 |
| valueColor | Value Color | string | '#505050' |
| valueSize | Value | number | cx(24) |
| unit | Unit | string | null |
| unitWeight | Unit weight | number | 400 |
| unitColor | Unit Color | string | 'rgba(0, 0, 0, 0.5)' |
| unitSize | Unit size | number | cx(16) |
| 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 |
NordicIconBlockCard
NordicIconBlockCard
| Name | Description | Type | Default |
|---|---|---|---|
| hasArrow | Whether arrow indicates the icon | boolean | false |
| arrowSize | Arrow indicates the size of the icon | number | cx(10) |
| arrowColor | Arrow indicates the color of the icon | string | 'rgba(0, 0, 0, 0.2)' |
| onPress | Press action callback | () => void | null |
| style | Outermost container style | StyleProp | null |
| iconStyle | Icon style | StyleProp | null |
| textStyle | Title style | StyleProp | null |
| valueStyle | Value style | StyleProp | null |
| unitStyle | Unit style | StyleProp | null |
| backgroundColor | Background Color | string | '#FFF' |
| radius | The container with rounded corners | number | cx(16) |
| width | Container width | number | cx(175) |
| padding | Container padding | number[] | [cx(16), cx(21), cx(21), cx(16)] |
| text | Title | string | 'Temp' |
| fontWeight | Title weight | number | 400 |
| fontSize | Title size | number | cx(16) |
| fontColor | Title Color | string | '#3D3D3D' |
| value | Value | string | '42%' |
| valueWeight | Value Weight | number | 600 |
| valueColor | Value Color | string | '#505050' |
| valueSize | Value | number | cx(24) |
| unit | Unit | string | null |
| unitWeight | Unit weight | number | 400 |
| unitColor | Unit Color | string | 'rgba(0, 0, 0, 0.5)' |
| unitSize | Unit size | number | cx(16) |
| 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 |