プラットフォームスタイル
Ionicは、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを提供します。デバイスのガイドラインに一致するようにコンポーネントをスタイリングすることで、アプリケーションを一度記述するだけで、アクセス場所に応じてユーザーにネイティブなルックアンドフィールを提供できます。
Ionicモード
Ionicは、コンポーネントの外観をカスタマイズするためにモードを使用します。各プラットフォームにはデフォルトのモードがありますが、これはグローバルな設定で上書きできます。次の表は、各プラットフォームに追加されるデフォルトのモードを示しています。
| プラットフォーム | モード | 説明 |
|---|---|---|
ios | ios | iPhone、iPad、iPodで表示すると、iOSスタイルが使用されます。 |
android | md | Androidデバイスで表示すると、マテリアルデザインスタイルが使用されます。 |
core | md | 上記のプラットフォームのいずれにも当てはまらないプラットフォームは、マテリアルデザインスタイルを使用します。 |
たとえば、Androidプラットフォームで表示されているアプリは、デフォルトでmd（マテリアルデザイン）モードを使用します。 <html>要素にはclass="md"が追加され、すべてのコンポーネントはマテリアルデザインスタイルを使用します。
<html class="md"></html>
注：プラットフォームとモードは同じではありません。プラットフォームは、アプリの設定で任意のモードを使用するように設定できます。
モードスタイルの上書き
各Ionicコンポーネントは、モードに基づいてスタイルを設定できます。 html要素には、現在のモードに等しい値を持つclass属性とmode属性の両方があります。これらを使用して、任意のコンポーネントのスタイルを上書きできます。たとえば、ion-badgeのテキストをiosモードでのみuppercaseにするようにスタイルを設定するには、次のようにします。
.ios ion-badge {
text-transform: uppercase;
}
また、スタイルを上書きするために使用できるグローバルCSS変数も多数あります。 iosアプリの背景色をスタイル設定するには、次のように記述できます。
.ios {
--ion-background-color: #222;
}
Ionicのカラー変数、テーマ変数、グローバルコンポーネント変数など、モードによって上書きできる多くのグローバル変数があります。