Radio コンポーネントには以下のプロパティがあります。
一般
- Label
- コンポーネントの上部に表示されるテキストです。
値: 文字列または式 - Options
- ユーザーが選択できるラジオボタンオプションのリストです。形式はオブジェクトの配列で、各オブジェクトは
label と value キーを持ちます。
値: 式
例:
${[
{
“label”: “Staging”,
“value”: “staging”
},
{
“label”: “Production”,
“value”: “production”
}
]}
デフォルト値
: ラジオがロードされたときに選択される値。<br>
**値**: 文字列または式
### 外観
Is Disabled
: 無効なスタイリングを適用し、インタラクションを取り除きます。<br>
**提供される値**: on、off
Is Visible
: コンポーネントがエンドユーザーに見えるかどうかを決定します。編集モードでは、すべてのコンポーネントは表示されたままになります。<br>
**提供される値**: on、off
### イベント
Event
: **値**: change
Reaction
: **値**: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions
: fetch<br>
**例**: [events][9] を参照してください。
: setValue<br>
**例**: `radioButtons0.setValue("production")` は `radioButtons0` コンポーネントの値を `"production"` に設定します。
イベントの詳細については、[イベント][1]を参照してください。
### データの検査
プロパティと値のペアを JSON 形式で表示します。
</div>
</details>
<details class="collapsible-section" >
<summary class="collapsible-header" tabindex="0" aria-expanded="false">
<div class="header-content">
<div class="header-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-chevron-right">
<path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</div>
<div class="header-text">
<h3 class='header-text-inner'>Search</h3>
</div>
</div>
</summary>
<div class="collapsible-content">
Search コンポーネントには、次のプロパティがあります。
### 一般
デフォルト値
: アプリが検索ボックスに入力するデフォルト値。<br>
**値**: 文字列または式
Placeholder text
: 値が入力されていない場合に表示されるテキスト。<br>
**値**: 文字列または式
### 外観
Size
: 検索コンポーネントのスケール。<br>
**提供される値**: sm、md、lg
Is Loading
: 読み込みインジケータを表示します。<br>
**提供される値**: on、off
Is Visible
: コンポーネントがエンドユーザーに見えるかどうかを決定します。編集モードでは、すべてのコンポーネントは表示されたままになります。<br>
**提供される値**: on、off
### イベント
Event
: **値**: change、submit
Reaction
: **値**: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions
: fetch<br>
**例**: [events][9] を参照してください。
: setValue<br>
**例**: `search0.setValue("search query")` は `search0` コンポーネントの値を `"search query"` に設定します。
イベントの詳細については、[イベント][1]を参照してください。
### データの検査
プロパティと値のペアを JSON 形式で表示します。
### 例
このコンポーネントをコンテキストで表示するには、[EC2 Instance Manager][3] アプリのブループリントを参照してください。
</div>
</details>
<details class="collapsible-section" >
<summary class="collapsible-header" tabindex="0" aria-expanded="false">
<div class="header-content">
<div class="header-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-chevron-right">
<path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</div>
<div class="header-text">
<h3 class='header-text-inner'>Select</h3>
</div>
</div>
</summary>
<div class="collapsible-content">
Select コンポーネントには、次のプロパティがあります。
### 一般
Label
: コンポーネントの上部に表示されるテキスト。<br>
**値**: 文字列または式
Placeholder text
: 値が入力されていない場合に表示されるテキスト。<br>
**値**: 文字列または式
Options
: ユーザーが選択できるオプションのリスト。フォーマットはオブジェクトの配列で、各オブジェクトは `label` と `value` のキーと値のペアで構成されます。<br>
**値**: 式<br>
**例**:<br>
: ```json
${[
{
"label": "Staging",
"value": "staging"
},
{
"label": "Production",
"value": "production"
}
]}
- デフォルト値
- セレクトがロードされたときに選択される値。
値: 文字列または式 - Is Multiselect
- ユーザーが一度に複数のオプションを選択できるかどうかを決定します。
提供される値: on、off
外観
- Is Disabled
- 無効なスタイリングを適用し、インタラクションを取り除きます。
提供される値: on、off - Is Visible
- コンポーネントがエンドユーザーに見えるかどうかを決定します。編集モードでは、すべてのコンポーネントは表示されたままになります。
提供される値: on、off
イベント
- Event
- 値: change
- Reaction
- 値: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
- State Functions
- fetch
例: events を参照してください。 - setValue
例: select0.setValue("staging") は select0 コンポーネントの値を "staging" に設定します。
イベントの詳細については、イベントを参照してください。
データの検査
プロパティと値のペアを JSON 形式で表示します。
例
このコンポーネントをコンテキストで表示するには、Metrics Explorer & Monitors Builder アプリのブループリントを参照してください。
