@ionic/core
Version:
Base components for Ionic
115 lines (114 loc) • 3.43 kB
JavaScript
export class TabButton {
constructor() {
this.selected = false;
this.disabled = false;
}
onTabBarChanged(ev) {
this.selected = this.tab === ev.detail.tab;
}
onClick(ev) {
if (this.tab !== undefined) {
if (!this.disabled) {
this.ionTabButtonClick.emit({
tab: this.tab,
href: this.href,
selected: this.selected
});
}
ev.preventDefault();
}
}
componentWillLoad() {
if (this.layout === undefined) {
this.layout = this.config.get('tabButtonLayout', 'icon-top');
}
}
get hasLabel() {
return !!this.el.querySelector('ion-label');
}
get hasIcon() {
return !!this.el.querySelector('ion-icon');
}
hostData() {
const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
return {
'role': 'tab',
'aria-selected': selected ? 'true' : null,
'id': tab !== undefined ? `tab-button-${tab}` : null,
class: {
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,
'tab-has-icon': hasIcon,
'tab-has-label-only': hasLabel && !hasIcon,
'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true,
'ion-activatable': true,
}
};
}
render() {
const { mode, href } = this;
return (h("a", { href: href },
h("slot", null),
mode === 'md' && h("ion-ripple-effect", { type: "unbounded" })));
}
static get is() { return "ion-tab-button"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"config": {
"context": "config"
},
"disabled": {
"type": Boolean,
"attr": "disabled"
},
"doc": {
"context": "document"
},
"el": {
"elementRef": true
},
"href": {
"type": String,
"attr": "href"
},
"layout": {
"type": String,
"attr": "layout",
"mutable": true
},
"mode": {
"type": String,
"attr": "mode"
},
"queue": {
"context": "queue"
},
"selected": {
"type": Boolean,
"attr": "selected",
"mutable": true
},
"tab": {
"type": String,
"attr": "tab"
}
}; }
static get events() { return [{
"name": "ionTabButtonClick",
"method": "ionTabButtonClick",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "parent:ionTabBarChanged",
"method": "onTabBarChanged"
}, {
"name": "click",
"method": "onClick"
}]; }
static get style() { return "/**style-placeholder:ion-tab-button:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-tab-button:**/"; }
}