プラットフォームの外観
Ionic は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。
Ionic Modes
Ionic は modes を使ってコンポーネントの外観をカスタマイズします。それぞれの プラットフォーム はデフォルトの mode を持っていますが、これはグローバルの config で上書き設定をすることができます。次の表は、それぞれの プラットフォーム に追加されているデフォルトの mode を示しています。
| プラットフォーム | Mode | 概要 |
|---|---|---|
ios | ios | iPhone, iPad, もしくは iPod で表示する時は iOS styles が適用されます。 |
android | md | Android のデバイスから表示する時は Material Design styles が適用されます。. |
core | md | 上記のどのプラットフォームにも当てはまらないプラットフォームでは、 Material Design styles が適用されます。 |
例えば、Android プラットフォームが利用されている時は md (Material Design) が標準で利用されます。 <html> エレメントに class="md" が追加され、すべてのコンポーネントには Material Design styles が適用されます。:
<html class="md"></html>
Note: platform と mode は別物です。platform はアプリの config で任意の mode を設定することができます。
Mode Styles の上書き
それぞれの Ionic のコンポーネントは、mode に基づいた外観を設定します。 html エレメントは、 現在の mode に基づいて、 class と mode の両 方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、ios mode の時のみ ion-badge のテキストに uppercase を適用する場合、こうなります:
.ios ion-badge {
text-transform: uppercase;
}
スタイルを上書きするために使用できる多くのグローバル CSS 変数もあります。ios アプリの背景色をスタイルするには、次のように設定します:
.ios {
--ion-background-color: #222;
}
上書きするすべてのグローバル CSS 変数のリストについては、Ionic's color variables, theme variables and global component variables をご覧ください。