fix(angular): goback navigation

This commit is contained in:
Manu Mtz.-Almeida
2018-03-29 18:41:46 +02:00
parent a36913e9db
commit 7b9a00e433
16 changed files with 165 additions and 167 deletions

View File

@ -15,7 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) {
});
}
const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', data = 'data', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap';
const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap';
@NgDirective({ selector: 'ion-anchor' })
export class Anchor {
@ -590,7 +590,7 @@ export class Item {
*/
@NgInput() color: string;
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
@NgInput() detail: boolean;
/**
@ -604,10 +604,10 @@ export class Item {
/**
* Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
*/
@NgInput() tappable: boolean;
@NgInput() button: boolean;
@NgInput() goBack: boolean;
constructor(el: ElementRef) {
inputs(this, el, [color, detail, disabled, href, tappable, goBack]);
inputs(this, el, [color, detail, disabled, href, button, goBack]);
}
}
@ -777,21 +777,17 @@ export class NavPop {
@NgDirective({ selector: 'ion-nav-push' })
export class NavPush {
@NgInput() component: any;
@NgInput() url: string;
@NgInput() data: any;
constructor(el: ElementRef) {
inputs(this, el, [component, url, data]);
inputs(this, el, [url]);
}
}
@NgDirective({ selector: 'ion-nav-set-root' })
export class NavSetRoot {
@NgInput() component: any;
@NgInput() url: string;
@NgInput() data: any;
constructor(el: ElementRef) {
inputs(this, el, [component, url, data]);
inputs(this, el, [url]);
}
}

View File

@ -4,25 +4,31 @@ import { Injectable } from '@angular/core';
export class NavController {
private direction = 1;
// private stack: string[] = [];
private goBack = false;
private stack: string[] = [];
setGoback() {
this.direction = -1;
this.goBack = true;
}
consumeDirection() {
// if (this.direction === 0) {
// const index = this.stack.indexOf(document.location.href);
// if (index === -1) {
// this.stack.push(document.location.href);
// this.direction = 1;
// } else {
// this.stack = this.stack.slice(0, index + 1);
// this.direction = -1;
// }
// }
const direction = this.direction;
if (this.direction === 0) {
const index = this.stack.indexOf(document.location.href);
if (index === -1) {
this.stack.push(document.location.href);
this.direction = 1;
} else if (index < this.stack.length - 1) {
this.stack = this.stack.slice(0, index + 1);
this.direction = -1;
}
}
const direction = this.goBack
? -1
: this.direction;
this.goBack = false;
this.direction = 0;
return direction;
}
}

View File

@ -1,6 +1,7 @@
import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router';
import { StackController } from './router-controller';
import { NavController } from '..';
@Directive({
selector: 'ion-router-outlet',
@ -25,7 +26,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
@Attribute('name') name: string,
@Optional() @Attribute('stack') stack: any,
private changeDetector: ChangeDetectorRef,
// private navCtrl: NavController,
private navCtrl: NavController,
router: Router
) {
this.name = name || PRIMARY_OUTLET;
@ -136,7 +137,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
}
await this.stackCtrl.setActive(enteringView, undefined);
const direction = this.navCtrl.consumeDirection();
await this.stackCtrl.setActive(enteringView, direction);
this.activateEvents.emit(this.activated.instance);
}

View File

@ -32,10 +32,10 @@ export class StackController {
return this.views.length > deep;
}
async setActive(enteringView: RouteView, defaultDir: number|undefined) {
async setActive(enteringView: RouteView, direction: number | undefined) {
const leavingView = this.getActive();
const reused = this.insertView(enteringView);
const direction = defaultDir != null ? defaultDir : (reused ? -1 : 1);
direction = direction != null ? direction : (reused ? -1 : 1);
await this.transition(enteringView, leavingView, direction);
this.cleanup();

View File

@ -30,6 +30,8 @@ import {
AlertOptions,
Animation as Animation2,
AnimationBuilder,
ComponentProps,
ComponentRef,
FrameworkDelegate,
LoadingOptions,
Menu,
@ -85,11 +87,16 @@ import {
MenuChangeEventDetail,
} from './components/menu/menu';
import {
NavComponent,
NavOptions,
NavParams,
TransitionDoneFn,
TransitionInstruction,
} from './components/nav/nav-util';
import {
AnimationBuilder as AnimationBuilder3,
ComponentProps as ComponentProps2,
FrameworkDelegate as FrameworkDelegate2,
} from '.';
import {
ViewController,
} from './components/nav/view-controller';
@ -99,10 +106,6 @@ import {
RouterEventDetail,
RouteWrite,
} from './components/router/utils/interfaces';
import {
AnimationBuilder as AnimationBuilder3,
FrameworkDelegate as FrameworkDelegate2,
} from '.';
import {
PickerButton,
PickerColumn as PickerColumn2,
@ -166,7 +169,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'cssClass': string | string[];
/**
* Dismiss the action sheet overlay after it has been presented.
*/
@ -238,7 +241,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'cssClass'?: string | string[];
/**
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -336,7 +339,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'cssClass': string | string[];
/**
* Dismiss the alert overlay after it has been presented.
*/
@ -417,7 +420,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'cssClass'?: string | string[];
/**
* If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@ -2851,7 +2854,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'cssClass': string | string[];
/**
* Dismiss the loading overlay after it has been presented.
*/
@ -2931,7 +2934,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'cssClass'?: string | string[];
/**
* If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
*/
@ -3278,15 +3281,15 @@ declare global {
/**
* The component to display inside of the modal.
*/
'component': any;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'component': ComponentRef;
/**
* The data to pass to the modal component.
*/
'data': any;
'componentProps': ComponentProps;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string | string[];
'delegate': FrameworkDelegate;
/**
* Dismiss the modal overlay after it has been presented.
@ -3355,15 +3358,15 @@ declare global {
/**
* The component to display inside of the modal.
*/
'component'?: any;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'component'?: ComponentRef;
/**
* The data to pass to the modal component.
*/
'data'?: any;
'componentProps'?: ComponentProps;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string | string[];
'delegate'?: FrameworkDelegate;
/**
* If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
@ -3449,8 +3452,8 @@ declare global {
declare global {
interface HTMLIonNavPushElement extends HTMLStencilElement {
'component': any;
'data': any;
'component': NavComponent;
'componentProps': ComponentProps;
'url': string;
}
var HTMLIonNavPushElement: {
@ -3470,8 +3473,8 @@ declare global {
}
namespace JSXElements {
export interface IonNavPushAttributes extends HTMLAttributes {
'component'?: any;
'data'?: any;
'component'?: NavComponent;
'componentProps'?: ComponentProps;
'url'?: string;
}
}
@ -3480,8 +3483,8 @@ declare global {
declare global {
interface HTMLIonNavSetRootElement extends HTMLStencilElement {
'component': any;
'data': any;
'component': NavComponent;
'componentProps': ComponentProps;
'url': string;
}
var HTMLIonNavSetRootElement: {
@ -3501,8 +3504,8 @@ declare global {
}
namespace JSXElements {
export interface IonNavSetRootAttributes extends HTMLAttributes {
'component'?: any;
'data'?: any;
'component'?: NavComponent;
'componentProps'?: ComponentProps;
'url'?: string;
}
}
@ -3518,24 +3521,20 @@ declare global {
'getByIndex': (index: number) => ViewController;
'getPrevious': (view?: ViewController) => ViewController;
'getRouteId': () => RouteID;
/**
* Return a view controller
*/
'getViewById': (id: string) => ViewController;
'getViews': () => ViewController[];
'insert': (insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'insertPages': (insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'insert': (insertIndex: number, component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'pop': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'popAll': () => Promise<boolean[]>;
'popTo': (indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'popToRoot': (opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'push': (page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'push': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'removeView': (viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'root': any;
'rootParams': any;
'setPages': (pages: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'setRoot': (pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'root': NavComponent;
'rootParams': ComponentProps;
'setPages': (views: any[], opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'setRoot': (component: NavComponent, componentProps?: ComponentProps, opts?: NavOptions, done?: TransitionDoneFn) => Promise<boolean>;
'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
'swipeBackEnabled': boolean;
}
@ -3559,8 +3558,8 @@ declare global {
'animated'?: boolean;
'delegate'?: FrameworkDelegate;
'onIonNavChanged'?: (event: CustomEvent<void>) => void;
'root'?: any;
'rootParams'?: any;
'root'?: NavComponent;
'rootParams'?: ComponentProps;
'swipeBackEnabled'?: boolean;
}
}
@ -3679,7 +3678,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'cssClass': string | string[];
/**
* Dismiss the picker overlay after it has been presented.
*/
@ -3753,7 +3752,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'cssClass'?: string | string[];
/**
* Number of milliseconds to wait before dismissing the picker.
*/
@ -3889,15 +3888,15 @@ declare global {
/**
* The component to display inside of the popover.
*/
'component': string;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'component': ComponentRef;
/**
* The data to pass to the popover component.
*/
'data': any;
'componentProps': ComponentProps;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string | string[];
'delegate': FrameworkDelegate;
/**
* Dismiss the popover overlay after it has been presented.
@ -3974,15 +3973,15 @@ declare global {
/**
* The component to display inside of the popover.
*/
'component'?: string;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'component'?: ComponentRef;
/**
* The data to pass to the popover component.
*/
'data'?: any;
'componentProps'?: ComponentProps;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string | string[];
'delegate'?: FrameworkDelegate;
/**
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
@ -6353,7 +6352,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass': string;
'cssClass': string | string[];
/**
* Dismiss the toast overlay after it has been presented.
*/
@ -6433,7 +6432,7 @@ declare global {
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string;
'cssClass'?: string | string[];
/**
* If true, the toast will dismiss when the page changes. Defaults to `false`.
*/

View File

@ -25,7 +25,7 @@ An array of buttons for the action sheet.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@ -101,7 +101,7 @@ An array of buttons for the action sheet.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

View File

@ -34,7 +34,7 @@ Array of buttons to be added to the alert.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@ -129,7 +129,7 @@ Array of buttons to be added to the alert.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

View File

@ -42,7 +42,7 @@ Optional text content to display in the loading indicator.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@ -133,7 +133,7 @@ Optional text content to display in the loading indicator.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

View File

@ -59,26 +59,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
any
The component to display inside of the modal.
#### componentProps
The data to pass to the modal component.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### data
any
The data to pass to the modal component.
#### delegate
@ -151,26 +151,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
any
The component to display inside of the modal.
#### component-props
The data to pass to the modal component.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### data
any
The data to pass to the modal component.
#### delegate

View File

@ -9,12 +9,12 @@
#### component
any
#### data
any
#### componentProps
#### url
@ -26,12 +26,12 @@ string
#### component
any
#### data
any
#### component-props
#### url

View File

@ -9,12 +9,12 @@
#### component
any
#### data
any
#### componentProps
#### url
@ -26,12 +26,12 @@ string
#### component
any
#### data
any
#### component-props
#### url

View File

@ -19,12 +19,12 @@ boolean
#### root
any
#### rootParams
any
#### swipeBackEnabled
@ -46,12 +46,12 @@ boolean
#### root
any
#### root-params
any
#### swipe-back-enabled
@ -81,11 +81,6 @@ boolean
#### getRouteId()
#### getViewById()
Return a view controller
#### getViews()

View File

@ -25,7 +25,7 @@ Array of columns to be displayed in the picker.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@ -101,7 +101,7 @@ Array of columns to be displayed in the picker.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

View File

@ -39,26 +39,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the popover.
#### componentProps
The data to pass to the popover component.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### data
any
The data to pass to the popover component.
#### delegate
@ -145,26 +145,26 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
#### component
string
The component to display inside of the popover.
#### component-props
The data to pass to the popover component.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### data
any
The data to pass to the popover component.
#### delegate

View File

@ -52,7 +52,7 @@ Text to display in the close button.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
@ -143,7 +143,7 @@ Text to display in the close button.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.

View File

@ -6,8 +6,7 @@ import { CssClassMap } from '../index';
export function createThemedClasses(mode: string, color: string, classes: string): CssClassMap {
const classObj: CssClassMap = {};
return classes.split(' ')
.reduce((classObj: CssClassMap, classString: string): CssClassMap => {
classes.split(' ').forEach(classString => {
classObj[classString] = true;
if (mode) {
@ -20,7 +19,8 @@ export function createThemedClasses(mode: string, color: string, classes: string
}
return classObj;
}, classObj);
});
return classObj;
}
/**