UNPKG

ionic-framework

Version:
130 lines (128 loc) 3.46 kB
/** * Config lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here. * * ```ts * @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', * } * }) * ``` * * Config can be overwritting at multiple levels, allowing deeper configuration. Taking the example from earlier, we can override any setting we want based on a platform. * ```ts * @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`. * * ```html * <ion-tabs tabbar-placement="top"> * <ion-tab tab-title="Dash" tab-icon="pulse" [root]="tabRoot"></ion-tab> * </ion-tabs> * ``` * * The property will override anything else set in the apps. * * 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. * * ```bash * http://localhost:8100/?ionicTabbarPlacement=bottom * ``` * * A config value can come from anywhere and be anything, but there are a default set of values. * * ``` javascript * // iOS * activator: 'highlight', * actionSheetEnter: 'action-sheet-slide-in', * actionSheetLeave: 'action-sheet-slide-out', * actionSheetCancelIcon: '', * actionSheetDestructiveIcon: '', * backButtonText: 'Back', * backButtonIcon: 'ion-ios-arrow-back', * iconMode: 'ios', * menuType: 'reveal', * modalEnter: 'modal-slide-in', * modalLeave: 'modal-slide-out', * pageTransition: 'ios-transition', * pageTransitionDelay: 16, * popupEnter: 'popup-pop-in', * popupLeave: 'popup-pop-out', * tabbarPlacement: 'bottom', * // MD * activator: 'ripple', * actionSheetEnter: 'action-sheet-md-slide-in', * actionSheetLeave: 'action-sheet-md-slide-out', * actionSheetCancelIcon: 'ion-md-close', * actionSheetDestructiveIcon: 'ion-md-trash', * backButtonText: '', * backButtonIcon: 'ion-md-arrow-back', * iconMode: 'md', * menuType: 'overlay', * modalEnter: 'modal-md-slide-in', * modalLeave: 'modal-md-slide-out', * pageTransition: 'md-transition', * pageTransitionDelay: 120, * popupEnter: 'popup-md-pop-in', * popupLeave: 'popup-md-pop-out', * tabbarHighlight: true, * tabbarPlacement: 'top', * tabSubPages: true, * ``` * * **/ export declare class Config { constructor(config: any); /** * For setting and getting multiple config values */ /** * @private * @name settings() * @description */ settings(): any; /** * For setting a single config values */ /** * @private * @name set() * @description */ set(): this; /** * For getting a single config values */ /** * @private * @name get() * @description */ get(key: any): any; /** * @private */ setPlatform(platform: any): void; static setModeConfig(mode: any, config: any): void; static getModeConfig(mode: any): any; }