javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(router-outlet): fix swipe to go back

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2019-06-27 17:22:06 +02:00
parent 92e0f98633
commit b69fb69a1a
4 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -936,6 +936,7 @@ ion-router-link,css-prop,--color
ion-router-outlet,shadow ion-router-outlet,shadow
ion-router-outlet,prop,animated,boolean,true,false,false ion-router-outlet,prop,animated,boolean,true,false,false
ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
ion-row,shadow ion-row,shadow

8
core/src/components.d.ts vendored
View File

@ -2029,6 +2029,10 @@ export namespace Components {
'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>; 'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
'delegate'?: FrameworkDelegate; 'delegate'?: FrameworkDelegate;
'getRouteId': () => Promise<RouteID | undefined>; 'getRouteId': () => Promise<RouteID | undefined>;
/**
* The mode determines which platform styles to use.
*/
'mode': "ios" | "md";
'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>; 'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>;
'swipeHandler'?: SwipeGestureHandler; 'swipeHandler'?: SwipeGestureHandler;
} }
@ -5254,6 +5258,10 @@ declare namespace LocalJSX {
* By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
*/ */
'animation'?: AnimationBuilder; 'animation'?: AnimationBuilder;
/**
* The mode determines which platform styles to use.
*/
'mode'?: "ios" | "md";
} }
interface IonRow extends JSXBase.HTMLAttributes<HTMLIonRowElement> {} interface IonRow extends JSXBase.HTMLAttributes<HTMLIonRowElement> {}
interface IonSearchbar extends JSXBase.HTMLAttributes<HTMLIonSearchbarElement> { interface IonSearchbar extends JSXBase.HTMLAttributes<HTMLIonSearchbarElement> {

9
core/src/components/router-outlet/readme.md
View File

@ -30,10 +30,11 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | | ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------ |
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` | | `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` | | `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
---------------------------------------------- ----------------------------------------------

8
core/src/components/router-outlet/route-outlet.tsx
View File

@ -21,6 +21,11 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
/**
* The mode determines which platform styles to use.
*/
@Prop({ mutable: true }) mode = getIonMode(this);
/** @internal */ /** @internal */
@Prop() delegate?: FrameworkDelegate; @Prop() delegate?: FrameworkDelegate;
@ -147,8 +152,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
// emit nav will change event // emit nav will change event
this.ionNavWillChange.emit(); this.ionNavWillChange.emit();
const mode = getIonMode(this); const { el, mode } = this;
const { el } = this;
const animated = this.animated && config.getBoolean('animated', true); const animated = this.animated && config.getBoolean('animated', true);
const animationBuilder = this.animation || opts.animationBuilder || config.get('navAnimation'); const animationBuilder = this.animation || opts.animationBuilder || config.get('navAnimation');