【Bubble】ラジオボタン設定編集 インプット項目 ~ ノーコードプログラミング ~ #54

Bubble

ノーコードプログラミングのBubbleの解説をやっていきます。

Bubbleは僕もまだまだ勉強中な部分も非常に多いので備忘的な部分も多く含めているのをご了承ください。



ラジオボタン設定項目

Bubbleのラジオボタンはその名の通り画面上にラジオボタンを配置する機能です。

ラジオボタンを配置することで視覚的に分かりやすい選択肢を作ることができます。

今回はそんなラジオボタンの設定について解説していきます。




スポンサーリンク

インプット項目作成方法

バブルでのインプット項目は複数あり、「テキスト」「マルチラインテキスト」「チェックボックス」「ドロップダウン(プルダウン)」「検索ボックス」「ラジオボタン」「スライダー」「カレンダー」「画像アップローダー」「ファイルアップローダー」がデフォルト機能として用意されています。

さらにプラグインとして様々な機能を追加できるのでより凝ったUIを作成することができる様になります。

そんなinput項目で今回は「Radio buttons」の設定をしていきます。



「Bubble」でラジオボタンを設定しよう

1-1.デフォルトのラジオボタンの状態は以下の通りです。

(選択肢を3つ設定しています。)

Bubble_ラジオボタン_デフォルト設定


Bubble_ラジオボタン_デフォルト設定_プレビュー




1-2.「Default value」に「choices」に入力した値を入力すると、ラジオボタンのデフォルト値を設定することができます。

(「choices」にない値を入力すると、空欄のままとなります。)

Bubble_ラジオボタン_デフォルト選択肢


Bubble_ラジオボタン_デフォルト選択肢_プレビュー




1-3.ラジオボタンの「This input should not be empty」にチェックを入れると見た目は変わりませんが、空欄の状態だと画面遷移時などの時にエラーとなります。

Bubble_ラジオボタン_入力必須


Bubble_ラジオボタン_入力必須_プレビュー




1-4.ラジオボタンの「This input is disabled」にチェックを入れると、実際の画面でラジオボタンの状態を変更できなくすることができます。

Bubble_ラジオボタン_選択不可


Bubble_ラジオボタン_選択不可_プレビュー




1-5.ラジオボタンの「use a dynamic number of columns」にチェックを入れて「Minimum column width (px)」の値を変更すると、ラジオボタン一つ一つに対する横幅を変更することができます。

(変更するとキャプチャの通り、横並びにすることができます。)

Bubble_ラジオボタン_横幅設定


Bubble_ラジオボタン_横幅設定_プレビュー





今回はここまで。

次回もインプット項目について解説していきます。

コメント