バージョン: v8

Config

Ionic Configは、アプリ全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。

グローバル設定

利用可能な設定キーは、IonicConfigインターフェースにあります。

次の例では、リップル効果を無効にし、モードをマテリアルデザインにデフォルト設定します

JavaScript
Angular
Angular（スタンドアロン）
React
Vue

example.js
window.Ionic = {
  config: {
    rippleEffect: false,
    mode: 'md',
  },
};

app.module.ts
import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      rippleEffect: false,
      mode: 'md'
    })
  ],
  ...
})

main.ts
import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular({
      rippleEffect: false,
      mode: 'md'
    })
  ]
})

setupIonicReact関数は、Ionicコンポーネント（IonAppを含む）をレンダリングする前に呼び出す必要があります。

App.tsx
import { setupIonicReact } from '@ionic/react';

setupIonicReact({
  rippleEffect: false,
  mode: 'md',
});

main.ts
import { IonicVue } from '@ionic/vue';
import { createApp } from 'vue';

createApp(App).use(IonicVue, {
  rippleEffect: false,
  mode: 'md',
});

コンポーネントごとの設定

Ionic Configはリアクティブではありません。コンポーネントがレンダリングされた後に設定の値を更新すると、前の値になります。リアクティブな値が必要な場合は、設定を更新する代わりにコンポーネントのプロパティを使用することをお勧めします。

JavaScript
Angular
Angular（スタンドアロン）
React
Vue

推奨されない

window.Ionic = {
  config: {
    // Not recommended when your app requires reactive values
    backButtonText: 'Go Back',
  },
};

推奨

<ion-back-button></ion-back-button>

<script>
  const backButton = document.querySelector('ion-back-button');

  /**
   * The back button text can be updated
   * anytime the locale changes.
   */
  backButton.text = 'Go Back';
</script>

推奨されない

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      // Not recommended when your app requires reactive values
      backButtonText: 'Go Back'
    })
  ],
  ...
});

推奨

<ion-back-button [text]="backButtonText"></ion-back-button>

@Component(...)
class MyComponent {
  /**
   * The back button text can be updated
   * anytime the locale changes.
   */
  backButtonText = 'Go Back';
}

推奨されない

import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular({
      // Not recommended when your app requires reactive values
      backButtonText: 'Go Back'
    })
  ]
})

推奨

<ion-back-button [text]="backButtonText"></ion-back-button>

@Component(...)
class MyComponent {
  /**
   * The back button text can be updated
   * anytime the locale changes.
   */
  backButtonText = 'Go Back';
}

推奨されない

import { setupIonicReact } from '@ionic/react';

setupIonicReact({
  // Not recommended when your app requires reactive values
  backButtonText: 'Go Back',
});

推奨

import { useState } from 'react';
import { IonBackButton } from '@ionic/react';

const ExampleComponent = () => {
  const [backButtonText, setBackButtonText] = useState('Go Back');
  return (
    {/*
     * The back button text can be updated
     * anytime the locale changes.
     */}
    <IonBackButton text={backButtonText}></IonBackButton>
  )
}

推奨されない

import { IonicVue } from '@ionic/vue';
import { createApp } from 'vue';

// Not recommended when your app requires reactive values
createApp(App).use(IonicVue, {
  backButtonText: 'Go Back',
});

推奨

<template>
  <ion-back-button [text]="backButtonText"></ion-back-button>
</template>

<script setup lang="ts">
  import { IonBackButton } from '@ionic/vue';
  import { ref } from 'vue';

  /**
   * The back button text can be updated
   * anytime the locale changes.
   */
  const backButtonText = ref('Go Back');
</script>

プラットフォームごとの設定

Ionic Configは、プラットフォームごとに設定することもできます。たとえば、これにより、アプリが潜在的に低速なデバイス上のブラウザで実行されている場合に、アニメーションを無効にすることができます。開発者は、プラットフォームユーティリティを利用してこれを実現できます。

次の例では、アプリがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリのすべてのアニメーションを無効にしています。

Angular
Angular（スタンドアロン）
React
Vue

注

構成は実行時に設定されるため、プラットフォーム依存性注入にアクセスできません。代わりに、プロバイダーが直接使用する基になる関数を使用できます。

検出できるプラットフォームの種類については、Angularプラットフォームドキュメントを参照してください。

app.module.ts
import { isPlatform, IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      animated: !isPlatform('mobileweb')
    })
  ],
  ...
})

注

検出できるプラットフォームの種類については、Angularプラットフォームドキュメントを参照してください。

main.ts
import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular({
      animated: !isPlatform('mobileweb')
    })
  ]
})

注

検出できるプラットフォームの種類については、Reactプラットフォームドキュメントを参照してください。

App.tsx
import { isPlatform, setupIonicReact } from '@ionic/react';

setupIonicReact({
  animated: !isPlatform('mobileweb'),
});

注

検出できるプラットフォームの種類については、Vueプラットフォームドキュメントを参照してください。

main.ts
import { IonicVue, isPlatform } from '@ionic/vue';

createApp(App).use(IonicVue, {
  animated: !isPlatform('mobileweb'),
});

フォールバック

次の例では、プラットフォームに基づいて完全に異なる構成を設定し、一致するプラットフォームがない場合はデフォルト構成にフォールバックできます。

Angular
Angular（スタンドアロン）
React
Vue

app.module.ts
import { isPlatform, IonicModule } from '@ionic/angular';

const getConfig = () => {
  let config = {
    animated: false
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous'
    }
  }

  return config;
}
@NgModule({
  ...
  imports: [
    IonicModule.forRoot(getConfig())
  ],
  ...
});

main.ts
import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';

const getConfig = () => {
  let config = {
    animated: false
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous'
    }
  }

  return config;
}

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular(getConfig())
  ]
})

App.tsx
import { isPlatform, setupIonicReact } from '@ionic/react';

const getConfig = () => {
  let config = {
    animated: false,
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous',
    };
  }

  return config;
};

setupIonicReact(getConfig());

main.ts
import { IonicVue, isPlatform } from '@ionic/vue';

const getConfig = () => {
  let config = {
    animated: false,
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous',
    };
  }

  return config;
};

createApp(App).use(IonicVue, getConfig());

オーバーライド

この最後の例では、さまざまなプラットフォーム要件に基づいて構成オブジェクトを累積できます。

Angular
Angular（スタンドアロン）
React
Vue

app.module.ts
import { isPlatform, IonicModule } from '@ionic/angular';

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      tabButtonLayout: 'label-hide'
    }
  }

  return {
    tabButtonLayout: 'icon-top'
  };
}
@NgModule({
  ...
  imports: [
    IonicModule.forRoot(getConfig())
  ],
  ...
});

main.ts
import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      tabButtonLayout: 'label-hide'
    }
  }

  return {
    tabButtonLayout: 'icon-top'
  };
}

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    provideIonicAngular(getConfig())
  ]
})

App.tsx
import { isPlatform, setupIonicReact } from '@ionic/react';

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      tabButtonLayout: 'label-hide',
    };
  }

  return {
    tabButtonLayout: 'icon-top',
  };
};

setupIonicReact(getConfig());

main.ts
import { IonicVue, isPlatform } from '@ionic/vue';

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      tabButtonLayout: 'label-hide',
    };
  }

  return {
    tabButtonLayout: 'icon-top',
  };
};

createApp(App).use(IonicVue, getConfig());

構成の読み取り（Angular）

Ionic Angularは、Ionic ConfigにアクセスするためのConfigプロバイダーを提供します。

get

説明	設定値を`any`として返します。設定が定義されていない場合は`null`を返します。
署名	`get(key: string, fallback?: any) => any`

例

Angular
Angular（スタンドアロン）

import { Config } from '@ionic/angular';

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const mode = config.get('mode');
  }
}

import { Config } from '@ionic/angular/standalone';

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const mode = config.get('mode');
  }
}

getBoolean

説明	設定値を`boolean`として返します。設定が定義されていない場合は`false`を返します。
署名	`getBoolean(key: string, fallback?: boolean) => boolean`

例

Angular
Angular（スタンドアロン）

import { Config } from '@ionic/angular';

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
  }
}

import { Config } from '@ionic/angular/standalone';

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
  }
}

getNumber

説明	設定値を`number`として返します。設定が定義されていない場合は`0`を返します。
署名	`getNumber(key: string, fallback?: number) => number`

インターフェース

IonicConfig

以下は、Ionicが使用する構成オプションです。

Config	タイプ	説明
`actionSheetEnter`	`AnimationBuilder`	すべての`ion-action-sheet`に対してカスタムのエンターアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`actionSheetLeave`	`AnimationBuilder`	すべての`ion-action-sheet`に対してカスタムのリーブアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`alertEnter`	`AnimationBuilder`	すべての`ion-alert`に対してカスタムのエンターアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`alertLeave`	`AnimationBuilder`	すべての`ion-alert`に対してカスタムのリーブアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`animated`	`boolean`	`true`の場合、Ionicはアプリ全体でアニメーションとトランジションをすべて有効にします。
`backButtonDefaultHref`	`string`	すべての`<ion-back-button>`コンポーネントの`defaultHref`プロパティのデフォルト値をオーバーライドします。
`backButtonIcon`	`string`	すべての`<ion-back-button>`コンポーネントのデフォルトアイコンをオーバーライドします。
`backButtonText`	`string`	すべての`<ion-back-button>`コンポーネントのデフォルトテキストをオーバーライドします。
`innerHTMLTemplatesEnabled`	`boolean`	関連コンポーネント: `ion-alert`、`ion-infinite-scroll-content`、`ion-loading`、`ion-refresher-content`、`ion-toast`。`true`の場合、関連コンポーネントに渡されるコンテンツはプレーンテキストではなくHTMLとして解析されます。デフォルトは`false`です。
`hardwareBackButton`	`boolean`	`true`の場合、IonicはAndroidデバイスのハードウェアバックボタンに応答します。
`infiniteLoadingSpinner`	`SpinnerTypes`	すべての`<ion-infinite-scroll-content>`コンポーネントのデフォルトのスピナータイプをオーバーライドします。
`loadingEnter`	`AnimationBuilder`	すべての`ion-loading`に対してカスタムのエンターアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`loadingLeave`	`AnimationBuilder`	すべての`ion-loading`に対してカスタムのリーブアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`loadingSpinner`	`SpinnerTypes`	すべての`ion-loading`オーバーレイのデフォルトのスピナーをオーバーライドします。
`menuIcon`	`string`	すべての`<ion-menu-button>`コンポーネントのデフォルトアイコンをオーバーライドします。
`menuType`	`string`	すべての`<ion-menu>`コンポーネントのデフォルトのメニュータイプをオーバーライドします。
`modalEnter`	`AnimationBuilder`	すべての`ion-modal`に対してカスタムのエンターアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`modalLeave`	`AnimationBuilder`	すべての`ion-modal`に対してカスタムのリーブアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`mode`	`Mode`	モードは、アプリケーション全体で使用するプラットフォームスタイルを決定します。
`navAnimation`	`AnimationBuilder`	アプリケーション全体のすべての`ion-nav`および`ion-router-outlet`のデフォルトの「animation」をオーバーライドします。
`pickerEnter`	`AnimationBuilder`	すべての`ion-picker`に対してカスタムのエンターアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`pickerLeave`	`AnimationBuilder`	すべての`ion-picker`に対してカスタムのリーブアニメーションを提供し、デフォルトの「animation」をオーバーライドします。
`platform`	`PlatformConfig`	デフォルトのプラットフォーム検出方法をオーバーライドします。
`popoverEnter`	`AnimationBuilder`	すべての`ion-popover`に対してカスタムのenterアニメーションを提供し、デフォルトの「animation」を上書きします。
`popoverLeave`	`AnimationBuilder`	すべての`ion-popover`に対してカスタムのleaveアニメーションを提供し、デフォルトの「animation」を上書きします。
`refreshingIcon`	`string`	すべての`<ion-refresh-content>`コンポーネントでデフォルトのアイコンを上書きします。
`refreshingSpinner`	`SpinnerTypes`	すべての`<ion-refresh-content>`コンポーネントでデフォルトのスピナータイプを上書きします。
`rippleEffect`	`boolean`	`true`の場合、アプリ全体でMaterial Designのリプル効果が有効になります。
`sanitizerEnabled`	`boolean`	`true`の場合、IonicはカスタムHTMLを受け入れるコンポーネントプロパティに対して基本的なDOMサニタイザーを有効にします。
`spinner`	`SpinnerTypes`	すべての`<ion-spinner>`コンポーネントでデフォルトのスピナーを上書きします。
`statusTap`	`boolean`	`true`の場合、ステータスバーをクリックまたはタップすると、コンテンツが一番上までスクロールします。
`swipeBackEnabled`	`boolean`	`true`の場合、Ionicはアプリケーション全体で「スワイプして戻る」ジェスチャーを有効にします。
`tabButtonLayout`	`TabButtonLayout`	アプリケーション全体のすべての`ion-bar-button`のデフォルトの「layout」を上書きします。
`toastDuration`	`number`	すべての`ion-toast`コンポーネントのデフォルトの`duration`を上書きします。
`toastEnter`	`AnimationBuilder`	すべての`ion-toast`に対してカスタムのenterアニメーションを提供し、デフォルトの「animation」を上書きします。
`toastLeave`	`AnimationBuilder`	すべての`ion-toast`に対してカスタムのleaveアニメーションを提供し、デフォルトの「animation」を上書きします。
`toggleOnOffLabels`	`boolean`	すべての`ion-toggle`コンポーネントでデフォルトの`enableOnOffLabels`を上書きします。
`experimentalCloseWatcher`	`boolean`	実験的: `true`の場合、CloseWatcher APIは、メニューとオーバーレイを閉じるため、およびナビゲーションのために、すべてのEscapeキーとハードウェアバックボタンの押下を処理するために使用されます。`hardwareBackButton`設定オプションも`true`である必要があることに注意してください。
`focusManagerPriority`	`FocusManagerPriority[]`	実験的: 定義されている場合、Ionicは各ページ遷移後にフォーカスを適切な要素に移動します。これにより、支援技術を利用するユーザーがページ遷移が発生したときに通知されるようになります。デフォルトでは無効になっています。

グローバル設定​

コンポーネントごとの設定​

プラットフォームごとの設定​

フォールバック​

オーバーライド​

構成の読み取り（Angular）​

get​

例​

getBoolean​

例​

getNumber​

インターフェース​

IonicConfig​

目次

グローバル設定

コンポーネントごとの設定

プラットフォームごとの設定

フォールバック

オーバーライド

構成の読み取り（Angular）

get

例

getBoolean

例

getNumber

インターフェース

IonicConfig