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アプリ開発編 |
コメント