Ionic2inoueIonicでモバイルアプリを作ろう!(10)ボタンの表示・カスタマイズこの記事は2017年2月6日に書かれたものです。内容が古い可能性がありますのでご注意ください。Tweetクロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonic2の使い方を紹介していきます。今回はIonicでボタンを表示する方法とその簡単なカスタマイズ方法について解説します。本稿で載せる画像は全てMaterialDesignのスタイルです。iOSでは異なる見た目になる点にご注意下さい。使い方IonicではWeb同様ボタンを表示するにはHTMLテンプレートにbuttonタグを記述します。そのままだと見た目がアレなので、ion-buttonというディレクティブをbuttonの属性に指定します。これにより各プラットフォームに合わせた見た目を出力してくれます。ion-button>Default</button>...色を変えるボタンはデフォルトでは、/src/theme/variable.scssで宣言されているprimaryの色が適用されます。#222);これらの名前を用いることでボタンの色を変更できます。枠とと文字だけに色をつけたアウトライン表示のボタンも簡単に実装できます。次のようにoutlineディレクティブをつけるだけです。outline>Secondary</button>...形を指定するエッジを丸くしたり、横幅に合わせたブロック表示など形状を指定できます。丸くする場合はround、ブロック表示はblockをそれぞれ指定します。block>Block</button>...アイコンを乗せるIonicは様々なアイコンが用意されています。(Ionicons)これらを使ってアイコン付きのボタンが簡単に実装できます。</button>...サイズを変えるボタンのサイズを変えたい場合はlargeまたはsmallディレクティブを用います。