数字卡片 basic-card
2026年7月20日大约 4 分钟
数字卡片 basic-card
KPI 指标卡：大号数值 + 单位（千分位 / 小数 / 百分比 / 数字滚动）。
- 类型串：
basic-card默认尺寸：[220, 120]分类：指标
实时预览
下面渲染的是真实组件（与编辑器 / 运行时同源）。修改右侧「样式参数」，左侧预览实时更新；点击底部「全页面查看」可放大。
属性
下表为本组件特有的属性；
position/size/opacity/background/border/ 联动选中 / 筛选等通用参数见组件手册总览。
format
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
placeholder | 无数据占位 | string | - | |
decimal-places | 小数位数 | number(min=0,max=10) | 0 | |
complete-zero | 小数补零 | boolean | true | |
comma-display | 千分位分隔 | boolean | true | |
percentage-format | 百分比 | boolean | false | |
integer-digits | 整数位补零 | number(min=0,max=12) | 0 |
value
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
static-value | 示例数值 | number<float> | 1024 |
font
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
text-font | 字体 | font(gradient=true,underline=true,line-through=true) | {"size":20,"color":"#ffffff"} | |
font-spacing | 字体间隔 | number(unit=px) | 0 | |
font-line-height | 行高 | number(unit=px,min=0) | 0 | |
text-indent | 文字缩进 | number(unit=px) | 0 | |
text-tilt | 文字倾斜 | vector<W,H>(unit=px) | [0,0] | |
text-position | 水平对齐方式 | select(radioGroup) | center | 可选：left / center / right |
text-vertical | 竖直对齐方式 | select(radioGroup) | center | 可选：top / center / bottom |
text-position-relative | 文本位置 | vector<X,Y>(unit=px) | [0,0] | |
font-shadow-color | 发光颜色 | color | #ffffff | |
font-shadow-blur | 发光模糊 | number(unit=px) | -1 | |
font-shadow-offset-x | 水平偏移 | number(unit=px) | 0 | |
font-shadow-offset-y | 垂直偏移 | number(unit=px) | 0 | |
shadow-color | 投影颜色 | color | #ffffff | |
shadow-blur | 投影模糊 | number(unit=px) | -1 | |
shadow-offset-x | 水平偏移 | number(unit=px) | 0 | |
shadow-offset-y | 垂直偏移 | number(unit=px) | 0 |
unit
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
unit-text | 单位文字 | string | — | |
unit-font | 单位字体 | font(gradient=true) | {"size":14,"color":"#9aa4b2"} | |
unit-position | 单位位置 | select(radioGroup) | after | 可选：after / before |
unit-gap | 单位间距 | number(unit=px,min=0) | 4 |
animation
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
animation-display | 数字滚动 | boolean | false | 数值从 0（或旧值）滚到目标；挂载/开启时会播放。不是入场 CSS，也无 animation-easing / animation-delay |
animation-duration | 滚动时长(秒) | number<float>(step=0.1,min=0,unit=秒) | 1 |
show-click
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
show-click | 点击状态 | boolean | false | |
text-color-click | 文字颜色 | color | — | |
bg-color-click | 背景颜色 | color(gradient) | — | |
border-color-click | 边框颜色 | color | #2f7bff | |
border-width-click | 边框宽度 | number(unit=px,min=0) | 0 | |
border-radius-click | 圆角半径 | number(unit=px,min=0) | 0 |
show-hover
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
show-hover | 悬停状态 | boolean | false | |
text-color-hover | 文字颜色 | color | — | |
bg-color-hover | 背景颜色 | color(gradient) | — | |
border-color-hover | 边框颜色 | color | #2f7bff | |
border-width-hover | 边框宽度 | number(unit=px,min=0) | 0 | |
border-radius-hover | 圆角半径 | number(unit=px,min=0) | 0 |
show-select
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
show-select | 选中状态 | boolean | false | |
text-color-select | 文字颜色 | color | — | |
bg-color-select | 背景颜色 | color(gradient) | — | |
border-color-select | 边框颜色 | color | #2f7bff | |
border-width-select | 边框宽度 | number(unit=px,min=0) | 0 | |
border-radius-select | 圆角半径 | number(unit=px,min=0) | 0 |
binding
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
relationship-value | 选中判定值 | string | — |
数据绑定
| 字段槽 | 类型 / 约束 | 说明 |
|---|---|---|
value-field | field(recommend=number,min=0,max=1) | 数值 |
relationship-field | field(recommend=string,min=0,max=1) | 选中判定字段 |
事件
触发器
触发器在预览 / 播放态生效（编辑态点击 = 选中组件）。写在本组件
options.interactions的groups[].trigger里。
| 触发器 | 名称 | 触发时机 | payload（供动作公式 {:字段} 取值） |
|---|---|---|---|
itemClicked | 点击某项 | 点击卡片时触发 | 卡片绑定行数据 |
click | 点击 | 点击本组件时触发 | 无 |
mouseEnter | 鼠标移入 | 指针移入组件时触发 | 无 |
mouseLeave | 鼠标移出 | 指针移出组件时触发 | 无 |
appear | 入场 | 组件出现时触发（配合进场动画） | 无 |
disappear | 离场 | 组件消失时触发（配合退场动画） | 无 |
receiveBehaviorEvent | 接收行为事件 | 收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发（按 eventName 匹配） | 发送方携带的 data |
动作
触发器命中后执行的动作。本组件既可发起动作（配在自己的交互里），也可作为其它组件动作的目标。
| 动作 | 名称 | 说明 |
|---|---|---|
changeOption | 修改设置 | 把本组件（或其它组件）的某个属性改为静态值 / 公式动态值 |
switchState | 切换状态 | 切到多状态里的某个状态（state:"" 回默认态） |
appear / disappear | 进 / 退场动画 | 对目标 opacity 做 0↔100 插值的显隐动画 |
完整动作清单（switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等）与持久化写法见事件交互。
示例
{
"type": "basic-card",
"uid": "w_basic_card",
"options": {
"position": [40, 40],
"size": [220, 120],
"value-field": [["conn_demo", "tbl_demo", "字段名"]],
"relationship-field": [["conn_demo", "tbl_demo", "字段名"]]
}
}绑定三元组
[连接uid, 表uid, 字段uid]指向工程connections里的真实字段，见数据系统。