控件

控件微件类别包含以下微件：

• 按钮
• 复选框
• 下拉框
• 输入框
• 多选框
• 单选按钮
• 分段控件
• 滑块
• 文本区域
• 切换按钮

---

按钮微件

以下表格提供了按钮微件可用属性的使用详情。表格后附有几个示例。

属性

示例

按钮

Copied!
1
2
3
4
5
{
  "cssClasses": ["pt-button", "pt-intent-primary"], // CSS类，用于定义按钮的样式
  "disabled": false, // 按钮是否禁用，false表示未禁用
  "text": "Run" // 按钮上显示的文本
}

Copied!
1
2
3
4
5
6
{
  "cssClasses": ["pt-button", "pt-intent-primary"], // CSS类名数组，指定按钮的样式和意图
  "disabled": false, // 按钮是否禁用，false表示按钮可以使用
  "queryNames": [], // 查询名称数组，目前为空，可能用于存储与按钮相关的查询
  "text": "Run" // 按钮上显示的文本
}

---

复选框微件

下表提供了复选框微件可用属性的使用详情。

属性

ICheckboxHover

---

下拉微件

下表提供了下拉微件可用属性的使用详情。若干示例跟随在表格之后。

属性

示例

动态下拉列表

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false,  // 指示此元素是否被禁用，false 表示未禁用
  "displayValues": "{{query1.memberName}}",  // 显示的值，使用模板引擎从 query1 中获取 memberName
  "searchText": "John",  // 搜索框中的文本，默认搜索文本为 "John"
  "selectedValue": "65849",  // 已选择的值，当前选中的 ID 为 "65849"
  "serverSearchEnabled": true,  // 是否启用服务器端搜索，true 表示启用
  "values": "{{query1.memberId}}"  // 值的来源，通过模板引擎从 query1 中获取 memberId
}

静态下拉菜单

Copied!
1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,  // 控件是否禁用，false表示未禁用
  "searchText": "",   // 搜索框中的文本，默认为空字符串
  "selectedValue": "giraffe",  // 当前选中的值，默认为"giraffe"
  "serverSearchEnabled": false,  // 是否启用服务器端搜索，false表示不启用
  "values": [
    "giraffe",    // 可供选择的值之一：长颈鹿
    "rhinoceros", // 可供选择的值之一：犀牛
    "elephant"    // 可供选择的值之一：大象
  ]
}

Copied!
1
2
3
4
5
6
7
{
  "disabled": false,  // 是否禁用
  "searchText": "",  // 搜索文本
  "selectedValue": null,  // 选中的值
  "serverSearchEnabled": false,  // 是否启用服务器搜索
  "values": []  // 值列表
}

---

输入框微件

以下表格提供了输入框微件可用属性的使用详情。表格后面是几个例子。

属性

示例

输入框

Copied!
1
2
3
4
5
6
{
  "disabled": false,  // 控制组件是否禁用，false表示启用
  "placeholder": "Choose an animal...",  // 输入框的占位符文本
  "queryName": "query1",  // 查询的名称或标识符
  "text": ""  // 输入的文本内容，初始为空
}

默认设置

Copied!
1
2
3
4
5
{
  "disabled": false,  // 控制是否禁用的标志，false表示未禁用
  "placeholder": "placeholder goes here",  // 输入框的占位符文本
  "text": ""  // 输入框中的实际文本内容，默认为空字符串
}

---

多选框微件

下表提供了多选框微件可用属性的使用详情。表格后面是几个示例。

属性

示例

动态多选

Copied!
1
2
3
4
5
6
7
8
9
10
{
  "disabled": false,  // 控件是否被禁用，false表示未禁用
  "displayValues": "{{query1.memberName}}",  // 显示的值，动态绑定到query1的memberName字段
  "hasValues": false,  // 是否包含值，false表示当前没有可用值
  "searchText": "John",  // 搜索框中的默认文本
  "selectedDisplayValues": [],  // 用户选择后显示的值，目前为空
  "selectedValues": [],  // 用户选择的值，目前为空
  "serverSearchEnabled": true,  // 是否启用服务器端搜索，true表示启用
  "values": "{{query1.memberId}}"  // 可用的值，动态绑定到query1的memberId字段
}

静态多选

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "disabled": false, // 表示该功能未禁用
  "hasValues": true, // 表示存在可用的值
  "selectedDisplayValues": [
    "giraffe", // 长颈鹿
    "rhinoceros" // 犀牛
  ],
  "selectedValues": [
    "giraffe", // 长颈鹿
    "rhinoceros" // 犀牛
  ],
  "serverSearchEnabled": false, // 表示服务器搜索功能未启用
  "values": [
    "giraffe", // 长颈鹿
    "rhinoceros", // 犀牛
    "elephant" // 大象
  ]
}

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false,  // 指示该功能或选项是否被禁用，false表示启用
  "hasValues": false,  // 指示是否有可用的值，false表示没有可用值
  "selectedDisplayValues": [],  // 用户选择的显示值列表，当前为空
  "selectedValues": [],  // 用户选择的值列表，当前为空
  "serverSearchEnabled": false,  // 是否启用服务器端搜索，false表示未启用
  "values": []  // 可用值的列表，当前为空
}

---

单选按钮微件

下表提供了有关单选按钮微件可用属性的使用详细信息。

属性

ICheckboxHover

---

分段控制微件

下表提供了有关分段控制微件可用属性的使用详细信息。

属性

ISegmentedControlHover

---

滑块微件

下表提供了有关滑块微件可用属性的使用详细信息。表格后面跟随几个示例。

属性

示例

滑块

Copied!
1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,  // 启用状态，false表示启用
  "from": 25,  // 范围的起始值
  "groupingDelimiter": " ",  // 分组分隔符
  "groupingEnabled": true,  // 启用分组，true表示启用
  "max": "{{query1.maxValue}}",  // 最大值，动态获取自query1的maxValue
  "min": 1,  // 最小值
  "prefix": "$",  // 前缀符号，这里是美元符号
  "rangeEnabled": true,  // 启用范围，true表示启用
  "to": 50  // 范围的结束值
}

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false,          // 是否禁用，false表示未禁用
  "from": 25,                 // 起始值为25
  "groupingEnabled": false,   // 是否启用分组，false表示未启用
  "max": 100,                 // 最大值为100
  "min": 0,                   // 最小值为0
  "rangeEnabled": false       // 是否启用范围，false表示未启用
}

---

文本区域微件

下表提供了文本区域微件可用属性的使用详情。表格后附有几个示例。

属性

示例

文本区域

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
{
  "delimiter": ";",  // 分隔符，用于分隔多个值
  "disabled": false, // 是否禁用此项，false表示未禁用
  "hasValues": true, // 指示是否存在值，true表示存在
  "placeholder": "Choose an animal...", // 占位符文本，提示用户选择动物
  "text": "giraffe; rhinoceros; elephant", // 显示的文本，列出所有动物
  "values": [
    "giraffe",    // 长颈鹿
    "rhinoceros", // 犀牛
    "elephant"    // 大象
  ]
}

Copied!
1
2
3
4
5
6
7
{
  "delimiter": ";", // 定义数据分隔符为分号
  "disabled": false, // 表示未禁用
  "hasValues": false, // 指示当前没有值
  "text": "", // 文本字段为空
  "values": [] // 值列表为空
}

---

切换微件

下表提供了关于切换微件可用属性的使用详情。表格后面有几个示例。

属性