ノーコード bubble 解説_タブで表示の切り替え_前半

タブで表示の切り替えが出来るサイトを作ります。

 

写真やサイズなどは違いますが、Bubbleで作ったタブ完成イメージサイトです。

 

2021年4月29日追記:タブの切り替えパソコンで見ると2カラム、スマホで見ると1カラムをYouTubeにアップしました。

 

 

この続き、後半はこちらです。

ノーコード bubble 解説_タブで表示の切り替え_後半

 

タブ切り替え、完成イメージ

革小物作り「体験1日コース」「体験3日コース」のイメージです。スマホで見た時はこんな感じで、

 

PCはこんな感じです。それぞれのタブを押すと選択した「体験○日コース」の下に黒い線が表示され下の文面と写真が切り替わります。

 

 

では行きます。

左のUI Builder のGroupを使って大枠を作ります。分かり易くするためにそれぞれ色を付けました。

 

大きな四角Bの中にC、D、Eの四角が入っています。DとEは同じ大きさです。

今回は撮影のために小さめにしていますが本来だったら横は1000px位にするかなと思います

 

 

配置の時のX軸Y軸の考え方

配置は手動でも出来ますがピタッと付けたい時など覚えておくと便利です。

Cの配置です。Cをクリックして出てくる黒い窓の下の方のXとYを0にすると「親」であるBの左上にピタッと配置されます。

 

Eの配置です。Xは680の半分の340、Yは水色の四角の丁度下に配置したいので80。これもEを囲っている親であるBに対してと言う事になります。

じゃあ、、薄いオレンジDのXは0、Yは80だね
その通り◎

 

Elements tree を見ると親子関係が分かります。(親)Group Bの中に(子)Group C、(子)Group E、(子)Group Dが入っています。

 

こうです。

 

レスポンシブ設定

大枠を作ったらパソコンでもスマホでもちゃんと見えるデザインの設定、 レスポンシブ設定をします。Responsiveに切り替えます。

PCで2カラム、SPで1カラム表示

何もしない状態だと例えば横を375pxにした時に下が2カラムになってしまいます。これだと今からテキストや写真を入れた時に横幅が狭すぎてスマホで見難そうです。

 

スマホの時には1カラムになるよう設定します。画面の幅が狭くなったら左右のマージンを0にする設定もします。

 

画面が狭くなったらマージンは0に

親である四角Bを選択するためにElements tree でGroup B をクリックします。青い枠を少し下に下げて伸ばします。Responsive画面に行きます。

 

今伸ばした上でクリックして出た黒い設定窓の、

 

Fixed width のチェックを外します。650px以下の時は左右のマージンを0にする設定をCollapse margins〜にします。

 

DとEもそれぞれこのように設定します。

 

画面右上を動かして狭めたり広げたりして確認します。

画面幅が651の時は左右に余白があり、

 

650以下になるとマージンは無くなりました。こうすると画面が広い時はゆったりした余白を、狭い時は画面一杯に使えます。

 

大枠のレスポンシブ設定が済んだのでタブの中身を作ります。

水色のCの中、左側にGroup (Group F)を作ります。

 

その中にIcon を置きます。人のアイコンにしました。

 

Textで「1日体験コース」と書き、下に選択されている事を示すバーをGroupで作りました。

Group F の中に3つの要素が入っています

 

 

エレメント名を変更して分かり易く

エレメント(Element)名はそのままでもサイトとして問題ないのですが、自分なりに規則を決めて変更する癖を付けると良いと思います◎ 

例えばUI Builder の Group で作ったエレメントは作った順にGroup ABC、、となるので何が何だか画像で確認しないといけなくなります。ですがタブの下のバーだから「Tab bar〇〇」やヘッダーに使っているエレメントだから「Header 〇〇」と書き換えておけば分かります。

 

バーはこの後ワークフローWorkflowで動きを追加するので分かり易い名前(Group G からborder 1day)に変更しておきます。

 

今作ったセットをコピペで右側へ。

 

「1日」を「3日」に、アイコンも色違いに変更。左のタブ名をTab 1day Groupコピペした方はTab 3day Groupとしました。

 

デフォルトでは表示させない設定

最初に表示した時のデフォルトを「1日体験コース」にしたいので「3日体験コース」のバーのThis element is 〜のチェックを外します。

 

Previewで見ると「3日」の下のバーが非表示になっていて「1日」の方の内容が表示されているんだなと直感で分かります。(この後に写真や説明が入ります)

よくある見せ方なのでユーザーにも分かり易い親切なデザインです◎

 

 

タブのレスポンシブ設定

「1日体験コース」と「3日体験コース」のレスポンシブを設定します。今は上下に重なってしまうので横に並べます。

 

それぞれこのように設定しました。

 

Previewで実際の表示がこのようになれば成功です。

 

 

タブの切り替えをワークフローで設定

タブ「1日体験コース」を押すと下に黒い線が表示され「3日体験コース」の下の線は隠れる。逆に「3日体験コース」を押すと下に黒い線が表示され「1日体験コース」の下の線は隠れる設定をします。

 

「1日〜」から行きます。「Tab 1day Group」のStart/Edit workflowを押します。

 

 

Click here〜をクリック>Element Actions>Show

 

何をShowするか選びます

「1日体験コース」の下のバーだから、、border 1day だね

 

続けてStep1 の矢印の先に出たClick here〜をクリック>Element Actions>Hide

 

何をHideするか選びます

「3日体験コース」の下のバーだから、、border 3day だね

 

次に「3日〜」の設定を同じように行います◎

「Tab3day Group」のStart/Edit workflowを押します。

 

Click here〜をクリック>Element Actions>Show

 

「Tab3day Group」をクリックした時にShow したい border 3day を選びます。

 

続けて、その時にHide したい物エレメント

 

border 1day を選びます。

 

ここまで済んだらPreview で実際の表示でタブをクリックして動作を確認します。

クリックした方のバーが表示され、していない方のバーが隠れれば成功です◎

 

 

後半に続きます。

ノーコード bubble 解説_タブで表示の切り替え_後半

後半の内容です。

次は「1日体験コース」タブを押したらDに「手帳カバー」の文面とボタンなどが、Eに手帳カバー画像が、

 

「3日体験コース」タブを押したらDに「ノートカバー」の文面とボタンなどが、Eにノートカバー画像が、表示されるようにします。