@ionic/core
Version:
Base components for Ionic
103 lines (102 loc) • 3.59 kB
JavaScript
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
export class FabButton {
constructor() {
this.activated = false;
this.disabled = false;
this.routerDirection = 'forward';
this.show = false;
this.translucent = false;
this.type = 'button';
this.onFocus = () => {
this.ionFocus.emit();
};
this.onBlur = () => {
this.ionBlur.emit();
};
}
hostData() {
const { el, disabled, color, activated, show, translucent, size } = this;
const inList = hostContext('ion-fab-list', el);
return {
'aria-disabled': disabled ? 'true' : null,
class: Object.assign({}, createColorClasses(color), { 'fab-button-in-list': inList, 'fab-button-translucent-in-list': inList && translucent, 'fab-button-close-active': activated, 'fab-button-show': show, 'fab-button-disabled': disabled, 'fab-button-translucent': translucent, 'ion-activatable': true, 'ion-focusable': true, [`fab-button-${size}`]: size !== undefined })
};
}
render() {
const TagType = this.href === undefined ? 'button' : 'a';
const attrs = (TagType === 'button')
? { type: this.type }
: { href: this.href };
return (h(TagType, Object.assign({}, attrs, { class: "button-native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(this.win, this.href, ev, this.routerDirection) }),
h("span", { class: "close-icon" },
h("ion-icon", { name: "close", lazy: false })),
h("span", { class: "button-inner" },
h("slot", null)),
this.mode === 'md' && h("ion-ripple-effect", null)));
}
static get is() { return "ion-fab-button"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"activated": {
"type": Boolean,
"attr": "activated"
},
"color": {
"type": String,
"attr": "color"
},
"disabled": {
"type": Boolean,
"attr": "disabled"
},
"el": {
"elementRef": true
},
"href": {
"type": String,
"attr": "href"
},
"mode": {
"type": String,
"attr": "mode"
},
"routerDirection": {
"type": String,
"attr": "router-direction"
},
"show": {
"type": Boolean,
"attr": "show"
},
"size": {
"type": String,
"attr": "size"
},
"translucent": {
"type": Boolean,
"attr": "translucent"
},
"type": {
"type": String,
"attr": "type"
},
"win": {
"context": "window"
}
}; }
static get events() { return [{
"name": "ionFocus",
"method": "ionFocus",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionBlur",
"method": "ionBlur",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return "/**style-placeholder:ion-fab-button:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-fab-button:**/"; }
}