ラジオボタン

1011 views

ラジオボタン

ラジオボタンは、ユーザーが複数の選択肢から一つだけを選ぶことができるUIコンポーネントです。SmartUXでは、ラジオボタンを使ってユーザーインターフェースを構築する際に、ユーザーが選択肢を視覚的に簡単に選ぶことができるようにします。

詳細な説明

シングル選択
- ラジオボタンは、同じグループ内で一度に一つのオプションのみ選択できるようにします。選択肢の一つを選ぶと、それまで選ばれていた他のオプションは自動的に選択解除されます。
グループ化
- 複数のラジオボタンはグループ化され、一つの論理的な選択肢セットとして扱われます。
ユーザーインターフェースの明確化
- ラジオボタンは、ユーザーに対して選択肢が明確に提示され、選択プロセスがシンプルで直感的になります。

使いどころの例

1. 質問フォーム

アンケートやフォームで、ユーザーに特定の質問をして、その答えを選ばせる場合にラジオボタンが使われます。

2. 支払い方法の選択

オンラインショッピングサイトでは、ユーザーが支払い方法を選ぶ際にラジオボタンを使うことがよくあります。

3. 設定の選択

アプリケーションの設定メニューで、特定の設定オプションをユーザーに選ばせるために使われます。

ラジオボタンは、ユーザーが複数の選択肢から一つだけを選ぶ場合に非常に便利なUIコンポーネントです。質問フォーム、支払い方法の選択、設定オプションなど、さまざまなシナリオで使用されます。

［ラジオボタン］コントロールの選択しに対応したコントロールです。

Magic Xpa側の［ラジオボタン］コントロールに関して設定は以下の通りになります。

①：フォームにラジオボタン設置する

②：SmartUX側と関連するプロパティを設定する

⁂必要に応じてご活用ください。

可視

コントロールを表示させるかどうか指定します。論理値を返す式で指定することもできます。

有効

コントロールを有効にするかどうかを指定します。有効にするかどうかを表す論理値を返す式を使用できます。

SmartUX側にはラジオボタンウィジェットを使います。

選択入力ウィジェットは以下のような感じになっております。

Magic Xpaと関連するためData入力の隣にある歯車ボタンをクリックして設定します。

設定した後は以下の通りになっております。

これでMagic Xpa側とSmartUX側は連携取れた状態になります。

Magic Xpa側で”可視”プロパティを設定した場合は、SmartUX側で以下の通りに設定をします。

表示ロジックの”Display if”プロパティに歯車ボタンをクリックして設定します。

設定した後は以下の通りになっております。

コンポーネント（ラジオボタン）を配置すると、デフォルトで以下のコードが定義されます。

”mat-radio-group” と “mat-radio-button” の組み合わせで配置されます。

<mat-radio-group data-comp-id=”mat-radio-button.1″ id=”mat-radio-button.1″>

<mat-radio-button></mat-radio-button>

</mat-radio-group>

以下のプロパティがあります

プロパティ	内容
Data	Magic プログラムで定義されたコントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Checked	選択して返される値を指定します。歯車ボタンをクリックすると項目一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
is inside Table	テーブル内に配置するかどうかを指定します。テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。テーブル内にあるのにチェックをつけなかった場合は常に1行目のイベントとして取り扱われます。
Show Control	ラベルの表示位置を指定します。以下から指定できます。 “Is Inside Table” がチェックされている場合のみ有効です。 None …… 常に表示されます。 Is Row Edit …… 修正モード時のみ表示されます。 Is Row Read …… 照会８モード時のみ表示されます。
Label Position	コントロールを表示するかどうかを指定します。以下から選択できます。 Default …… チェックボタンの後ろに表示されます。 Before ……チェックボタンの前に表示されます。 After…… チェックボタンの後ろに表示されます。
Label Transformation	ラベルのテキストの変換方法を指定します。以下から選択できます。 Default …… Uppercase …… 大文字に変換します。 Lowercase …… 小文字に変換します。 Capitalize …… 先頭文字のみ大文字に変換します。
Display If	コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=” ”　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。
Disabled	無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Class	任意のクラスを定義することができます。