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

fix(fab-button): add and document css properties

Browse Source 
references #14853 references #14850 closes #14808
This commit is contained in:
Brandy Carney
2018-10-11 13:43:13 -05:00
parent 73cff0c61a
commit 098bd826cd
11 changed files with 196 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@ -12,11 +12,12 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
shadow: true
})
export class FabButton implements ComponentInterface {
@Element() el!: HTMLElement;
@State() keyFocus = false;
@Prop({ context: 'window' }) win!: Window;
@Element() el!: HTMLElement;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
@ -40,6 +41,12 @@ export class FabButton implements ComponentInterface {
*/
@Prop() disabled = false;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
@ -47,10 +54,9 @@ export class FabButton implements ComponentInterface {
@Prop() routerDirection?: RouterDirection;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
* If true, the fab button will show when in a fab-list.
*/
@Prop() href?: string;
@Prop() show = false;
/**
* If true, the fab button will be translucent. Defaults to `false`.
@ -58,9 +64,34 @@ export class FabButton implements ComponentInterface {
@Prop() translucent = false;
/**
* If true, the fab button will show when in a fab-list.
* The type of the button.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() show = false;
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
* Emitted when the button has focus.
*/
@Event() ionFocus!: EventEmitter<void>;
/**
* Emitted when the button loses focus.
*/
@Event() ionBlur!: EventEmitter<void>;
private onFocus = () => {
this.ionFocus.emit();
}
private onKeyUp = () => {
this.keyFocus = true;
}
private onBlur = () => {
this.keyFocus = false;
this.ionBlur.emit();
}
hostData() {
const inList = hostContext('ion-fab-list', this.el);
@ -73,19 +104,26 @@ export class FabButton implements ComponentInterface {
'fab-button-close-active': this.activated,
'fab-button-show': this.show,
'fab-button-disabled': this.disabled,
'fab-button-translucent': this.translucent
'fab-button-translucent': this.translucent,
'focused': this.keyFocus
}
};
}
render() {
const TagType = this.href === undefined ? 'button' : 'a';
const attrs = (TagType === 'button')
? { type: this.type }
: { href: this.href };
return (
<TagType
{...attrs}
class="button-native"
disabled={this.disabled}
href={this.href}
onFocus={this.onFocus}
onKeyUp={this.onKeyUp}
onBlur={this.onBlur}
onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}
>
<span class="close-icon">