DisplayCard 文本描述卡片

代码演示

Studio 风格

import { ClassicDisplayCard } from 'tuya-panel-classic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<ClassicDisplayCard isAlignCenter />
<ClassicDisplayCard backgroundColor="#FFF" icon={TuyaRNSvgs.power} />

北欧风格

import { NordicDisplayCard } from 'tuya-panel-nordic-kit';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<NordicDisplayCard icon={TuyaRNSvgs.power} value="32.0" />;

亚克力风格

import { AcrylicDisplayCard } from 'tuya-panel-acrylic-kit';

<AcrylicDisplayCard />;

API

ClassicDisplayCard

属性名	描述	类型	默认值
style	最外层容器样式	StyleProp	`null`
textStyle	描述样式	StyleProp	`null`
unitStyle	单位样式	StyleProp	`null`
valueStyle	数值样式	StyleProp	`null`
iconStyle	图标样式	StyleProp	`null`
backgroundColor	背景色	string	`'transparent'`
radius	容器圆角	number	`0`
width	容器宽度	number	`cx(198)`
padding	容器内边距	number[]	`[cx(26), cx(19), cx(26), cx(31)]`
text	描述文本	string	`null 'Current Temp'`
fontSize	文本大小	number	`cx(14)`
fontColor	文本颜色	string	`'rgba(0, 0, 0, 0.5)'`
fontWeight	文本字重	string \| number	`400`
unit	单位	string	`'°C'`
unitSize	单位尺寸	number	`cx(20)`
unitColor	单位颜色	string	`'#000'`
unitWeight	单位字重	string \| number	`500`
value	具体值	string \| number	`32`
valueSize	具体值大小	number	`cx(74)`
valueColor	具体值颜色	string	`'#000'`
valueWeight	具体值字重	number	`700`
isUnitInTop	单位是否在文本右上角	boolean	`true`
isAlignCenter	文本是否水平居中	boolean	`true`
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`

Tuya Design

DisplayCard 文本描述卡片

代码演示

Studio 风格

北欧风格

亚克力风格

API

ClassicDisplayCard