Radio
最終更新
最終更新
Radioは主にフォームの送信や表示の際に使う単一選択用のコンポーネントです。Dashcombが提供しているRadioboxは、通常のHTMLのRadioboxをベースにして、管理画面の用途に合わせています。
Radioコンポーネントには、以下のプロパティが含まれています。
オブジェクト
ラジオオブジェクトの変数名です。Radioコンポーネントをドラッグ&ドロップすると、そのオブジェクトが自動的にradio1
、radio2
... と名付けられます。
ここで設定した変数名は構文 {{オブジェクト名.プロパティ}}
でオブジェクトを参照するために利用できます。
(例){{radio1.value}}
で radio1
の表示状態の真偽値を取得することができます。
利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。
トグルスイッチをONにすると、Radioコンポーネントが非表示になります。
トグルスイッチをONにすると、Radioコンポーネントが無効になります。
入力必須
トグルスイッチをONにすると、Radioコンポーネントが入力必須になります。
ラベル文字
ラジオの項目名を表すラベルテキストです。Radioコンポーネントをドラッグ&ドロップすると、自動的に Radio
に設定されます。
Radio
を任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}}
を入れることにより、動的に設定することができます。
{{}}
構文については、オブジェクトやデータの参照 のページを参照してください。
デフォルト値
Radioコンポーネントの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は value1
で、変数 radio.value
の値は value1
になります。
{{オブジェクト名.プロパティ}}
構文を用いて、動的に設定することができます。
(例)オブジェクト radio2
のデフォルト値に {{radio1.value}}
を入力することによって、radio1
に入力した内容がリアルタイムで radio2
に反映することができます。
現在の設定値は、{{オブジェクト名.defaultValue}}
で参照できます。
オプション
選択肢の詳細な設定を変更できます。Radioのオプションの初期値は下記のようなJSON式の配列になっています。
上記のように値を固定的する設定以外にも、 {{オブジェクト名.プロパティ}}
構文を用いて、動的に設定することができます。
(例)オブジェクト radio2
のオプションに {{radio1.options}}
を入力することによって、radio1
のオプションがリアルタイムで radio2
に反映することができます。
Radio コンポーネントのアクションは、以下を設定することができます。
RadioコンポーネントのonChange イベントの発生時(Radioの入力内容が変更された時)に、指定アクションを実行できます。
onForcus
RadioコンポーネントのonForcus イベントの発生時(Radioがフォーカス状態になった時)に、指定アクションを実行できます。
onBlur
RadioコンポーネントのonBlur イベントの発生時(Radioがフォーカス状態でなくなった時)に、指定アクションを実行できます。
外観種別
Radioコンポーネントの形を指定します。
展開方向
選択肢の並び方向を指定します。
ラベル表示
Radioコンポーネントラベルの表示・非表示を切り替えます。
トグルスイッチをOFFにすると、ラジオボックスラベルが表示されなくなりますが、ラジオボックス本体に影響はありません。
以下の項目で表示を調整できます。
項目名 | 設定内容 |
---|---|
ラベル整列
ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置
ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅
ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。