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

feat(all): add support for configuring animations on a per-page basis (#21433)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-06-08 15:49:14 -04:00
committed by GitHub
parent c8db0d5eeb
commit f34d3752e3
34 changed files with 334 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/button/button.tsx
View File

@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { AnimationBuilder, Color, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@ -65,6 +65,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* When using a router, it specifies the transition animation when navigating to
* another page using `href`.
*/
@Prop() routerAnimation: AnimationBuilder | undefined;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
@ -146,7 +152,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
private handleClick = (ev: Event) => {
if (this.type === 'button') {
openURL(this.href, ev, this.routerDirection);
openURL(this.href, ev, this.routerDirection, this.routerAnimation);
} else if (hasShadowDom(this.el)) {
// this button wants to specifically submit a form

1
core/src/components/button/readme.md
View File

@ -291,6 +291,7 @@ export class ButtonExample {
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |