[Ionic]タブバーのアイコンを変更する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

2018/04/29追記

もっと素晴らしい方法がありました。以下のリンクで紹介されています。
https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html

以下、別の方法

Ionicでタブバーで独自のアイコンを利用したい時、CSSに記述すればよいと思います。

.ion-ios-custom,
.ion-md-custom{
content: url(../assets/icons/custom.svg);
padding: 2px 0px 3px;
}
.ion-ios-custom-outline,
.ion-md-custom-outline{
content: url(../assets/icons/custom.svg);
padding: 2px 0px 3px;
}

上記で用意したCSSをtabIconで読み込みます。上記の場合は、customになります。
また、タブバーは選択時とそうじゃないときで表示が切り替わるのでoutlineも用意する必要があります。

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="custom"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

以上です。

タブバーのアイコンを動的に変更させる

tabIconの指定は唯の文字列であるため、プログラム側で変更するのが容易です。

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" [tabIcon]="custom"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
custom:string = "custom";
constructor() {
}
change(){
this.custom = "home";
}
}

上記のソースコードでは、customという変数に最初”custom”という文字列を格納しています。change()メソッドが呼ばれると”home”のアイコンに切り替わります。
HTMLの方は、tabIconを[tabIcon]にすることでcustomを変数として扱うようになります。

アイコンのサイズについて

cssで直接指定することが可能です。

.ion-ios-custom-outline,
.ion-md-custom-outline{
content: url(../assets/icons/custom.svg);
padding: 2px 0px 3px;
width: 24px;
height: 32px;
}

ion-iconについて

カスタムアイコンはion-iconでも呼び出し可能です。

<ion-icon name="custom"></ion-icon>


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ