Config
Ionic Configは、アプリケーション全体にわたってコンポーネントのプロパティをグローバルに変更する方法を提供します。Ionic Configは、アプリのモード、タブボタンのレイアウト、アニメーションなどを設定できます。
グローバル設定
アプリケーションの初期のIonic Configを上書きするには、IonicVueプラグインのインストール時に追加パラメータとしてConfigオブジェクトを指定します。
createApp(App)
.use(IonicVue, {
rippleEffect: false,
mode: 'md'
})
CopyCopied
上の例では、Material Designのリップル効果を無効にし、モードをMaterial Designにしています。
プラットフォームごとの構成
Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができます。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。
次の例では、アプリケーションがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリケーションのすべてのアニメーションを無効にしています。
isPlatform ()
呼び出しは、渡されたプラットフォームに基づいて
true
または
false
を返します。 Platform Documentation を指定します。
import { IonicVue, isPlatform } from '@ionic/vue';
createApp(App)
.use(IonicVue, {
animated: !isPlatform('mobileweb')
})
CopyCopied
次の例では、プラットフォームに基づいてまったく異なる構成を設定し、一致するプラットフォームがない場合はデフォルトの構成に戻すことができます:
import { IonicVue, isPlatform } from '@ionic/vue';
const getConfig = () => {
if (isPlatform('hybrid')) {
return {
backButtonText: 'Previous',
tabButtonLayout: 'label-hide'
}
}
return {
menuIcon: 'ellipsis-vertical'
}
}
createApp(App)
.use(IonicVue, getConfig());
CopyCopied
最後に、この例では、異なるプラットフォーム要件に基づいて構成オブジェクトを蓄積できます:
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());
CopyCopied
Configオプション
以下はIonicで使用できる設定オプションのリストです。
Config | Type | Description |
---|---|---|
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. |
backButtonIcon |
string |
Overrides the default icon in all <ion-back-button> components. |
backButtonText | string | Overrides the default text in all
<ion-back-button> components. |
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. |
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". |
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. |
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. |
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". |
Previous
Navigation
Next
Platform