Skip to main content
Version: v7 (beta)

プラットフォームの外観

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