Skip to main content
Version: v7

プラットフォームの外観

Ionic は、アプリケーションが実行されているデバイスに基づいてプラットフォーム固有の外観を提供します。デバイスのガイドラインに合わせてコンポーネントをスタイリングすることで、アクセスしたデバイスに応じてユーザーにはネイティブに見えます。

Ionic Modes

Ionic は modes を使ってコンポーネントの外観をカスタマイズします。それぞれの プラットフォーム はデフォルトの mode を持っていますが、これはグローバルの config で上書き設定をすることができます。次の表は、それぞれの プラットフォーム に追加されているデフォルトの mode を示しています。

プラットフォームMode概要
iosiosiPhone, iPad, もしくは iPod で表示する時は iOS styles が適用されます。
androidmdAndroid のデバイスから表示する時は Material Design styles が適用されます。.
coremd上記のどのプラットフォームにも当てはまらないプラットフォームでは、 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 をご覧ください。

Contents

Edit this page