Config
The Config lets you configure your entire app or specific platforms. You can set the tab placement, icon mode, animations, and more here.
@App({
template: `<ion-nav [root]="root"></ion-nav>`
config: {
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
}
})
To change the mode to always use Material Design (md).
@App({
template: `<ion-nav [root]="root"></ion-nav>`
config: {
mode: 'md'
}
})
Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform.
@App({
template: `<ion-nav [root]="root"></ion-nav>`
config: {
tabbarPlacement: 'bottom',
platforms: {
ios: {
tabbarPlacement: 'top',
}
}
}
})
We could also configure these values at a component level. Take tabbarPlacement
, we can configure this as a property on our ion-tabs
.
<ion-tabs tabbarPlacement="top">
<ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
</ion-tabs>
The last way we could configure is through URL query strings. This is useful for testing while in the browser.
Simply add ?ionic<PROPERTYNAME>=<value>
to the url.
http://localhost:8100/?ionicTabbarPlacement=bottom
Custom values can be added to config, and looked up at a later point in time.
config.set('ios', 'favoriteColor', 'green');
// from any page in your app:
config.get('favoriteColor'); // 'green'
A config value can come from anywhere and be anything, but there are a default set of values.
Config property | Default iOS Value | Default MD Value |
---|---|---|
activator | highlight | ripple |
actionSheetEnter | action-sheet-slide-in | action-sheet-md-slide-in |
actionSheetLeave | action-sheet-slide-out | action-sheet-md-slide-out |
alertEnter | alert-pop-in | alert-md-pop-in |
alertLeave | alert-pop-out | alert-md-pop-out |
backButtonText | Back | |
backButtonIcon | ion-ios-arrow-back | ion-md-arrow-back |
iconMode | ios | md |
menuType | reveal | overlay |
modalEnter | modal-slide-in | modal-md-slide-in |
modalLeave | modal-slide-out | modal-md-slide-out |
pageTransition | ios-transition | md-transition |
pageTransitionDelay | 16 | 120 |
tabbarPlacement | bottom | top |
tabbarHighlight | top | |
tabbarLayout | ||
tabSubPages | true |
Instance Members
get(key, fallbackValue)
Returns a single config value, given a key.
Param | Type | Details |
---|---|---|
key |
string
|
the key for the config value |
fallbackValue |
any
|
a fallback value to use when the config
value was not found, or is config value is |
getBoolean(key, fallbackValue)
Same as get()
, however always returns a boolean value. If the
value from get()
is null
, then it’ll return the fallbackValue
which defaults to false
. Otherwise, getBoolean()
will return
if the config value is truthy or not. It also returns true
if
the config value was the string value "true"
.
Param | Type | Details |
---|---|---|
key |
string
|
the key for the config value |
fallbackValue |
boolean
|
a fallback value to use when the config
value was |
getNumber(key, fallbackValue)
Same as get()
, however always returns a number value. Uses parseFloat()
on the value received from get()
. If the result from the parse is NaN
,
then it will return the value passed to fallbackValue
. If no fallback
value was provided then it’ll default to returning NaN
when the result
is not a valid number.
Param | Type | Details |
---|---|---|
key |
string
|
the key for the config value |
fallbackValue |
number
|
a fallback value to use when the config
value turned out to be |
set(platform, key, value)
Sets a single config value.
Param | Type | Details |
---|---|---|
platform |
string
|
The platform (either 'ios' or 'android') that the config value should apply to. Leaving this blank will apply the config value to all platforms. |
key |
string
|
The key used to look up the value at a later point in time. |
value |
string
|
The config value being stored. |