Search docs/

プラットフォームの外観

Contents

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">

Note: platformmode は別物です。platformはアプリの config で任意の mode を設定することができます。

Mode Stylesの上書き

それぞれのIonicのコンポーネントは、mode に基づいた外観を設定します。 html エレメントは、 現在のmodeに基づいて、 classmode の両方の属性を持ちます。 これらは任意のコンポーネントの外観を上書きすることに利用することができます。例えば、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 をご覧ください。

Previous
Theming Basics
Next
CSS Variables