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式の配列になっています。

 [
   { "label": "option1", "value": "value1" },
   { "label": "option2", "value": "value2", "disabled": true },
   { "label": "option3", "value": "value3" }
 ]

上記のように値を固定的する設定以外にも、 {{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

（例）オブジェクト radio2 のオプションに {{radio1.options}} を入力することによって、radio1 のオプションがリアルタイムで radio2 に反映することができます。

アクション

Radio コンポーネントのアクションは、以下を設定することができます。

onChange

RadioコンポーネントのonChange イベントの発生時（Radioの入力内容が変更された時）に、指定アクションを実行できます。

onForcus

RadioコンポーネントのonForcus イベントの発生時（Radioがフォーカス状態になった時）に、指定アクションを実行できます。

onBlur

RadioコンポーネントのonBlur イベントの発生時（Radioがフォーカス状態でなくなった時）に、指定アクションを実行できます。

外観

外観種別

Radioコンポーネントの形を指定します。

展開方向

選択肢の並び方向を指定します。

ラベル表示

Radioコンポーネントラベルの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、ラジオボックスラベルが表示されなくなりますが、ラジオボックス本体に影響はありません。

以下の項目で表示を調整できます。

項目名

設定内容

ラベル整列

ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃えの3つから選択できます。

ラベル位置

ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。

ラベル横幅

ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。

前へSelect 次へCheckbox

最終更新 2 年前