メインコンテンツまでスキップ
Version: v6

Config

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

使い方

アプリのIonicの初期設定をオーバーライドするには、Ionicコンポーネント (IonAppを含めます)をレンダリングする前に、@ionic/react から setupConfig メソッドをインポートして呼び出します:

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

上記の例では、アプリ全体でマテリアルデザインのリップル効果を無効にし、modeをマテリアルデザインに強制しています。

Per-Platform Config

Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.

In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. The isPlatform() call returns true or false based upon the platform that is passed in. See the Platform Documentation for a list of possible values.

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

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

The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:

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

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

return {
menuIcon: 'ellipsis-vertical',
};
};

setupIonicReact(getConfig());

Finally, this example allows you to accumulate a config object based upon different platform requirements:

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

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

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

return config;
};
setupIonicReact(getConfig());

Config Options

以下は、Ionicで使用できる設定オプションのリストです。

ConfigTypeDescription
actionSheetEnterAnimationBuilderProvides a custom enter animation for all ion-action-sheet, overriding the default "animation".
actionSheetLeaveAnimationBuilderProvides a custom leave animation for all ion-action-sheet, overriding the default "animation".
alertEnterAnimationBuilderProvides a custom enter animation for all ion-alert, overriding the default "animation".
alertLeaveAnimationBuilderProvides a custom leave animation for all ion-alert, overriding the default "animation".
animatedbooleanIf true, Ionic will enable all animations and transitions across the app.
backButtonIconstringOverrides the default icon in all <ion-back-button> components.
backButtonTextstringOverrides the default text in all <ion-back-button> components.
hardwareBackButtonbooleanIf true, Ionic will respond to the hardware back button in an Android device.
infiniteLoadingSpinnerSpinnerTypesOverrides the default spinner type in all <ion-infinite-scroll-content> components.
loadingEnterAnimationBuilderProvides a custom enter animation for all ion-loading, overriding the default "animation".
loadingLeaveAnimationBuilderProvides a custom leave animation for all ion-loading, overriding the default "animation".
loadingSpinnerSpinnerTypesOverrides the default spinner for all ion-loading overlays.
menuIconstringOverrides the default icon in all <ion-menu-button> components.
menuTypestringOverrides the default menu type for all <ion-menu> components.
modalEnterAnimationBuilderProvides a custom enter animation for all ion-modal, overriding the default "animation".
modalLeaveAnimationBuilderProvides a custom leave animation for all ion-modal, overriding the default "animation".
modeModeThe mode determines which platform styles to use for the whole application.
navAnimationAnimationBuilderOverrides the default "animation" of all ion-nav and ion-router-outlet across the whole application.
pickerEnterAnimationBuilderProvides a custom enter animation for all ion-picker, overriding the default "animation".
pickerLeaveAnimationBuilderProvides a custom leave animation for all ion-picker, overriding the default "animation".
platformPlatformConfigOverrides the default platform detection methods.
popoverEnterAnimationBuilderProvides a custom enter animation for all ion-popover, overriding the default "animation".
popoverLeaveAnimationBuilderProvides a custom leave animation for all ion-popover, overriding the default "animation".
refreshingIconstringOverrides the default icon in all <ion-refresh-content> components.
refreshingSpinnerSpinnerTypesOverrides the default spinner type in all <ion-refresh-content> components.
sanitizerEnabledbooleanIf true, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
spinnerSpinnerTypesOverrides the default spinner in all <ion-spinner> components.
statusTapbooleanIf true, clicking or tapping the status bar will cause the content to scroll to the top.
swipeBackEnabledbooleanIf true, Ionic will enable the "swipe-to-go-back" gesture across the application.
tabButtonLayoutTabButtonLayoutOverrides the default "layout" of all ion-bar-button across the whole application.
toastEnterAnimationBuilderProvides a custom enter animation for all ion-toast, overriding the default "animation".
toastLeaveAnimationBuilderProvides a custom leave animation for all ion-toast, overriding the default "animation".