Control（控件(Control)）¶

The Control Widget category consists of the following widgets:

Button
Checkbox
Dropdown
Input box
Multiselect box
Radio button
Segmented control
Slider
Textarea
Toggle

The following tables offer usage details about the properties available to Button widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
cssClasses	The CSS classes for the button.	string[]	No	Direct Edit
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
text	The display text for the button.	string	Yes	Direct Edit

Examples¶

Button¶

{"cssClasses": ["pt-button","pt-intent-primary"],"disabled": false,"text": "Run"}

Defaults¶

{"cssClasses": ["pt-button","pt-intent-primary"],"disabled": false,"queryNames": [],"text": "Run"}

The following tables offer usage details about the properties available to Checkbox widgets.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayValues	An optional list that defines the display values of the items in the checkbox group. There should be a display value for each item in ‘values’. If ‘displayValues’ is not specified, the raw value for each item will be displayed instead.	string[]	No	Direct Edit
hover	When tooltipsEnabled = true, this property determines the value you are hovering over.	ICheckboxHover	No	User Interaction
selectedDisplayValues	The list of display values of the items that are currently checked.	string[]	Yes	User Interaction
selectedValues	The list of items that are currently checked.	any[]	Yes	User Interaction
tooltipsEnabled	Specifies whether tooltips are enabled.	boolean	Yes	Direct Edit
tooltipText	The text displayed in tooltips. If this value is null or the empty string then no tooltip will be displayed. Supports HTML.	string	No	Direct Edit
values	The values for the items in the checkbox group.	any[]	Yes	Direct Edit

ICheckboxHover¶

Attribute	Description	Type	Required	Changed By
displayValue	The display value of the checkbox currently being hovered over.	string	Yes	User Interaction
index	The index of the checkbox label currently being hovered over.	number	Yes	User Interaction
value	The raw value of the checkbox currently being hovered over.	any	Yes	User Interaction

The following tables offer usage details about the properties available to Dropdown widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
fuzzySearchEnabled	Toggle fuzzy matching for search.	boolean	Yes	Direct Edit
displayValues	The values displayed in the dropdown. If not specified, ‘values’ will be used.	any[]	No	Direct Edit
groups	The group in which corresponding ‘values’ entries will be displayed.	any[]	No	Direct Edit
maintainValidSelection	Indicates whether the currently selected value should remain the selected value when the widget is invalidated, so long as the value is still valid.	boolean	Yes	Direct Edit
searchText	Search text to filter the ‘values’ array. See serverSearchEnabled for details.	string	Yes	User Interaction
selectedDisplayValue	The displayed value of the dropdown.	string	Yes	User Interaction
selectedValue	The current user selected dropdown value.	any	Yes	User Interaction
serverSearchEnabled	Indicates that user input search text should trigger a new query. Otherwise, the ‘values’ array is searched locally for matches.	boolean	Yes	Direct Edit
values	The values from which ‘selectedValue’ is set. Should be a one-to-one mapping to displayValues if displayValues is used.	any[]	Yes	Direct Edit

Examples¶

{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "searchText": "John",
  "selectedValue": "65849",
  "serverSearchEnabled": true,
  "values": "{{query1.memberId}}"
}

{
  "disabled": false,
  "searchText": "",
  "selectedValue": "giraffe",
  "serverSearchEnabled": false,
  "values": [
    "giraffe",
    "rhinoceros",
    "elephant"
  ]
}

Defaults¶

{
  "disabled": false,
  "searchText": "",
  "selectedValue": null,
  "serverSearchEnabled": false,
  "values": []
}

The following tables offer usage details about the properties available to Input Box widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
placeholder	The text to use for the input box placeholder (no IE9 support).	string	No	Direct Edit
queryNames	The names of the queries this input box should execute when the Enter key is used.	string[]	No	Direct Edit
text	The text the user has typed in the box.	string	Yes	User Interaction

Examples¶

Input Box¶

{
  "disabled": false,
  "placeholder": "Choose an animal...",
  "queryName": "query1",
  "text": ""
}

Actions¶

Action Name	Description
clear	Triggering this action clears the value in the input box.

Defaults¶

{
  "disabled": false,
  "placeholder": "placeholder goes here",
  "text": ""
}

The following tables offer usage details about the properties available to Multiselect Box widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayValues	The values displayed in the multiselect box. If not specified, ‘values’ will be used.	string[]	No	Direct Edit
fuzzySearchEnabled	Toggle fuzzy matching for search.	boolean	Yes	Direct Edit
placeholder	The text to use for the multiselect box placeholder	string	No	Direct Edit
hasValues	Indicates if the user has input a value.	boolean	Yes	User Interaction
selectedDisplayValues	The current user input displayed selected values.	string[]	Yes	User Interaction
selectedValues	The current user input selected values.	any[]	Yes	User Interaction
searchText	Search text to filter the ‘values’ array. See serverSearchEnabled for details.	string	Yes	User Interaction
serverSearchEnabled	Indicates that user input search text should trigger a new query. Otherwise, the ‘values’ array is searched locally for matches.	boolean	Yes	Direct Edit
tokenSeparator	String that separates tokens in the input. If not specified, input will not be tokenized. New line characters are read as spaces in the input.	string	No	Direct Edit
values	The values from which ‘selectedValues’ is set. Should be a one-to-one mapping to ‘displayValues’ if ‘displayValues’ is used.	any[]	Yes	Direct Edit

Examples¶

Dynamic Multiselect¶

{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "hasValues": false,
  "searchText": "John",
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": true,
  "values": "{{query1.memberId}}"
}

Static Multiselect¶

{
  "disabled": false,
  "hasValues": true,
  "selectedDisplayValues": [
    "giraffe",
    "rhinoceros"
  ],
  "selectedValues": [
    "giraffe",
    "rhinoceros"
  ],
  "serverSearchEnabled": false,
  "values": [
    "giraffe",
    "rhinoceros",
    "elephant"
  ]
}

Defaults¶

{
  "disabled": false,
  "hasValues": false,
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": false,
  "values": []
}

The following tables offer usage details about the properties available to radio button widgets.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayValues	An optional list that defines the display values of the items in the radio button group. There should be a display value for each item in ‘values’. If ‘displayValues’ is not specified, the raw value for each item will be displayed instead.	string[]	No	Direct Edit
preselectFirstElement	Specifies whether the first value is selected by default or not.	boolean	Yes	Direct Edit
hover	When tooltipsEnabled = true, this property determines the value you are hovering over.	IRadioHover	No	User Interaction
selectedDisplayValue	The display value that is currently selected.	string	Yes	User Interaction
selectedValue	The value that is currently selected.	any	Yes	User Interaction
tooltipsEnabled	Specifies whether tooltips are enabled.	boolean	Yes	Direct Edit
tooltipText	The text displayed in tooltips. If this value is null or the empty string then no tooltip will be displayed. Supports HTML.	string	No	Direct Edit
values	The values for the items in the radio button group.	any[]	Yes	Direct Edit

ICheckboxHover¶

Attribute	Description	Type	Required	Changed By
displayValue	The display value of the radio currently being hovered over.	string	Yes	User Interaction
index	The index of the radio label currently being hovered over.	number	Yes	User Interaction
value	The raw value of the radio currently being hovered over.	any	Yes	User Interaction

The following tables offer usage details about the properties available to Segmented Control widgets.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayValues	The values displayed in the segmented control. If not specified, ‘values’ will be used.	any[]	No	Direct Edit
hover	When tooltipsEnabled = true, this property determines the value you are hovering over.	ISegmentedControlHover	No	User Interaction
multiselectEnabled	Specifies whether the user can select only one value or multiple values.	boolean	Yes	Direct Edit
preselectFirstElement	Specifies whether the first value is selected by default or not.	boolean	Yes	Direct Edit
selectionRequired	Specifies whether you can deselect all values. When enabled, this flag prevents the user from deselecting the final selected value in the widget. If the widget starts off with no values selected, prevents deselecting only after the user makes an initial selection.	boolean	Yes	Direct Edit
selectedValues	The current user selected value or values.	any[]	Yes	User Interaction
tooltipsEnabled	Specifies whether tooltips should be shown or not	boolean	Yes	User Interaction
tooltipText	The text displayed in tooltips. Supports HTML.	string	No	Direct Edit
values	The values from which ‘selectedValues’ is set. Should be a one-to-one mapping to displayValues if displayValues is used.	any[]	Yes	Direct Edit

ISegmentedControlHover¶

Attribute	Description	Type	Required	Changed By
displayValue	The display value of the segment currently being hovered over.	string	Yes	User Interaction
index	The index of the segment currently being hovered over. segments are numbered from left to right	number	Yes	User Interaction
value	The raw value of the segment currently being hovered over.	any	Yes	User Interaction

The following tables offer usage details about the properties available to Slider widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
formatMode	Specifies how to format the slider labels. “Grouped” groups digits together with a specified delimiter. For example: 1000000 will become 1,000,000 if the delimiter is a comma. “Numeric” will format the values using a provided Numeral.js ↗ format. “Time” will format the values using a provided moment.js ↗ format.	string	Yes	Direct Edit
formatter	When “Numeric” or “Time” is selected, this property holds the format string.	string	No	Direct Edit
from	When range mode is enabled, this property holds the value of the lower bound of the range. Otherwise, it holds the value associated with the current position of the single slider handle.	number	Yes	User Interaction
groupingDelimiter	When the “Grouped” format is selected, this property holds the delimiter string used to separate groups.	string	No	Direct Edit
max	The maximum selectable value.	number	Yes	Direct Edit
min	The minimum selectable value.	number	Yes	Direct Edit
numLabels	The number of axis labels to display. If no value is provided, defaults to 6.	number	Yes	Direct Edit
postfix	The text to append to all values. For example: ” €” will convert “100” in to “100 €”	string	No	Direct Edit
prefix	The text to prepend to all values. For example: “$” will convert “100” in to “$100”	string	No	Direct Edit
rangeEnabled	Specifies whether selection is enabled for a range of values or just a single point.	boolean	Yes	Direct Edit
step	The step size for selectable values.	number	No	Direct Edit
to	When range mode is enabled, this property holds the value of the upper bound of the range.	number	No	User Interaction
updateOnSlide	Specifies when the value of the slider is updated. “Release” indicates that the value will be updated after the handle is released. “Slide” indicates that the value will be updated as the slider is dragged. You should avoid using “Slide” except for light operations (such as UI updates) due to performance impact. “Slide” updates are throttled to 100ms.	boolean	Yes	Direct Edit

Examples¶

Slider¶

{
  "disabled": false,
  "from": 25,
  "groupingDelimiter": " ",
  "groupingEnabled": true,
  "max": "{{query1.maxValue}}",
  "min": 1,
  "prefix": "$",
  "rangeEnabled": true,
  "to": 50
}

Defaults¶

{
  "disabled": false,
  "from": 25,
  "groupingEnabled": false,
  "max": 100,
  "min": 0,
  "rangeEnabled": false
}

The following tables offer usage details about the properties available to Textarea widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
delimiter	A sequence of one or more characters which indicates separation of two values. For instance, if ‘text’ is “hello- -world” and ‘delimiter’ is “- -“, ‘values’ will result to `["hello", "world"]`	string	No	Direct Edit
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
hasValues	Indicates if the user has input a value.	boolean	Yes	User Interaction
maxLengthEnabled	If enabled, limits the length of text entered by the user.	boolean	Yes	Direct Edit
maxLength	The maximum length of text allowed to be typed into the box.	number	No	Direct Edit
placeholder	The text to use for the textarea placeholder (no IE9 support)	string	No	Direct Edit
text	The text the user types into the box.	string	Yes	User Interaction
values	The user input values derived from the inputText.	array	Yes	User Interaction

Examples¶

Textarea¶

{
  "delimiter": ";",
  "disabled": false,
  "hasValues": true,
  "placeholder": "Choose an animal...",
  "text": "giraffe; rhinoceros; elephant",
  "values": [
    "giraffe",
    "rhinoceros",
    "elephant"
  ]
}

Defaults¶

{
  "delimiter": ";",
  "disabled": false,
  "hasValues": false,
  "text": "",
  "values": []
}

The following tables offer usage details about the properties available to Toggle widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
offLabel	The label for the ‘off’ state of the toggle switch	string	Yes	Direct Edit
onLabel	The label for the ‘on’ state of the toggle switch	string	Yes	Direct Edit
useCustomIcons	When selected, the toggle will use custom icons from Blueprint	checkbox	Yes	Direct Edit
onIcon	The icon for the ‘on’ state of the toggle switch	string	No	Direct Edit
offIcon	The icon for the ‘off’ state of the toggle switch	string	No	Direct Edit
on	The current state of the toggle switch, with the ‘on’ state corresponding to ‘true’	boolean	Yes	User Interaction

中文翻译¶

控件(Control)¶

控件(Control)小部件类别包含以下小部件：

按钮(Button)
复选框(Checkbox)
下拉菜单(Dropdown)
输入框(Input box)
多选框(Multiselect box)
单选按钮(Radio button)
分段控件(Segmented control)
滑块(Slider)
文本域(Textarea)
开关(Toggle)

按钮(Button)小部件¶

下表提供了按钮(Button)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
cssClasses	按钮的CSS类。	string[]	否	直接编辑(Direct Edit)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
text	按钮的显示文本。	string	是	直接编辑(Direct Edit)

示例(Examples)¶

按钮(Button)¶

{"cssClasses": ["pt-button","pt-intent-primary"],"disabled": false,"text": "运行"}

默认值(Defaults)¶

{"cssClasses": ["pt-button","pt-intent-primary"],"disabled": false,"queryNames": [],"text": "运行"}

复选框(Checkbox)小部件¶

下表提供了复选框(Checkbox)小部件可用属性的使用详情。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
displayValues	一个可选列表，用于定义复选框组中各项目的显示值。'values'中的每个项目都应有一个对应的显示值。如果未指定'displayValues'，则将显示每个项目的原始值。	string[]	否	直接编辑(Direct Edit)
hover	当tooltipsEnabled = true时，此属性确定当前悬停的值。	ICheckboxHover	否	用户交互(User Interaction)
selectedDisplayValues	当前已选中项目的显示值列表。	string[]	是	用户交互(User Interaction)
selectedValues	当前已选中的项目列表。	any[]	是	用户交互(User Interaction)
tooltipsEnabled	指定是否启用工具提示。	boolean	是	直接编辑(Direct Edit)
tooltipText	工具提示中显示的文本。如果此值为null或空字符串，则不显示工具提示。支持HTML。	string	否	直接编辑(Direct Edit)
values	复选框组中各项目的值。	any[]	是	直接编辑(Direct Edit)

ICheckboxHover¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
displayValue	当前悬停的复选框的显示值。	string	是	用户交互(User Interaction)
index	当前悬停的复选框标签的索引。	number	是	用户交互(User Interaction)
value	当前悬停的复选框的原始值。	any	是	用户交互(User Interaction)

下表提供了下拉菜单(Dropdown)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
fuzzySearchEnabled	切换搜索的模糊匹配功能。	boolean	是	直接编辑(Direct Edit)
displayValues	下拉菜单中显示的值。如果未指定，则使用'values'。	any[]	否	直接编辑(Direct Edit)
groups	对应的'values'条目将显示在其中的组。	any[]	否	直接编辑(Direct Edit)
maintainValidSelection	指示当小部件失效时，只要当前选中的值仍然有效，是否应保持其为选中值。	boolean	是	直接编辑(Direct Edit)
searchText	用于过滤'values'数组的搜索文本。详情请参见serverSearchEnabled。	string	是	用户交互(User Interaction)
selectedDisplayValue	下拉菜单的显示值。	string	是	用户交互(User Interaction)
selectedValue	当前用户选中的下拉菜单值。	any	是	用户交互(User Interaction)
serverSearchEnabled	指示用户输入的搜索文本是否应触发新的查询。否则，将在本地搜索'values'数组以查找匹配项。	boolean	是	直接编辑(Direct Edit)
values	用于设置'selectedValue'的值。如果使用了displayValues，则应与displayValues一一对应。	any[]	是	直接编辑(Direct Edit)

示例(Examples)¶

动态下拉菜单(Dynamic Dropdown)¶

{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "searchText": "John",
  "selectedValue": "65849",
  "serverSearchEnabled": true,
  "values": "{{query1.memberId}}"
}

静态下拉菜单(Static Dropdown)¶

{
  "disabled": false,
  "searchText": "",
  "selectedValue": "长颈鹿",
  "serverSearchEnabled": false,
  "values": [
    "长颈鹿",
    "犀牛",
    "大象"
  ]
}

默认值(Defaults)¶

{
  "disabled": false,
  "searchText": "",
  "selectedValue": null,
  "serverSearchEnabled": false,
  "values": []
}

输入框(Input Box)小部件¶

下表提供了输入框(Input Box)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
placeholder	输入框占位符文本（不支持IE9）。	string	否	直接编辑(Direct Edit)
queryNames	此输入框在使用Enter键时应执行的查询名称。	string[]	否	直接编辑(Direct Edit)
text	用户在框中输入的文本。	string	是	用户交互(User Interaction)

示例(Examples)¶

输入框(Input Box)¶

{
  "disabled": false,
  "placeholder": "选择一种动物...",
  "queryName": "query1",
  "text": ""
}

操作(Actions)¶

操作名称(Action Name)	描述(Description)
clear	触发此操作将清除输入框中的值。

默认值(Defaults)¶

{
  "disabled": false,
  "placeholder": "在此输入占位符",
  "text": ""
}

多选框(Multiselect Box)小部件¶

下表提供了多选框(Multiselect Box)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
displayValues	多选框中显示的值。如果未指定，则使用'values'。	string[]	否	直接编辑(Direct Edit)
fuzzySearchEnabled	切换搜索的模糊匹配功能。	boolean	是	直接编辑(Direct Edit)
placeholder	多选框的占位符文本。	string	否	直接编辑(Direct Edit)
hasValues	指示用户是否已输入值。	boolean	是	用户交互(User Interaction)
selectedDisplayValues	当前用户输入的已选显示值。	string[]	是	用户交互(User Interaction)
selectedValues	当前用户输入的已选值。	any[]	是	用户交互(User Interaction)
searchText	用于过滤'values'数组的搜索文本。详情请参见serverSearchEnabled。	string	是	用户交互(User Interaction)
serverSearchEnabled	指示用户输入的搜索文本是否应触发新的查询。否则，将在本地搜索'values'数组以查找匹配项。	boolean	是	直接编辑(Direct Edit)
tokenSeparator	用于分隔输入中标记的字符串。如果未指定，输入将不会被标记化。输入中的换行符将被视为空格。	string	否	直接编辑(Direct Edit)
values	用于设置'selectedValues'的值。如果使用了'displayValues'，则应与'displayValues'一一对应。	any[]	是	直接编辑(Direct Edit)

示例(Examples)¶

动态多选(Dynamic Multiselect)¶

{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "hasValues": false,
  "searchText": "John",
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": true,
  "values": "{{query1.memberId}}"
}

静态多选(Static Multiselect)¶

{
  "disabled": false,
  "hasValues": true,
  "selectedDisplayValues": [
    "长颈鹿",
    "犀牛"
  ],
  "selectedValues": [
    "长颈鹿",
    "犀牛"
  ],
  "serverSearchEnabled": false,
  "values": [
    "长颈鹿",
    "犀牛",
    "大象"
  ]
}

默认值(Defaults)¶

{
  "disabled": false,
  "hasValues": false,
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": false,
  "values": []
}

单选按钮(Radio button)小部件¶

下表提供了单选按钮(Radio button)小部件可用属性的使用详情。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
displayValues	一个可选列表，用于定义单选按钮组中各项目的显示值。'values'中的每个项目都应有一个对应的显示值。如果未指定'displayValues'，则将显示每个项目的原始值。	string[]	否	直接编辑(Direct Edit)
preselectFirstElement	指定是否默认选中第一个值。	boolean	是	直接编辑(Direct Edit)
hover	当tooltipsEnabled = true时，此属性确定当前悬停的值。	IRadioHover	否	用户交互(User Interaction)
selectedDisplayValue	当前选中的显示值。	string	是	用户交互(User Interaction)
selectedValue	当前选中的值。	any	是	用户交互(User Interaction)
tooltipsEnabled	指定是否启用工具提示。	boolean	是	直接编辑(Direct Edit)
tooltipText	工具提示中显示的文本。如果此值为null或空字符串，则不显示工具提示。支持HTML。	string	否	直接编辑(Direct Edit)
values	单选按钮组中各项目的值。	any[]	是	直接编辑(Direct Edit)

ICheckboxHover¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
displayValue	当前悬停的单选按钮的显示值。	string	是	用户交互(User Interaction)
index	当前悬停的单选按钮标签的索引。	number	是	用户交互(User Interaction)
value	当前悬停的单选按钮的原始值。	any	是	用户交互(User Interaction)

分段控件(Segmented Control)小部件¶

下表提供了分段控件(Segmented Control)小部件可用属性的使用详情。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
displayValues	分段控件中显示的值。如果未指定，则使用'values'。	any[]	否	直接编辑(Direct Edit)
hover	当tooltipsEnabled = true时，此属性确定当前悬停的值。	ISegmentedControlHover	否	用户交互(User Interaction)
multiselectEnabled	指定用户是只能选择一个值还是可以选择多个值。	boolean	是	直接编辑(Direct Edit)
preselectFirstElement	指定是否默认选中第一个值。	boolean	是	直接编辑(Direct Edit)
selectionRequired	指定是否允许取消选择所有值。启用时，此标志阻止用户取消选择小部件中最后选中的值。如果小部件初始时没有选中任何值，则仅在用户进行初始选择后才阻止取消选择。	boolean	是	直接编辑(Direct Edit)
selectedValues	当前用户选中的值或值集合。	any[]	是	用户交互(User Interaction)
tooltipsEnabled	指定是否显示工具提示。	boolean	是	用户交互(User Interaction)
tooltipText	工具提示中显示的文本。支持HTML。	string	否	直接编辑(Direct Edit)
values	用于设置'selectedValues'的值。如果使用了displayValues，则应与displayValues一一对应。	any[]	是	直接编辑(Direct Edit)

ISegmentedControlHover¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
displayValue	当前悬停的分段的显示值。	string	是	用户交互(User Interaction)
index	当前悬停的分段的索引。分段从左到右编号。	number	是	用户交互(User Interaction)
value	当前悬停的分段的原始值。	any	是	用户交互(User Interaction)

滑块(Slider)小部件¶

下表提供了滑块(Slider)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
formatMode	指定如何格式化滑块标签。"Grouped"使用指定的分隔符将数字分组。例如：如果分隔符是逗号，1000000将变为1,000,000。"Numeric"将使用提供的Numeral.js ↗格式来格式化值。"Time"将使用提供的moment.js ↗格式来格式化值。	string	是	直接编辑(Direct Edit)
formatter	当选择"Numeric"或"Time"时，此属性保存格式字符串。	string	否	直接编辑(Direct Edit)
from	当启用范围模式时，此属性保存范围下限的值。否则，它保存与单个滑块手柄当前位置关联的值。	number	是	用户交互(User Interaction)
groupingDelimiter	当选择"Grouped"格式时，此属性保存用于分隔组的分隔符字符串。	string	否	直接编辑(Direct Edit)
max	最大可选值。	number	是	直接编辑(Direct Edit)
min	最小可选值。	number	是	直接编辑(Direct Edit)
numLabels	要显示的轴标签数量。如果未提供值，默认为6。	number	是	直接编辑(Direct Edit)
postfix	要附加到所有值之后的文本。例如：" €"会将"100"转换为"100 €"。	string	否	直接编辑(Direct Edit)
prefix	要添加到所有值之前的文本。例如："$"会将"100"转换为"$100"。	string	否	直接编辑(Direct Edit)
rangeEnabled	指定是启用值范围的选择还是仅启用单个点的选择。	boolean	是	直接编辑(Direct Edit)
step	可选值的步长。	number	否	直接编辑(Direct Edit)
to	当启用范围模式时，此属性保存范围上限的值。	number	否	用户交互(User Interaction)
updateOnSlide	指定滑块值何时更新。"Release"表示手柄释放后更新值。"Slide"表示拖动滑块时更新值。由于性能影响，除轻量操作（如UI更新）外，应避免使用"Slide"。"Slide"更新被限制为每100ms一次。	boolean	是	直接编辑(Direct Edit)

示例(Examples)¶

滑块(Slider)¶

{
  "disabled": false,
  "from": 25,
  "groupingDelimiter": " ",
  "groupingEnabled": true,
  "max": "{{query1.maxValue}}",
  "min": 1,
  "prefix": "$",
  "rangeEnabled": true,
  "to": 50
}

默认值(Defaults)¶

{
  "disabled": false,
  "from": 25,
  "groupingEnabled": false,
  "max": 100,
  "min": 0,
  "rangeEnabled": false
}

文本域(Textarea)小部件¶

下表提供了文本域(Textarea)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
delimiter	一个或多个字符组成的序列，用于指示两个值的分隔。例如，如果'text'为"hello- -world"且'delimiter'为"- -"，则'values'将得到`["hello", "world"]`。	string	否	直接编辑(Direct Edit)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
hasValues	指示用户是否已输入值。	boolean	是	用户交互(User Interaction)
maxLengthEnabled	如果启用，则限制用户输入的文本长度。	boolean	是	直接编辑(Direct Edit)
maxLength	允许输入到框中的文本的最大长度。	number	否	直接编辑(Direct Edit)
placeholder	文本域的占位符文本（不支持IE9）。	string	否	直接编辑(Direct Edit)
text	用户在框中输入的文本。	string	是	用户交互(User Interaction)
values	从inputText派生的用户输入值。	array	是	用户交互(User Interaction)

示例(Examples)¶

文本域(Textarea)¶

{
  "delimiter": ";",
  "disabled": false,
  "hasValues": true,
  "placeholder": "选择一种动物...",
  "text": "长颈鹿; 犀牛; 大象",
  "values": [
    "长颈鹿",
    "犀牛",
    "大象"
  ]
}

默认值(Defaults)¶

{
  "delimiter": ";",
  "disabled": false,
  "hasValues": false,
  "text": "",
  "values": []
}

开关(Toggle)小部件¶

下表提供了开关(Toggle)小部件可用属性的使用详情。表格后附有若干示例。

属性(Properties)¶

属性(Attribute)	描述(Description)	类型(Type)	是否必需(Required)	变更方式(Changed By)
disabled	指定用户是否可以与小部件交互。默认为false。值通常为生成布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑(Direct Edit)
offLabel	开关"关闭"状态的标签。	string	是	直接编辑(Direct Edit)
onLabel	开关"开启"状态的标签。	string	是	直接编辑(Direct Edit)
useCustomIcons	选中时，开关将使用来自Blueprint的自定义图标。	checkbox	是	直接编辑(Direct Edit)
onIcon	开关"开启"状态的图标。	string	否	直接编辑(Direct Edit)
offIcon	开关"关闭"状态的图标。	string	否	直接编辑(Direct Edit)
on	开关的当前状态，"开启"状态对应'true'。	boolean	是	用户交互(User Interaction)

Control（控件(Control)）¶

Button widget¶

Properties¶

Examples¶

Button¶

Defaults¶

Checkbox widget¶

Properties¶

ICheckboxHover¶

Dropdown widget¶

Properties¶

Examples¶

Dynamic Dropdown¶

Static Dropdown¶

Defaults¶

Input Box widget¶

Properties¶

Examples¶

Input Box¶

Actions¶

Defaults¶

Multiselect Box widget¶

Properties¶

Examples¶

Dynamic Multiselect¶

Static Multiselect¶

Defaults¶

Radio button widget¶

Properties¶

ICheckboxHover¶

Segmented Control widget¶

Properties¶

ISegmentedControlHover¶

Slider widget¶

Properties¶

Examples¶

Slider¶

Defaults¶

Textarea widget¶

Properties¶

Examples¶

Textarea¶

Defaults¶

Toggle widget¶

Properties¶

中文翻译¶

控件(Control)¶

按钮(Button)小部件¶

属性(Properties)¶

示例(Examples)¶

按钮(Button)¶

默认值(Defaults)¶

复选框(Checkbox)小部件¶

属性(Properties)¶

ICheckboxHover¶

下拉菜单(Dropdown)小部件¶

属性(Properties)¶

示例(Examples)¶

动态下拉菜单(Dynamic Dropdown)¶

静态下拉菜单(Static Dropdown)¶

默认值(Defaults)¶

输入框(Input Box)小部件¶

属性(Properties)¶

示例(Examples)¶

输入框(Input Box)¶

操作(Actions)¶

默认值(Defaults)¶

多选框(Multiselect Box)小部件¶

属性(Properties)¶

示例(Examples)¶

动态多选(Dynamic Multiselect)¶

静态多选(Static Multiselect)¶

默认值(Defaults)¶

单选按钮(Radio button)小部件¶

属性(Properties)¶

ICheckboxHover¶

分段控件(Segmented Control)小部件¶

属性(Properties)¶

ISegmentedControlHover¶

滑块(Slider)小部件¶