未来エンジニア養成所Blog

プログラミングを皆に楽しんでもらうための情報をお届けします。

【bubble/ノーコード】エレメントを確認してみよう Part4

title


前回までは「Design」タブの中にある「Visual elements」「Containers」「Input forms」について紹介しました。

phoeducation.work

phoeducation.work

phoeducation.work


今回は「Elements tree」について紹介します。

ここでは各エレメントの親子関係などを一覧で確認することができます。

Elements tree


Elements tree


「Group グループ(親)」「Text テキスト(子)」「Button ボタン(子)」「Icon アイコン(子)」「Alert アラート(子)」が入っていることを表しています。


親である「Group グループ」の「+」をクリックすれば子のエレメントが表示され、「-」をクリックすれば子のエレメントが非表示になります。

Elements tree


アラートやポップアップなど、何かアクションが起こった時に、表示される性質を持ったエレメントは、非表示になっています。

Elements tree


このような非表示のエレメントを表示させたい場合は、右側のマークをクリックすると表示させることができます。

隠す時も同様です。

Elements tree


エレメントの数が増えてきた時に便利ですね。


参考図書



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