Version: v8

Config

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

グローバル設定

利用可能な設定キーは、IonicConfigインターフェースで見つけることができます。

次の例では、リップル効果を無効にし、モードを Material Design にデフォルト設定します：

JavaScript
Angular
Angular (Standalone)
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'
    })
  ]
})

The setupIonicReact function must be called before rendering any Ionic components (including 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 (Standalone)
React
Vue

Not recommended

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

Recommended

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

Not recommended

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

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

Recommended

<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';
}

Not recommended

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

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

Recommended

<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';
}

Not recommended

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

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

Recommended

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>
  )
}

Not recommended

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

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

Recommended

<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 は、プラットフォームごとに設定することもできます。たとえば、これにより、潜在的に遅いデバイスのブラウザでアプリが実行されている場合にアニメーションを無効にできます。開発者は、Platform ユーティリティを活用してこれを実現できます。

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

Angular
Angular (Standalone)
React
Vue

note

Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.

See the Angular Platform Documentation for the types of platforms you can detect.

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

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

note

Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.

See the Angular Platform Documentation for the types of platforms you can detect.

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

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

note

See the React Platform Documentation for the types of platforms you can detect.

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

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

note

See the Vue Platform Documentation for the types of platforms you can detect.

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

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

フォールバック

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

Angular
Angular (Standalone)
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 (Standalone)
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());

モードへのアクセス

場合によっては、アプリケーションロジック内で現在の Ionic モードにプログラム的にアクセスする必要があるかもしれません。これは、条件付き動作を適用したり、特定のアセットを取得したり、アクティブなスタイリングモードに基づいて他のアクションを実行したりするのに役立ちます。

設定の読み取り（Angular）

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

get

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

例

Angular
Angular (Standalone)

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 (Standalone)

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	Type	説明
`actionSheetEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".
`actionSheetLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".
`alertEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-alert`, overriding the default "animation".
`alertLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-alert`, overriding the default "animation".
`animated`	`boolean`	If `true`, Ionic will enable all animations and transitions across the app.
`backButtonDefaultHref`	`string`	Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components.
`backButtonIcon`	`string`	Overrides the default icon in all `<ion-back-button>` components.
`backButtonText`	`string`	Overrides the default text in all `<ion-back-button>` components.
`innerHTMLTemplatesEnabled`	`boolean`	Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`.
`hardwareBackButton`	`boolean`	If `true`, Ionic will respond to the hardware back button in an Android device.
`infiniteLoadingSpinner`	`SpinnerTypes`	Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.
`loadingEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-loading`, overriding the default "animation".
`loadingLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-loading`, overriding the default "animation".
`loadingSpinner`	`SpinnerTypes`	Overrides the default spinner for all `ion-loading` overlays.
`logLevel`	`'OFF' \| 'ERROR' \| 'WARN'`	Configures the logging level for Ionic Framework. If `'OFF'`, no errors or warnings are logged. If `'ERROR'`, only errors are logged. If `'WARN'`, errors and warnings are logged.
`menuIcon`	`string`	Overrides the default icon in all `<ion-menu-button>` components.
`menuType`	`string`	Overrides the default menu type for all `<ion-menu>` components.
`modalEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-modal`, overriding the default "animation".
`modalLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-modal`, overriding the default "animation".
`mode`	`Mode`	The mode determines which platform styles to use for the whole application.
`navAnimation`	`AnimationBuilder`	Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
`pickerEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-picker`, overriding the default "animation".
`pickerLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-picker`, overriding the default "animation".
`platform`	`PlatformConfig`	Overrides the default platform detection methods.
`popoverEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-popover`, overriding the default "animation".
`popoverLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-popover`, overriding the default "animation".
`refreshingIcon`	`string`	Overrides the default icon in all `<ion-refresh-content>` components.
`refreshingSpinner`	`SpinnerTypes`	Overrides the default spinner type in all `<ion-refresh-content>` components.
`rippleEffect`	`boolean`	If `true`, Material Design ripple effects will be enabled across the app.
`sanitizerEnabled`	`boolean`	If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
`spinner`	`SpinnerTypes`	Overrides the default spinner in all `<ion-spinner>` components.
`statusTap`	`boolean`	If `true`, clicking or tapping the status bar will cause the content to scroll to the top.
`swipeBackEnabled`	`boolean`	If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application.
`tabButtonLayout`	`TabButtonLayout`	Overrides the default "layout" of all `ion-bar-button` across the whole application.
`toastDuration`	`number`	Overrides the default `duration` for all `ion-toast` components.
`toastEnter`	`AnimationBuilder`	Provides a custom enter animation for all `ion-toast`, overriding the default "animation".
`toastLeave`	`AnimationBuilder`	Provides a custom leave animation for all `ion-toast`, overriding the default "animation".
`toggleOnOffLabels`	`boolean`	Overrides the default `enableOnOffLabels` in all `ion-toggle` components.
`experimentalCloseWatcher`	`boolean`	Experimental: If `true`, the CloseWatcher API will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that the `hardwareBackButton` config option must also be `true`.
`focusManagerPriority`	`FocusManagerPriority[]`	Experimental: When defined, Ionic will move focus to the appropriate element after each page transition. This ensures that users relying on assistive technology are informed when a page transition happens. Disabled by default.

グローバル設定​

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

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

フォールバック​

オーバーライド​

モードへのアクセス​

設定の読み取り（Angular）​

get​

例​

getBoolean​

例​

getNumber​

インターフェース​

IonicConfig​

Contents

グローバル設定

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

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

フォールバック

オーバーライド

モードへのアクセス

設定の読み取り（Angular）

get

例

getBoolean

例

getNumber

インターフェース

IonicConfig