ionic2 ナビゲーションバーとツールバーに独自画像を表示させるには

2016年12月11日

  1. TOP
  2. BLOG
  3. angular2
  4. ionic2 ナビゲーションバーとツールバーに独自画像を表示させるには

ナビゲーションとツールバーそれぞれに独自の画像を以下の感じで表示させたいと思います。

ただ方法とサイズがいまいち分からずおそらく強引(と思われる)で対応しみてました。まずはテンプレート

  <ion-header>
    <ion-navbar color="base">
      <ion-title text-center class="nlogo">
        <img src="./assets/img/header_logo.png" />
      </ion-title>
      <button ion-button menuToggle end>
        <ion-icon name="apps"></ion-icon>
      </button>
    </ion-navbar>
  </ion-header>

==

  <ion-footer>
    <ion-toolbar color="base">
      <ion-buttons class="toolbar" padding-left padding-right>
        <button ion-button icon-only>
          <img src="./assets/img/t1.png" />
        </button>
        <button ion-button icon-only>
          <img src="./assets/img/t2.png" />
        </button>
        <button ion-button icon-only>
          <img src="./assets/img/t3.png" />
        </button>
        <button ion-button icon-only>
          <img src="./assets/img/t4.png" />
        </button>
        <button ion-button icon-only>
          <img src="./assets/img/t5.png" />
        </button>
      </ion-buttons>

そしてscss

.nlogo {
padding: 0 0 0 31px;

  img {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  }
}

.platform-ios .nlog {
padding: 0;
}

.toolbar {
display:flex;

  img {
  width: 26px;
  height: auto;
  }
}

もっとちゃんとした方法があるんでしょうが、見つかるまではこれで暫定対応。
各アイコンのサイズはchromeのDeveloper toolからioniconsのサイズを抽出しました
iphoneのionic viewで確認した問題なかったのでとりあえず大丈夫かと・・。

ちなみにナビゲーションバーですがandroidとwindowsは左右にアイコンがあると残りのスペースでセンタリングをしてしまうため中心からズレるのでpaddingで位置を修正。