【Ionic】タブのアイコン・色・位置・文字サイズの変更

Ionicでタブのアイコン・色・位置・文字サイズ等のデザインを変更する方法についてまとめました。

【タブ】アイコン・色・位置・文字サイズ

タブのアイコン・色・位置・文字サイズなどのデザインはion-tabsタグの属性で設定できます。

属性 概要
name タブ名
color 配色(dark, primary, secondary, danger, light)
selectedIndex 起動時のデフォルトの選択タブインデックス
tabsHighlight trueの場合、選択したタブの下にタブハイライトバーを表示。
tabsLayout レイアウト。(icon-top, icon-start, icon-end, icon-bottom, icon-hide, title-hide)
tabsPlacement 位置の位置(top:上、bottom:下)
enabled trueの場合、タブを有効。 falseの場合、ユーザーはこの要素と対話できません。デフォルト:true。
root タブのルートページを指定
rootParams ルートページの設定
show trueの場合、タブバーはタブバー内に表示。
tabBadge タブボタンのバッジの値。
tabBadgeStyle タブボタンのバッジのデザイン。
tabIcon タブのアイコン
tabTitle タブのタイトル
tabUrlPath URL内のこのタブを表すURLパス名。

■例
・タブの位置を上に変更
・配色はダークテーマ

<ion-tabs color="dark" tabsPlacement="top">
    <ion-tab [root]="heiseiPage" tabTitle="平成"></ion-tab>
    <ion-tab [root]="showaPage" tabTitle="昭和"></ion-tab>
    <ion-tab [root]="taishoPage" tabTitle="大正"></ion-tab>
    <ion-tab [root]="memoPage" tabTitle="メモ"></ion-tab>
</ion-tabs>
関連記事
参考 Tabs – Ionic API Documentation – Ionic Framework
1 【Ionic入門】Android・iPhoneアプリ開発編
関連記事