クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。
今回はアプリのUI上にアイコンを表示する方法を紹介します。
Ionicons
IonicにはIoniconsというアイコンライブラリがあらかじめ用意されており、シンプルながら便利なアイコンを簡単に使うことができます。Ioniconsには700以上のアイコンが用意されています。各デザインとその名前はこちらIoniconsから確認できます。
使い方
使い方は簡単でion-iconコンポーネントをテンプレートに記述し、そのname属性に上記リンク先のnameを指定すればOKです。
...
<ion-content padding>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name=">paper-plane"></ion-icon>
<ion-icon name="headset"></ion-icon>
</ion-content>
page-home {
ion-icon {
font-size: 50px;
margin: 16px;
}
}
端末のOSに応じて自動的に各OSに適したデザインのアイコンを選択してくれます。
明示的な画像の指定
端末ごとに利用するアイコンを明示的に指定することも可能です。ion-iconコンポーネントには属性として、name以外にmd、iosが定義されており、それぞれにアイコンのnameを指定できます。Androidの場合はmd、iOSの場合はiosになります。
ちなみにmdというはMaterial Designの略ですね。
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
