- 切り替え
🧬 コンポーネントを組み立てます
切り替え
Contributeスイッチとは？
Switch コンポーネントは、ユーザーが “on” と “off” という 2 つの状態を切り替えることができるユーザーインターフェイス要素です。
プロパティー
| プロパティー | 説明 |
|---|---|
| 既定値 | コンポーネントの初期値。 {{}}}にJavaScriptを入力すると、初期値を動的に変更することができます。 |
| ラベル | ユーザーに表示されるフィールドの名前 |
| 図表番号 | フィールドを詳細に説明するために使用されるキャプションです。 |
| 非表示ラベル | ラベルを表示するかどうかを設定します |
| 位置 | コンポーネントに対する相対的なラベルの位置を設定します |
| 配置 | ラベルの配置を設定 |
| イベントハンドラー | トリガクエリ、コンポーネントのイベントに応じてコンポーネントを制御したり、他のAPIを呼び出したりします。 |
| 読み込み中 | コンポーネントがロードインジケータを表示するかどうか。 |
| 無効 | コンポーネントが無効化されているかどうかのステータスを制御します。 無効になっている場合、コンポーネントを変更したりフォーカスしたりすることはできません。 |
| ツールチップ | ユーザーはコンポーネントツールチップを入力できます。 ツールチップがフォーカスされると表示されます。 Markdown 形式がサポートされています。 |
| Hidden | コンポーネントが非表示になるかどうかを動的に制御します。 動的ブール値を使用して非表示状態を変更できます。 |
| テーマの色 | ボタンの背景色と不透明度を指定できます |
方法
他のコンポーネントを使用してコンポーネントを制御できます。 以下の3つの方法をサポートします。
- setValue
選択した値を設定するには、例えば {{‘value1’}}
| プロパティー | 説明 |
|---|---|
| 値 | 選択した値 |
- clearValue
選択した値を消去するには
- 切り替え
スイッチを “off” 状態から “on” 状態に変更するか、逆に変更する
使用例:
組み込みイベントシステムを使用して、他のコンポーネントの onClick イベントをリッスンするコンポーネントのサポートを切り替えます。 以下の例に従って設定します:
- リッスンしたいコンポーネントにイベントトリガーを追加します。 例えば、Button コンポーネントの
onClickイベントをリッスンしたい場合、そのボタンコンポーネントにイベントトリガーを追加します。 - Edit event handlerで
Control componentを実行中に選択し、更新するSwitchコンポーネントをイベントのターゲットとして選択します。 toggleアクションを選択します。 イベントがトリガーされると(ボタンがクリックされたとき)、スイッチコンポーネントが切り替わり、ステータスが更新されます。- イベントトリガーの設定を保存し、リッスンしたい他のコンポーネントに対して処理を繰り返します。
イベントトリガーを設定すると、他のコンポーネントで onClick イベントがトリガーされるたびに、switch コンポーネントは自動的に更新されます。 これにより、ユーザーの入力にリアルタイムで応答する動的インターフェイスを作成できます。 ユーザーがアプリケーションを操作したり操作したりできるようになります。
イベントハンドラ：
| イベント | 説明 |
|---|---|
| 変更 | ユーザーが選択したオプション値を変更すると、ユーザーによってカスタマイズされた特定のアクションを実行します。 |
データ
ボタンコンポーネントには一般的に使用されるデータがいくつかあります。これは {{componentName.propertyName}} を介してアプリから呼び出すことができます。
| プロパティ名 | 説明 |
|---|---|
| colorScheme | ボタンの背景色 |
| displayName | このコンポーネントの名前 (すなわちボタン1) |
| hidden | 真偽値はボタンの隠しステータスを示します |
| ラベル | ラベルの値 |
| ラベルの揃え | スイッチラベルの配置 (左右) |
| labelPosition | スイッチラベルの位置 (左または右) |
| ラベル幅 | ラベルの幅を表す整数。 |
| labelFull | ブール値はラベルがいっぱいであるかを示します。 |
| 値 | ユーザーは値をtrueまたはfalseに設定します |
大文字小文字を区別する
次に、他のコンポーネントの状態を動的に切り替える方法を示します。
ステップ 1 コンポーネントを追加
最初にSwitchコンポーネントを追加し、‘Hide’とラベル付けします。 次に、text コンポーネントを ‘displayed’ から ‘hidden’ 状態に変更する影響を与えたコンポーネントとして使用します。 コンテンツを「Hello World」に変更します
ステップ 2 コンポーネントの構成
テキストの Hidden プロパティ。 fxアイコンをクリックすると、JavaScriptを使用してスイッチの値と同じようにコンポーネントの隠し状態を制御できます。
{{switch1.value}}スイッチがオンのときはいつでも switch の値は **true になり、テキストは非表示になります。
**Onを切り替える
off を切り替える
