Angualrとクロスプラットフォームアプリ開発用のフレームワークであるIonicを組み合わせて、Tab barをカスタマイズする方法を解説します。
ポイント
Tab barを備えたプロジェクトはIonicが提供しているテンプレートを使用
比較的コードは単純で実装は容易
Github
Githubにコードあげています。
https://github.com/NP-Systems/Ionic_tips/tree/id-1113-customize-tab-bar
実装手順
Ionicが提供しているTab barを備えたテンプレートをダウンロードします。
% ionic start
Pick a framework! ?
Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.
? Framework: Angular
Every great app needs a name! ?
Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.
? Project name: myApp
そうするとつらつら自動でダウンロードしてくれるので、完了後作成したフォルダへ移動します。
フォルダ構成
tabsコンポーネント
tabs.page.htmlとtabs.page.scssの二つを変更します。
tabs.page.html
修正前
<ion-tabs>
<ion-fab vertical="bottom" horizontal="center" translucent="true">
<ion-fab-button (click)="goToPictures()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-tab-bar slot="bottom" class="ion-no-border">
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>
<svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd">
</path>
</svg>
<ion-tab-button tab="tab-notifications" class="notifs">
<ion-icon name="notifications"></ion-icon>
<ion-badge *ngIf="new_activities">{{new_activities}}</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
修正後
<ion-tabs>
<ion-fab vertical="bottom" horizontal="center" translucent="true">
<ion-fab-button (click)="yourCustomFunction()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-tab-bar slot="bottom" class="ion-no-border">
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>
<svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd">
</path>
</svg>
<ion-tab-button tab="tab-notifications" class="notifs">
<ion-icon name="notifications"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
tabs.page.scss
最初は何も書いてありませんが、下記のように変更します。
ion-tabs{
ion-fab {
margin-bottom: env(safe-area-inset-bottom); /* fix notch ios*/
ion-fab-button {
--box-shadow: none;
}
}
ion-tab-bar {
--border: 0;
--background: transparent;
position: absolute;
bottom: 0;
left:0; right: 0;
width: 100%;
&:after{
content: " ";
width: 100%;
bottom: 0;
background: var(--ion-color-light);
height: env(safe-area-inset-bottom);
position: absolute;
}
ion-tab-button {
--background: var(--ion-color-light);
}
ion-tab-button.comments {
margin-right: 0px;
border-top-right-radius: 18px;
}
ion-tab-button.notifs {
margin-left: 0px;
border-top-left-radius: 18px;
}
svg {
width: 72px;
margin-top: 19px;
path{
fill: var(--ion-color-light);
}
}
}
}
結果
前
後
アイコンにメッセージを追加している部分はこのように書いています。
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>
元ネタだとちゃんと条件分岐をしていました。
<ion-badge *ngIf="new_message">{{new_message}}</ion-badge>
参考文献
https://forum.ionicframework.com/t/ionic-5-awesome-tab-bar-with-curve/186579
