Brighten up your day !!

AngularでIonicを用いてtab barのデザインをカスタマイズする

AngularでIonicを用いてtab barのデザインをカスタマイズする

0

Angualrとクロスプラットフォームアプリ開発用のフレームワークであるIonicを組み合わせて、Tab barをカスタマイズする方法を解説します。

ポイント

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

そうするとつらつら自動でダウンロードしてくれるので、完了後作成したフォルダへ移動します。

% cd 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

0

⭐️Brighten up your day with NP-Systems⭐️


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • 3月15日AngularでAdsense

    更新日時:2021年3月15日 06時46分

    0 もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。 昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。 http://ocr-app.np-sys.com/…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


this is single-default.php