UI部品 基本編
Forguncyのラジオグループは複数のラジオボタンを1つのグループとして表示するUI部品です。
ラジオグループはユーザーに複数の選択肢の中から1つを選択してもらいたい場合に活躍します。
さらに、Forguncyのラジオグループは「その他」欄をクリックひとつで簡単に追加することができます。
この「その他」欄は、選択肢にない例外的な内容を想定する際に便利です。
今回は出欠フォームに出席/欠席/その他の選択肢をラジオグループで作成します。
チェックボックスグループにその他欄を追加する方法については、下記の記事をご覧ください。
＞関連記事：「想定外」に対応できる自由記述欄を持つ選択肢を作る
1.ページの準備
ラジオグループを配置するためのページをプロジェクトに作成します。
手順1-1.プロジェクトファイルを開く
サンプルのプロジェクトファイルをダウンロードし、開きます。
手順1-2.ページを新しく作成する
プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。
新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「出欠選択ラジオグループ」という名前にします。
2.ラジオグループを配置
画面にラジオグループを作成します。
手順2-1.ラジオグループを作成する
ページ上の、チェックボックスを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「ラジオグループ」を選択します。
（下図ではわかりやすくするため、上側のセルに見出しを置いています）
下図のように選択したセルが結合され、ラジオグループ型に変わりました。
手順2-2.リスト項目を設定する
ラジオグループ内のラジオボタン項目を設定します。
ラジオグループ型セルを選択した状態で、右ペインのセル型タブ内にあるリスト項目の欄にある「項目1」～「項目2」の項目を以下のように変更し、「項目3」はマイナスボタンを押下して項目自体を削除します。
| 変更前 | 変更後 |
|---|---|
| 項目1 | 出席 |
| 項目2 | 欠席 |
| 項目3 | （削除） |
リスト項目欄からフォーカスが外れると、ページ上のラジオグループ型セルにも変更が反映されます。
変更されたことを確認したら、レイアウト欄の「垂直方向」を押下します。
今回は「その他」の入力欄が横長になるため、項目は縦並びに配置し見やすいようにしておきます。
さらに、リスト項目欄の下にある「「その他」を項目として追加」にチェックを入れます。
項目の幅が自由に変更できるため、今回は「300」に変更します。
これで出欠入力のラジオグループの作成は完了です。
3.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順3-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
作成したラジオグループがページ上に表示されるので、動作を確認してください。
4.ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したラジオグループ型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
