控件类组件

交互输入类组件：触发动作、驱动联动 / 筛选、承载列表与进度。它们是把大屏从「看板」变成「可操作应用」的关键。

下表只列各组件特有的高频参数；position / size / background / border / 联动选中等通用参数见组件手册总览，不再重复。完整全量选项以属性面板为准。

---

按钮 basic-button

触发交互动作的按钮——切页面、开窗口、发行为事件、执行脚本、改属性等。支持四态样式（常态 / 悬停 / 点击 / 选中）与选中态开关。默认尺寸 [120, 40]。

参数：

option	类型	默认	说明
text	string	按钮	按钮文字
text-arrangement	select	horizontal	文字排列 horizontal / vertical
padding	vector<上,右,下,左>	[8,16,8,16]	内边距 px
show-select	boolean	false	启用选中态（可做「选中高亮」按钮）
checked	boolean	false	默认选中
常态样式	—	—	text-default-font（字体）、background-default-color（背景，支持渐变）、border-default-*（边框色 / 宽 / 圆角 / 样式）
悬停态	show-hover	false	开启后出现 *-hover-* 一组样式；含 animation-hover-show（涟漪动画）
点击态	show-click	false	开启后出现 *-click-* 一组样式；含 animation-click-show（涟漪动画）
选中态	—	—	show-select 开启后出现 *-select-* 一组样式

三态样式项（*-hover-* / *-click-* / *-select-*）默认「继承常态」，只在对应 show-* 打开后才独立生效，键名与常态一一对应（如 background-hover-color）。

交互：click → 任意动作。典型：switchScreen（切页面）、switchWindow（开窗）、sendBehaviorEvent（发事件给宿主）、executeScript（执行脚本）、changeOption（改其它组件属性）。也可用多状态做按下 / 激活高亮。

{ "type": "basic-button", "uid": "w_btn", "options": {
  "position": [40, 40], "size": [120, 40],
  "text": "查看详情", "background-default-color": "#2f7bff", "border-default-radius": 8,
  "interactions": { "version": 2, "groups": [
    { "trigger": { "name": "click", "options": {} }, "interactions": [
      { "trigger": { "name": "click", "options": {} },
        "action": { "name": "switchWindow", "options": {
          "windowUid": { "refType": "element", "targetPath": ["window_detail"] }, "operate": "open" } } } ] } ] } } }

---

搜索框 basic-search

输入关键字 → 通过联动驱动其它组件筛选。默认尺寸 [260, 36]。

参数：

option	类型	默认	说明
placeholder	string	请输入搜索内容	占位提示
fuzzy-search	boolean	false	模糊匹配（$contains）
pinyin-search	boolean	false	拼音/首字母匹配（$pinyinContains，如 gz 命中广州）
realtime + realtime-min-length / realtime-debounce	boolean	false / 1 / 300	实时搜索（输入即联动，含最小触发字数与防抖 ms）
clearable	boolean	true	显示清除按钮
show-button / button-text	boolean / string	true / 搜索	搜索按钮
input-* / button-*	—	—	输入框 / 按钮的背景、文字、边框、圆角三态样式

数据绑定：linkage-field（string, 0~1）——把输入值写到该字段，驱动接收方筛选。

---

下拉菜单 basic-select

下拉选项 → 联动 / 切换 / 改参数。选项可静态配置或绑定字段生成。默认尺寸 [200, 36]。

参数：

option	类型	默认	说明
static-items	string	选项一,选项二,选项三	静态选项（逗号分隔；绑 option-field 后由数据生成）
multiple	boolean	false	多选
default-type	select	fixed	默认选中：fixed(固定值) / first / last / index(按序号)
clearable / filterable / pinyin-search	boolean	false	可清空 / 可搜索 / 拼音搜索（可搜索时全拼或首字母）
select-* / panel-* / option-*	—	—	选择器与下拉面板的背景、文字、圆角、选项高度等样式

数据绑定：option-field（string, 0~1）——用该字段值生成下拉选项。

---

分页器 basic-pagination

配合表格 / 列表做分页切换，通过联动传递当前页。默认尺寸 [400, 36]。

参数：page-size（每页条数，默认 10）、show-size-changer + size-options（条数切换）、show-total（显示总数）、text-color / active-color / item-bg / font-size（样式）。

数据绑定：count-field（0~1，绑总数字段；未绑时用 total，默认 100）。

---

列表 basic-list

数据列表展示，可显示序号 / 数值条、自动轮播滚动。默认尺寸 [280, 320]。

参数：

option	类型	默认	说明
static-items	string	示例项	静态条目（绑 title-field 后由数据生成）
show-index / row-height / show-divider	—	—	序号 / 行高 / 分割线
carousel + carousel-type / carousel-speed / carousel-page-count / carousel-dwell / carousel-loop	boolean	false	自动轮播（scroll 滚动 / page 翻页）
valueBar + value-bar-*	boolean	false	数值条（绑数值字段后按值绘制）
show-dots + dot-*	boolean	true	翻页点

数据绑定：title-field（string, 0~1，标题）、value-field（number, 0~1，数值条）。

---

进度条 basic-progress

数值进度展示，支持环形 / 条形 / 柱形，可绑字段做数据驱动。默认尺寸 [200, 200]。

参数：

option	类型	默认	说明
shape	select	ring	形状：ring(环形) / rect(条形) / column(柱形)
static-value / max-value	number	60 / 100	未绑数据时的值 / 最大值
progress-color / shape-background	color	—	进度色 / 轨道色（支持渐变）
bar-shape	select	normal	条形样式 normal / burst(分段) / bold
data-start-angle / data-end-angle / ring-size	number	-90 / 270 / 25	环形起止角、环宽（%）
label + label-position / label-text-type / label-unit / label-decimal-places	—	—	标签（percent 百分比 / normal 原值）

数据绑定：value-field（number, 0~1）——绑字段后随数据变化（也可用动态数据项驱动颜色等）。

---

内嵌网页 basic-iframe

用 iframe 内嵌外部网页 / 第三方系统。默认尺寸 [400, 300]。

参数：iframe-link（目标 URL）、heavy-load（显示时重载）、sandbox（沙箱隔离）、zoom（页面缩放）、microphone / camera（授权麦克风 / 摄像头）。

---

视图导航 nav-views

链接视图容器做多视图切换，见容器与视图 · 视图导航。

---

延伸阅读：组件手册总览 · 事件交互（按钮 / 控件驱动的触发器与动作）· 数据系统（搜索 / 下拉驱动联动筛选）。