-
Notifications
You must be signed in to change notification settings - Fork 13.5k
/
tab.tsx
143 lines (118 loc) · 2.98 KB
/
tab.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
@Component({
tag: 'ion-tab',
styleUrl: 'tab.scss'
})
export class Tab {
private loaded = false;
@Element() el: HTMLIonTabElement;
@State() init = false;
@Prop({ mutable: true }) active = false;
@Prop() btnId: string;
/**
* The title of the tab.
*/
@Prop() title: string;
/**
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
*/
@Prop() href: string;
/**
* The icon for the tab.
*/
@Prop() icon: string;
/**
* The badge for the tab.
*/
@Prop() badge: string;
/**
* The badge color for the tab button.
*/
@Prop() badgeStyle = 'default';
/**
* The component to display inside of the tab.
*/
@Prop() component: any;
/**
* The name of the tab.
*/
@Prop() name: string;
/**
* If true, the user cannot interact with the tab. Defaults to `false`.
*/
@Prop() disabled = false;
/**
* If true, the tab will be selected. Defaults to `false`.
*/
@Prop({ mutable: true }) selected = false;
@Watch('selected')
selectedChanged(selected: boolean) {
if (selected) {
this.ionSelect.emit();
}
}
/**
* If true, the tab button is visible within the tabbar. Defaults to `true`.
*/
@Prop() show = true;
/**
* If true, hide the tabs on child pages.
*/
@Prop() tabsHideOnSubPages = false;
/**
* Emitted when the current tab is selected.
*/
@Event() ionSelect: EventEmitter<void>;
componentWillLoad() {
if (Build.isDev) {
if (this.component && this.el.childElementCount > 0) {
console.error('You can not use a lazy-loaded component in a tab and inlineed content at the same time.' +
`- Remove the component attribute in: <ion-tab component="${this.component}">` +
` or` +
`- Remove the embeded content inside the ion-tab: <ion-tab></ion-tab>`);
}
}
}
@Method()
getTabId(): string|null {
if (this.name) {
return this.name;
}
if (typeof this.component === 'string') {
return this.component;
}
return null;
}
@Method()
setActive(): Promise<void> {
return this.prepareLazyLoaded().then(() => {
this.active = true;
});
}
private prepareLazyLoaded(): Promise<HTMLElement|void> {
if (!this.loaded && this.component) {
this.loaded = true;
return attachViewToDom(this.el, this.component);
}
return Promise.resolve();
}
hostData() {
return {
'aria-labelledby': this.btnId,
'role': 'tabpanel',
'hidden': !this.active,
'class': {
'ion-page': !this.component
}
};
}
}
function attachViewToDom(container: HTMLElement, cmp: string): Promise<HTMLElement> {
const el = document.createElement(cmp) as HTMLStencilElement;
el.classList.add('ion-page');
container.appendChild(el);
if (el.componentOnReady) {
return el.componentOnReady();
}
return Promise.resolve(el);
}