DepictCard 块状文本显示卡片

代码演示

Studio 风格

import { ClassicDepictCard } from 'tuya-panel-classic-kit';

<ClassicDepictCard backgroundColor="#fff" />;

北欧风格

import { NordicDepictCard } from 'tuya-panel-nordic-kit';

<NordicDepictCard />;

亚克力风格

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

属性名	描述	类型	默认值
style	最外层容器样式	StyleProp	`null`
iconStyle	图标样式	StyleProp	`null`
textStyle	标题样式	StyleProp	`null`
unitStyle	单位样式	StyleProp	`null`
valueStyle	数值样式	StyleProp	`null`
backgroundColor	背景色	string	`'#Fff'`
radius	容器圆角	number	`cx(14)`
width	容器宽度	number	`null`
padding	容器内边距	number[]	`[cx(16), cx(45), cx(18), cx(47)]`
text	标题	string	`'Current Temp'`
fontSize	标题大小	number	`cx(12)`
fontColor	标题颜色	string	`'rgba(80, 80, 80, 0.5)'`
fontWeight	标题字重	number	`400`
unit	单位	string	`'°C'`
unitSize	单位尺寸	number	`cx(18)`
unitColor	单位颜色	string	`'#000'`
unitWeight	单位字重	number	`400`
value	具体值	string \| number	`32`
valueSize	具体值大小	number	`cx(18)`
valueColor	具体值颜色	string	`'#505050'`
valueWeight	具体值字重	number	`600`
isUnitInBottom	单位是否在文本右下角	boolean	`false`
isAlignCenter	文本是否水平居中	boolean	`true`
marginBottom	标题和具体值的间距	number	`cx(6)`
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

DepictCard 块状文本显示卡片

代码演示

Studio 风格

北欧风格

亚克力风格

API

ClassicDepictCard