画面下にタブバー（メニュー）を設定してみる｜初心者のアプリ開発｜Adalo

こんにちは！ゆかゆかです。

今日は画面の移動を便利するタブバーを設定してみます。

タブバーとは

よく携帯アプリで見かける、

画面の下に表示されているメニューアイコンのことのです。

Adaloの設定

1. + ボタンを選択
2. ADD COMPONENT > Tab Bar を選択

Active Tabの設定

1. Tabを画面の下に配置（画面の下にしか置けないです）
2. Active Tab  は 今アクティブにするタブを設定

ホーム画面は一番左のFirstTabを設定。

最大５個のタブを用意できます。

First Tabの設定

1. First Tabを選択
2. Icon Text は必要に応じて変更

Second Tabの設定

1. Second Tab を選択

1. Second Tab を選択
2. Icon を必要に応じて変更（英語で検索してみてください）
3. Text を変更に応じて変更

1. + ADD ACTION を選択
2. Link > 画像追加 を選択

1. DONE を選択

不要なタブ

５個もいらない方はタブを非表示にできます

1. 右上のOn Off ボタンで設定

他の画面に配置

１つの画面でタブの設定ができたら他の画面にコピペしましょう。

1. タブバーを選択した状態でコピー（Ctr + C）をクリック

1. 貼り付けたい画面を選択してペースト（Ctr + V）

1. Active Tabを変更

First Tabのリンクを変更

1. + ADD ACTION
2. Link > ホーム を選択

1. DONE を選択

1. Second Tabのリンクを削除

設定は以上になります。

移動画面が増えたら、その分だけタブを設定すればOKです。

ご参考になれば嬉しいです〜

▽ NoCodeツール Adalo 無料でかなり使えます！

www.adalo.com