ノーコード bubble 解説_タブで表示の切り替え_後半
「ノーコード bubble 解説_タブで表示の切り替え_前半」では「○日体験コース」タブを押すと下にバーが表示され、押していない方のバーが隠れる設定など解説しました。
写真やサイズなどは違いますが、Bubbleで作ったタブ完成イメージサイトです。
後半はその続き、「○日体験コース」タブを押したらDに説明 Eにイメージ画像が表示されるようにします。
押したタブによって下の表示が変わります。
後半目次
では行きます。
この辺はさらっと。それぞれどのUI Builder を使ったかを表示しています。
Linkの下に線を付ける Add style
Linkで作った「1日体験コース〜」は下に線があった方がリンクが貼ってあると分かり親切なので設定します。左のStyles をクリックします。
Add style をクリック
Style name に分かり易い名前を入れます。（ここではE Link としました）Element のスタイルはLink を選びます。
この辺をいじって好みに変更します。フォントは沢山ありますがArialは無難かなと思います。
下の方の Define each border 〜にチェックを入れます。するとその下が出ます。下に線を付けたいのでbottom の線の種類を選びます。ベーシックなSolid にしました。太さや色（Link 文字と同じ#595959）を設定。
プレビューで確認出来ます。決まったらDesign で元の画面に戻ります。
「1日体験コース詳細〜」Link をクリックして黒い窓を出しStyle に今作ったE Link のスタイルを適応させます。
ちょっと違うなと思ったらEdit style から修正できます◎
「1日体験コース詳細〜」の下に線が付いてリンクだと分かりやすくなりました。
薄いオレンジ内のテキストのResponsive を調整します。
テキスト部分、Responsiveの調整
「手帳カバー」「牛革で小さめ〜」はFixed width のチェックを外しFixed margin は左寄せにしました。
「価格〜」「申し込む」ボタン、「1日体験〜」リンクはFixed width のチェックはそのままでFixed margin は左寄せにしました。
Groupに画像を入れる
Groupで枠を作っておいたオレンジの部分に画像を入れます。Background style を今までのFlat color からImage にします。
Upload アイコンが出るのでクリック
画像を選びます。
入りました。Center the image で中央に配置しました。
「1日体験コース」が出来たのでもう１つのコンテンツ「3日体験コース」をコピペで作ります。
siftを押しながらDとEを選択して右クリック＞Group elements〜でグループにします。
Elements tree で構造を見る
Group elements〜でグループにする前のElement tree はこんな感じです。
２つをグループにした事で１つの Group I になりました。
Group Iの名前を分かり易くするためにTab content 1day と変更しました。
上の水色部分Group CもTab menuと変更しました。
Element tree 内でTab content 1dayを右クリック＞Copy
同じ親であるGroup Bの上で右クリック＞Paste
同じ階層にTab content 1day copy が出来ました。右の表示画面にも少しずれてコピペした物が出来ています。
名前をTab content 3day に変更します。
Tab content 3dayの方はずれているのでXとYに数字を入れてピタッと付けます。
手で動かしてもいいのですがX軸とY軸の考えを知っていると便利です→配置の時のX軸Y軸の考え方
Tab content 1dayの方は目のマークをクリックして非表示にしておきます。
タブのワークフロー調整
「1日体験コース」から行きます。
「1日〜」のタブをクリック＞Start /Edit workflow
step1 step2 は前半でやったワークフローです。ここに付け加えます。Click here 〜
Element Actions > Show で、
「1日〜」のタブをクリックした時に何をShowしたいかなので、Tab content 1day を選びます。
step3が出来ました。続けてstep4です。今度はElement Actionsで、、
Hideしたいエレメント、Tab content 3day を選びます。
step4 が出来ました。「1日〜」タブ（Tab 1day Group）をクリックした時の一連の流れがstep1〜step4です。
同様に「3日体験コース」のワークフローを作ります◎
今作ったTab 1day Group〜の横にあるTab 3day Group〜をクリックします。
これもStep2までは前半で済んでいるね
Click here 〜＞Element Actions ＞Show
「3日〜」のタブをクリックした時に何をShowしたいかなので、Tab content 3day を選びます。
step3が出来ました。続けてstep4です。Element Actions ＞ Hide
Tab content 3day がShowしている時、代わりにHideしたいElement を選びます
Tab content 1day だね
出来ました。「3日〜」タブ（Tab 3day Group）をクリックした時の一連の流れstep1〜step4が出来ました。
ページ読み込み時に表示しない設定
今回は「1日体験コース」の方をページ読み込み時に表示させたいので、「3日体験コース」のTab content 3day のThis element is visible on page load （この要素はページの読み込み時に表示されます）のチェックを外します。Tab content 1dayの方はチェックが入ったままです。
分かり易く薄いオレンジにしていた所を白にしました。水色のタブ部分はあった方が良さそうなのでこのままで。
画面のmax 幅の設定を忘れていました、すみません
画面がどこまでも伸びるのを防ぐ設定
狭くした時の設定はしたのですが、今のままだと画面を伸ばした時にコンテンツがどこまでも伸びてしまってかっちょ悪いですね。
今回の内容全ての親であるB、、
Group B を選択します。Elements tree で見ると分かり易く選択し易いです。この枠をResponsive でクリックする為に少し下に伸ばします。
どうして伸ばさないといけないの？
そのままクリックすると（１つ前のイラスト）DやEが選択されてしまうからよ。用が済んだら戻してね
Responsive へ行き伸ばした部分をクリックします。Apply a max width（最大幅を適用します）にチェックを入れます。100％が680pxなのはBのGroup （２つ前のイラスト）を680pxに設定していたからです。なので1000pxにしていたら1000です◎
Previewで見て横に伸ばしてみます。大丈夫そうです。
タブで表示の切り替え、完成です。
タブの切り替え、PC。
押した方のタブの下にバーが表示され、それに伴った内容が下に表示されます。
SP
お疲れ様でした◎
