ノーコード bubble 解説_Elements tree,Icon,等間隔に並べる

 

 

 

こんなサイトを作っているとします。

 

Elements tree エレメントツリーの見方

Elements treeのどの位置にあるのか、ちゃんとした構造のサイトを作る上で結構重要です。

 

この要素(ここでは「メニュー1」とします)はElements treeのどこにあるのかな?と思った時。「メニュー1」をダブルクリックして出てくる右の黒い設定窓の一番下「Reveal(明らかにする) in the Elements tree」をクリックすると左の Elements treeが、、

 

開いて青く表示されます。ヘッダーメニュー(Header Menu)の中にメニュー1〜3が入っている構造が分かります。

 

Elements treeの文字だけでは「これはなんだったかな」と分からない時がありますがマウスホバーすると画像で表示してくれるので分かりやすいです。

 

マウスホバー

 

 

余談ですが

ノーコードと言っても裏ではちゃんとコードは作られていてGoogle Chromeのデベロッパーツールで確認できます。

 

 

Iconの使い方

UI BuilderのVisual elementsの中のIconをクリックして右の置きたい所でクリックします。最初はハタのアイコンが表示されるようです。

 

アイコンの選択

黒い設定窓のIcon中から好きな物を選びます。

 

またはテキストを打ちこむといくつか候補が出てきます。

 

 

アイコン 色の変更

StyleはデフォルトでStandard Iconになっています。ここを空欄にすると上にIcon colorが表示されます。

デフォルトのStandard Iconの色の設定を変えてしまう方法もあります→CSSを設定する

 

 

 

アイコン サイズの変更

ドラッグして変更出来ますし、W、Hに数字を入れても変更出来ます。

 

 

アイコン 削除

アイコン自体をクリックしてキーボードのDeleteで削除。または黒い窓の一番下のDeleteをクリックすると「削除してもいいですか?」と聞かれるのでOKでも削除出来ます。

 

 

Styleを変更するとテキストが表示されない?Bubbleのバグ

テキストがあるはずなのにStyleを変更したら表示されなくなる事がありました。bubbleをやっているとこういったバグがあるようです。更新すれば直るパターン、選択項目を一度別の項目にしてもう一度戻すと直るパターン、、

 

テキストはバウンディングボックス(文字を囲っている四角)を大きくして戻し無事表示されました。

 

 

縦、横、等間隔に表示する

3つ以上の要素(文字、画像、アイコン、、)を縦、横等間隔に並べます。

 

横並び、等間隔に表示

コピペで3つに増やしたテキスト

 

ただ横に並べるだけならガイドラインが出るので普通に並べられます。しかしAとBの隙間がバラバラです。

 

shiftを押しながら3つを選択して右クリックすると白い窓が出るので下の方のDistribute horizontallyを選択します。

2つの時はこの選択肢は表示されません

 

AとBの隙間が等間隔になりました。「横並び1」の左端と「横並び3」の右端の位置は変わりません。

 

 

縦並び、等間隔に表示

縦の場合もただ並べるだけならガイドラインが出ます。AとBを等間隔にするにはshiftを押しながら3つを選択、右クリック、下の方のDistribute verticallyを選択します。

 

AとBの隙間が同じになり、3つの要素が縦に等間隔に並びました。