未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】ボタンを押した時のアクション

title


ボタンを押した時に指定のアクションをする

ボタンを押した時に指定したアクションが起きるようにしてみます。


まずは「Textエレメント」「Buttonエレメント」を下記のように配置します。

Design



次に、ボタンが押されたら「Textエレメント」が消えるようにワークフローを設定します。


「Buttonエレメント」のプロパティーを開いて、「Start/Edit workflow」を選択します。

workflow



Workflowタブに移動すると下記のように表示されています。

workflow



「When 〜」の部分は、いつ起こすアクションかを指定しています。

今回は「ボタンをクリックした時」となります。



「ボタンをクリックした時」に何のアクションをしたいのかを、「Click here to add an action ...」に設定します。


今回は「Buttonエレメント」が押された時にアクションを起こしたいので「Element Actions」を選択し、ボタンが押されたら「Textエレメント」を消したいので、「Hide」を選択します。

Hide


どのエレメントを消したいかを「Element」に設定します。

今回は「Textエレメント」を消したいので「Textエレメント」を選択します。

Element


これで「Textエレメント」が消えるワークフローが完成です。


「Preview」で動きを確認してみましょう。


Preview

ボタンをクリックします。


Preview

「Textエレメント」が消えました!


参考図書



独学で挫折しそうになったら、オンラインプログラミングスクール
未来エンジニア養成所Logo