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

feat(fab-button): add closeIcon property (#19626)

Browse Source
This commit is contained in:
Stefanos Anagnostou
2020-06-08 23:46:03 +03:00
committed by GitHub
parent f34d3752e3
commit 698e526b9f
5 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,8 +220,8 @@ export class IonFab {
} }
export declare interface IonFabButton extends Components.IonFabButton { export declare interface IonFabButton extends Components.IonFabButton {
} }
@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) @ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) @Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
export class IonFabButton { export class IonFabButton {
ionFocus!: EventEmitter<CustomEvent>; ionFocus!: EventEmitter<CustomEvent>;
ionBlur!: EventEmitter<CustomEvent>; ionBlur!: EventEmitter<CustomEvent>;

1
core/api.txt
View File

@ -354,6 +354,7 @@ ion-fab,method,close,close() => Promise<void>
ion-fab-button,shadow ion-fab-button,shadow
ion-fab-button,prop,activated,boolean,false,false,false ion-fab-button,prop,activated,boolean,false,false,false
ion-fab-button,prop,closeIcon,string,'close',false,false
ion-fab-button,prop,color,string | undefined,undefined,false,false ion-fab-button,prop,color,string | undefined,undefined,false,false
ion-fab-button,prop,disabled,boolean,false,false,false ion-fab-button,prop,disabled,boolean,false,false,false
ion-fab-button,prop,download,string | undefined,undefined,false,false ion-fab-button,prop,download,string | undefined,undefined,false,false

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

@ -688,6 +688,10 @@ export namespace Components {
* If `true`, the fab button will be show a close icon. * If `true`, the fab button will be show a close icon.
*/ */
"activated": boolean; "activated": boolean;
/**
* The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
*/
"closeIcon": string;
/** /**
* 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). * 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).
*/ */
@ -725,7 +729,7 @@ export namespace Components {
*/ */
"show": boolean; "show": boolean;
/** /**
* The size of the button. Set this to `small` in order to have a mini fab. * The size of the button. Set this to `small` in order to have a mini fab button.
*/ */
"size"?: "small"; "size"?: "small";
/** /**
@ -3964,6 +3968,10 @@ declare namespace LocalJSX {
* If `true`, the fab button will be show a close icon. * If `true`, the fab button will be show a close icon.
*/ */
"activated"?: boolean; "activated"?: boolean;
/**
* The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
*/
"closeIcon"?: string;
/** /**
* 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). * 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).
*/ */
@ -4009,7 +4017,7 @@ declare namespace LocalJSX {
*/ */
"show"?: boolean; "show"?: boolean;
/** /**
* The size of the button. Set this to `small` in order to have a mini fab. * The size of the button. Set this to `small` in order to have a mini fab button.
*/ */
"size"?: "small"; "size"?: "small";
/** /**

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

@ -93,10 +93,17 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
@Prop() type: 'submit' | 'reset' | 'button' = 'button'; @Prop() type: 'submit' | 'reset' | 'button' = 'button';
/** /**
* The size of the button. Set this to `small` in order to have a mini fab. * The size of the button. Set this to `small` in order to have a mini fab button.
*/ */
@Prop() size?: 'small'; @Prop() size?: 'small';
/**
* The icon name to use for the close icon. This will appear when the fab button
* is pressed. Only applies if it is the main button inside of a fab containing a
* fab list.
*/
@Prop() closeIcon = 'close';
/** /**
* Emitted when the button has focus. * Emitted when the button has focus.
*/ */
@ -156,7 +163,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)} onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
> >
<span class="close-icon"> <span class="close-icon">
<ion-icon name="close" lazy={false}></ion-icon> <ion-icon icon={this.closeIcon} lazy={false}></ion-icon>
</span> </span>
<span class="button-inner"> <span class="button-inner">
<slot></slot> <slot></slot>

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

@ -140,6 +140,7 @@ export class FabButtonExample {
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | | ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` | | `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `'close'` |
| `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). | `string \| undefined` | `undefined` | | `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). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
| `download` | `download` | 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 has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | | `download` | `download` | 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 has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
@ -149,7 +150,7 @@ export class FabButtonExample {
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| 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'` | | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | | `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` | | `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | | `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |