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

fix(fab-button): add routerDirection

Browse Source 
fixes #15551
This commit is contained in:
Manu Mtz.-Almeida
2018-09-11 17:49:36 +02:00
parent fcb45d12e2
commit 239863465c
4 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -239,12 +239,12 @@ export class Fab {
} }
export declare interface FabButton extends StencilComponents<'IonFabButton'> {} export declare interface FabButton extends StencilComponents<'IonFabButton'> {}
@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'translucent', 'show'] }) @Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'routerDirection', 'href', 'translucent', 'show'] })
export class FabButton { export class FabButton {
constructor(r: ElementRef) { constructor(r: ElementRef) {
const el = r.nativeElement; const el = r.nativeElement;
proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'translucent', 'show']); proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'routerDirection', 'href', 'translucent', 'show']);
} }
} }

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

@ -1398,6 +1398,10 @@ export namespace Components {
*/ */
'mode': Mode; 'mode': Mode;
/** /**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
/**
* If true, the fab button will show when in a fab-list. * If true, the fab button will show when in a fab-list.
*/ */
'show': boolean; 'show': boolean;
@ -1428,6 +1432,10 @@ export namespace Components {
*/ */
'mode'?: Mode; 'mode'?: Mode;
/** /**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
/**
* If true, the fab button will show when in a fab-list. * If true, the fab button will show when in a fab-list.
*/ */
'show'?: boolean; 'show'?: boolean;

13
core/src/components/fab-button/fab-button.tsx
View File

@ -1,7 +1,7 @@
import { Component, Element, Prop } from '@stencil/core'; import { Component, Element, Prop } from '@stencil/core';
import { Color, CssClassMap, Mode } from '../../interface'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses, openURL } from '../../utils/theme';
@Component({ @Component({
tag: 'ion-fab-button', tag: 'ion-fab-button',
@ -14,6 +14,8 @@ import { createColorClasses } from '../../utils/theme';
export class FabButton { export class FabButton {
private inList = false; private inList = false;
@Prop({ context: 'window' }) win!: Window;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
/** /**
@ -39,6 +41,12 @@ export class FabButton {
*/ */
@Prop() disabled = false; @Prop() disabled = false;
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
@Prop() routerDirection?: RouterDirection;
/** /**
* Contains a URL or a URL fragment that the hyperlink points to. * Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered. * If this property is set, an anchor tag will be rendered.
@ -94,6 +102,7 @@ export class FabButton {
class="fab-button-native" class="fab-button-native"
disabled={this.disabled} disabled={this.disabled}
href={this.href} href={this.href}
onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}
> >
<span class="fab-button-close-icon"> <span class="fab-button-close-icon">
<ion-icon name="close" lazy={false}></ion-icon> <ion-icon name="close" lazy={false}></ion-icon>

3
core/src/components/fab-button/readme.md
View File

@ -10,12 +10,13 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
## Properties ## Properties
| Property | Attribute | Description | Type | | Property | Attribute | Description | Type |
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `activated` | `activated` | If true, the fab button will be show a close icon. Defaults to `false`. | `boolean` | | `activated` | `activated` | If true, the fab button will be show a close icon. Defaults to `false`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` | | `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `disabled` | `disabled` | If true, the user cannot interact with the fab button. Defaults to `false`. | `boolean` | | `disabled` | `disabled` | If true, the user cannot interact with the fab button. Defaults to `false`. | `boolean` |
| `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` | | `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` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `RouterDirection` |
| `show` | `show` | If true, the fab button will show when in a fab-list. | `boolean` | | `show` | `show` | If true, the fab button will show when in a fab-list. | `boolean` |
| `translucent` | `translucent` | If true, the fab button will be translucent. Defaults to `false`. | `boolean` | | `translucent` | `translucent` | If true, the fab button will be translucent. Defaults to `false`. | `boolean` |