注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

コントロール

コントロールウィジェットのカテゴリーには、次のウィジェットが含まれます。

ボタン
チェックボックス
ドロップダウン
入力ボックス
複数選択ボックス
ラジオボタン
セグメントコントロール
スライダー
テキストエリア
トグル

ボタンウィジェット

次のテーブルでは、ボタンウィジェットで利用可能なプロパティの使用方法について詳しく説明します。テーブルの後に例をいくつか示します。

プロパティ

属性	説明	データ型	必須	変更方法
cssClasses	ボタンの CSS クラスです。	string[]	いいえ	直接編集
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式（例: “{{w1.on}}”）です。	boolean	はい	直接編集
text	ボタンの表示テキストです。	string	はい	直接編集

例

ボタン

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

デフォルト

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

チェックボックスウィジェット

次のテーブルでは、チェックボックスウィジェットで利用可能なプロパティの使用方法について詳しく説明します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式（例: “{{w1.on}}”）です。	boolean	はい	直接編集
displayValues	チェックボックスグループ内の項目の表示値を定義する任意のリストです。‘values’ 内の各項目に対応する表示値が必要です。‘displayValues’ を指定しない場合は、代わりに各項目の生の値が表示されます。	string[]	いいえ	直接編集
hover	tooltipsEnabled = true の場合、このプロパティはカーソルが置かれている値を示します。	ICheckboxHover	いいえ	ユーザーのインタラクション
selectedDisplayValues	現在チェックされている項目の表示値のリストです。	string[]	はい	ユーザーのインタラクション
selectedValues	現在チェックされている項目のリストです。	any[]	はい	ユーザーのインタラクション
tooltipsEnabled	ツールチップが有効かどうかを指定します。	boolean	はい	直接編集
tooltipText	ツールチップに表示するテキストです。この値が null または空の文字列の場合、ツールチップは表示されません。HTML をサポートします。	string	いいえ	直接編集
values	チェックボックスグループ内の項目の値です。	any[]	はい	直接編集

ICheckboxHover

属性	説明	データ型	必須	変更方法
displayValue	現在カーソルが置かれているチェックボックスの表示値です。	string	はい	ユーザーのインタラクション
index	現在カーソルが置かれているチェックボックスラベルのインデックスです。	number	はい	ユーザーのインタラクション
value	現在カーソルが置かれているチェックボックスの生の値です。	any	はい	ユーザーのインタラクション

ドロップダウンウィジェット

次のテーブルでは、ドロップダウンウィジェットで利用可能なプロパティの使用方法について詳しく説明します。テーブルの後に例をいくつか示します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式（例: “{{w1.on}}”）です。	boolean	はい	直接編集
defaultPosition	ドロップダウンを開いたときに、デフォルトでウィジェットの上側と下側のどちらに表示するかを指定します。有効な値は “top” と “bottom” です。	string	いいえ	直接編集
fuzzySearchEnabled	検索のあいまい一致を切り替えます。	boolean	はい	直接編集
displayValues	ドロップダウンに表示する値です。値を指定しない場合は、‘values’ が使用されます。	any[]	いいえ	直接編集
groups	対応する ‘values’ の項目が表示されるグループです。	any[]	いいえ	直接編集
maintainValidSelection	ウィジェットが無効化されたとき、現在選択されている値が引き続き有効であれば、その選択を維持するかどうかを示します。	boolean	はい	直接編集
searchText	‘values’ 配列を絞り込むための検索テキストです。詳細は serverSearchEnabled を参照してください。	string	はい	ユーザーのインタラクション
selectedDisplayValue	ドロップダウンの表示値です。	string	はい	ユーザーのインタラクション
selectedValue	ユーザーが現在選択しているドロップダウンの値です。	any	はい	ユーザーのインタラクション
serverSearchEnabled	ユーザーが入力した検索テキストによって新しいクエリを実行するかどうかを示します。それ以外の場合は、‘values’ 配列内の一致する値をローカルで検索します。	boolean	はい	直接編集
values	‘selectedValue’ の設定元となる値です。displayValues を使用する場合は、displayValues と一対一で対応している必要があります。	any[]	はい	直接編集

例

動的ドロップダウン

Copied!1
2
3
4
5
6
7
8
{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "searchText": "John",
  "selectedValue": "65849",
  "serverSearchEnabled": true,
  "values": "{{query1.memberId}}"
}

静的ドロップダウン

Copied!1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,
  "searchText": "",
  "selectedValue": "giraffe",
  "serverSearchEnabled": false,
  "values": [
    "giraffe",
    "rhinoceros",
    "elephant"
  ]
}

デフォルト

Copied!1
2
3
4
5
6
7
{
  "disabled": false,
  "searchText": "",
  "selectedValue": null,
  "serverSearchEnabled": false,
  "values": []
}

入力ボックスウィジェット

次のテーブルでは、入力ボックスウィジェットで利用可能なプロパティの使用方法について詳しく説明します。テーブルの後に例をいくつか示します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式（例: “{{w1.on}}”）です。	boolean	はい	直接編集
placeholder	入力ボックスのプレースホルダーに使用するテキストです（IE9 はサポートされていません）。	string	いいえ	直接編集
queryNames	Enter キーを使用したときに、この入力ボックスが実行するクエリの名前です。	string[]	いいえ	直接編集
text	ユーザーがボックスに入力したテキストです。	string	はい	ユーザーのインタラクション

例

入力ボックス

Copied!1
2
3
4
5
6
{
  "disabled": false,
  "placeholder": "Choose an animal...",
  "queryName": "query1",
  "text": ""
}

アクション

アクション名	説明
clear	このアクションを実行すると、入力ボックスの値がクリアされます。

デフォルト

Copied!1
2
3
4
5
{
  "disabled": false,
  "placeholder": "placeholder goes here",
  "text": ""
}

複数選択ボックスウィジェット

次のテーブルでは、複数選択ボックスウィジェットで利用可能なプロパティの使用方法について詳しく説明します。テーブルの後に例をいくつか示します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式（例: “{{w1.on}}”）です。	boolean	はい	直接編集
displayValues	複数選択ボックスに表示する値です。値を指定しない場合は、‘values’ が使用されます。	string[]	いいえ	直接編集
fuzzySearchEnabled	検索のあいまい一致を切り替えます。	boolean	はい	直接編集
placeholder	複数選択ボックスのプレースホルダーに使用するテキストです。	string	いいえ	直接編集
hasValues	ユーザーが値を入力したかどうかを示します。	boolean	はい	ユーザーのインタラクション
selectedDisplayValues	ユーザーの現在の入力で選択されている値の表示値です。	string[]	はい	ユーザーのインタラクション
selectedValues	ユーザーの現在の入力で選択されている値です。	any[]	はい	ユーザーのインタラクション
searchText	‘values’ 配列を絞り込むための検索テキストです。詳細は serverSearchEnabled を参照してください。	string	はい	ユーザーのインタラクション
serverSearchEnabled	ユーザーが入力した検索テキストによって新しいクエリを実行するかどうかを示します。それ以外の場合は、‘values’ 配列内の一致する値をローカルで検索します。	boolean	はい	直接編集
tokenSeparator	入力内のトークンを区切る文字列です。値を指定しない場合は、入力はトークン化されません。入力内の改行文字は空白として読み取られます。	string	いいえ	直接編集
values	‘selectedValues’ の設定元となる値です。‘displayValues’ を使用する場合は、‘displayValues’ と一対一で対応している必要があります。	any[]	はい	直接編集

例

動的複数選択

Copied!1
2
3
4
5
6
7
8
9
10
{
  "disabled": false,
  "displayValues": "{{query1.memberName}}",
  "hasValues": false,
  "searchText": "John",
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": true,
  "values": "{{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,
  "hasValues": false,
  "selectedDisplayValues": [],
  "selectedValues": [],
  "serverSearchEnabled": false,
  "values": []
}

ラジオボタンウィジェット

以下のテーブルでは、ラジオボタンウィジェットで利用可能なプロパティの使用方法について詳しく説明します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式です（例：「{{w1.on}}」）。	boolean	はい	直接編集
displayValues	ラジオボタングループ内の項目の表示値を定義する任意のリストです。‘values’ の各項目に対応する表示値が必要です。‘displayValues’ を指定しない場合は、代わりに各項目の生の値が表示されます。	string[]	いいえ	直接編集
preselectFirstElement	最初の値をデフォルトで選択するかどうかを指定します。	boolean	はい	直接編集
hover	tooltipsEnabled = true の場合、このプロパティはカーソルが置かれている値を示します。	IRadioHover	いいえ	ユーザーのインタラクション
selectedDisplayValue	現在選択されている表示値です。	string	はい	ユーザーのインタラクション
selectedValue	現在選択されている値です。	any	はい	ユーザーのインタラクション
tooltipsEnabled	ツールチップを有効にするかどうかを指定します。	boolean	はい	直接編集
tooltipText	ツールチップに表示されるテキストです。この値が null または空の文字列の場合、ツールチップは表示されません。HTML をサポートします。	string	いいえ	直接編集
values	ラジオボタングループ内の項目の値です。	any[]	はい	直接編集

ICheckboxHover

属性	説明	データ型	必須	変更方法
displayValue	現在カーソルが置かれているラジオボタンの表示値です。	string	はい	ユーザーのインタラクション
index	現在カーソルが置かれているラジオボタンのラベルのインデックスです。	number	はい	ユーザーのインタラクション
value	現在カーソルが置かれているラジオボタンの生の値です。	any	はい	ユーザーのインタラクション

セグメントコントロールウィジェット

以下のテーブルでは、セグメントコントロールウィジェットで利用可能なプロパティの使用方法について詳しく説明します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式です（例：「{{w1.on}}」）。	boolean	はい	直接編集
displayValues	セグメントコントロールに表示される値です。値を指定しない場合は、‘values’ が使用されます。	any[]	いいえ	直接編集
hover	tooltipsEnabled = true の場合、このプロパティはカーソルが置かれている値を示します。	ISegmentedControlHover	いいえ	ユーザーのインタラクション
multiselectEnabled	ユーザーが1つの値のみを選択できるか、複数の値を選択できるかを指定します。	boolean	はい	直接編集
preselectFirstElement	最初の値をデフォルトで選択するかどうかを指定します。	boolean	はい	直接編集
selectionRequired	すべての値の選択を解除できるかどうかを指定します。有効にすると、このフラグによって、ウィジェット内で最後に残った選択値の選択をユーザーが解除できなくなります。ウィジェットの初期状態で値が選択されていない場合は、ユーザーが最初に選択を行った後にのみ、選択解除が禁止されます。	boolean	はい	直接編集
selectedValues	ユーザーが現在選択している値です。	any[]	はい	ユーザーのインタラクション
tooltipsEnabled	ツールチップを表示するかどうかを指定します。	boolean	はい	ユーザーのインタラクション
tooltipText	ツールチップに表示されるテキストです。HTML をサポートします。	string	いいえ	直接編集
values	‘selectedValues’ の設定元となる値です。displayValues を使用する場合は、displayValues と一対一で対応している必要があります。	any[]	はい	直接編集

ISegmentedControlHover

属性	説明	データ型	必須	変更方法
displayValue	現在カーソルが置かれているセグメントの表示値です。	string	はい	ユーザーのインタラクション
index	現在カーソルが置かれているセグメントのインデックスです。セグメントには左から右へ番号が付けられます。	number	はい	ユーザーのインタラクション
value	現在カーソルが置かれているセグメントの生の値です。	any	はい	ユーザーのインタラクション

スライダーウィジェット

以下のテーブルでは、スライダーウィジェットで利用可能なプロパティの使用方法について詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値は通常、ブール値を生成するテンプレート式です（例：「{{w1.on}}」）。	boolean	はい	直接編集
formatMode	スライダーのラベルの書式を指定します。「グループ化」は、指定した区切り文字で桁をグループ化します。たとえば、区切り文字がカンマの場合、1000000 は 1,000,000 になります。「数値」は、指定した Numeral.js ↗ の書式を使用して値の書式を設定します。「時間」は、指定した moment.js ↗ の書式を使用して値の書式を設定します。	string	はい	直接編集
formatter	「数値」または「時間」が選択されている場合、このプロパティは書式文字列を保持します。	string	いいえ	直接編集
from	範囲モードが有効な場合、このプロパティは範囲の下限値を保持します。それ以外の場合は、単一のスライダーハンドルの現在位置に対応する値を保持します。	number	はい	ユーザーのインタラクション
groupingDelimiter	「グループ化」書式が選択されている場合、このプロパティはグループを区切るための区切り文字列を保持します。	string	いいえ	直接編集
max	選択可能な最大値です。	number	はい	直接編集
min	選択可能な最小値です。	number	はい	直接編集
numLabels	表示する軸ラベルの数です。値を指定しない場合は、デフォルトは6です。	number	はい	直接編集
postfix	すべての値の末尾に追加するテキストです。たとえば、「 €」を指定すると「100」は「100 €」になります。	string	いいえ	直接編集
prefix	すべての値の先頭に追加するテキストです。たとえば、「$」を指定すると「100」は「$100」になります。	string	いいえ	直接編集
rangeEnabled	値の範囲を選択できるようにするか、単一の点のみを選択できるようにするかを指定します。	boolean	はい	直接編集
step	選択可能な値のステップ幅です。	number	いいえ	直接編集
to	範囲モードが有効な場合、このプロパティは範囲の上限値を保持します。	number	いいえ	ユーザーのインタラクション
updateOnSlide	スライダーの値を更新するタイミングを指定します。「リリース」は、ハンドルを離した後に値が更新されることを示します。「スライド」は、スライダーをドラッグする間に値が更新されることを示します。パフォーマンスへの影響があるため、軽量な操作（UI の更新など）以外では「スライド」の使用を避けてください。「スライド」による更新は100 ms 間隔に制限されます。	boolean	はい	直接編集

例

スライダー

Copied!1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,
  "from": 25,
  "groupingDelimiter": " ",
  "groupingEnabled": true,
  "max": "{{query1.maxValue}}",
  "min": 1,
  "prefix": "$",
  "rangeEnabled": true,
  "to": 50
}

デフォルト

Copied!1
2
3
4
5
6
7
8
{
  "disabled": false,
  "from": 25,
  "groupingEnabled": false,
  "max": 100,
  "min": 0,
  "rangeEnabled": false
}

テキストエリアウィジェット

次のテーブルでは、テキストエリアウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後に、いくつかの例を示します。

プロパティ

属性	説明	データ型	必須	変更方法
delimiter	2つの値の区切りを示す、1文字以上の文字列です。たとえば、text が「hello- -world」で delimiter が「- -」の場合、values は `["hello", "world"]` になります。	文字列	いいえ	直接編集
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値には通常、ブール値を生成するテンプレート式（例：「{{w1.on}}」）を使用します。	ブール値	はい	直接編集
hasValues	ユーザーが値を入力したかどうかを示します。	ブール値	はい	ユーザーのインタラクション
maxLengthEnabled	有効にすると、ユーザーが入力するテキストの長さが制限されます。	ブール値	はい	直接編集
maxLength	ボックスに入力できるテキストの最大長です。	数値	いいえ	直接編集
placeholder	テキストエリアのプレースホルダーに使用するテキストです（IE9 はサポートされません）。	文字列	いいえ	直接編集
text	ユーザーがボックスに入力するテキストです。	文字列	はい	ユーザーのインタラクション
values	inputText から取得されるユーザーの入力値です。	配列	はい	ユーザーのインタラクション

例

テキストエリア

Copied!1
2
3
4
5
6
7
8
9
10
11
12
{
  "delimiter": ";",
  "disabled": false,
  "hasValues": 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": []
}

トグルウィジェット

次のテーブルでは、トグルウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後に、いくつかの例を示します。

プロパティ

属性	説明	データ型	必須	変更方法
disabled	ユーザーがウィジェットを操作できるかどうかを指定します。デフォルトは false です。値には通常、ブール値を生成するテンプレート式（例：「{{w1.on}}」）を使用します。	ブール値	はい	直接編集
offLabel	トグルスイッチの「オフ」状態のラベルです。	文字列	はい	直接編集
onLabel	トグルスイッチの「オン」状態のラベルです。	文字列	はい	直接編集
useCustomIcons	選択すると、トグルで Blueprint のカスタムアイコンが使用されます。	チェックボックス	はい	直接編集
onIcon	トグルスイッチの「オン」状態のアイコンです。	文字列	いいえ	直接編集
offIcon	トグルスイッチの「オフ」状態のアイコンです。	文字列	いいえ	直接編集
on	トグルスイッチの現在の状態です。「オン」状態は true に対応します。	ブール値	はい	ユーザーのインタラクション