Skip to content

Commit f10c3c9

Browse files
Sakchai-RefinitivSakchai-Refinitiv
authored
Merge pull request #207 from Refinitiv/develop
Release - Sprint 2 [Q1 2022]
2 parents bbdecc1 + 12ae2f7 commit f10c3c9

File tree

72 files changed

+1871
-26888
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+1871
-26888
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,3 @@ lib/
77
!**/*.html
88
!test/*.js
99
**/*.d.ts
10-
samples/angular/*

‎documents/src/pages/elements/tab-bar.md‎

Lines changed: 70 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,22 @@ import 'https://cdn.skypack.dev/@refinitiv-ui/elements/tab?min';
1414
import 'https://cdn.skypack.dev/@refinitiv-ui/elements/panel?min';
1515
halo('tab');
1616
halo('panel');
17-
const tabs = document.querySelectorAll('ef-tab');
17+
const tabs = document.getElementById('tabs');
1818
const title = document.getElementById('title');
19-
for (let i = 0; i < tabs.length; i++) {
20-
tabs[i].addEventListener('tap', (e) => {
21-
for (let x = 0; x < tabs.length; x++) {
22-
tabs[x].active = false;
23-
}
24-
if (e.target.label && e.target.label.length > 0) {
25-
title.textContent = e.target.label;
26-
}
27-
else {
28-
title.textContent = "Settings";
29-
}
30-
e.target.active = true;
31-
})
32-
}
19+
tabs.addEventListener('value-changed', (event) => {
20+
if (event.detail && event.detail.value) {
21+
title.textContent = tabs.querySelectorAll(`[value="${event.detail.value}"]`)[0].label;
22+
}
23+
});
3324
```
3425
```html
35-
<ef-tab-bar>
36-
<ef-tab label="Market" active></ef-tab>
37-
<ef-tab label="Company"></ef-tab>
38-
<ef-tab label="News"></ef-tab>
39-
<ef-tab label="Charting"></ef-tab>
40-
<ef-tab label="Monitors"></ef-tab>
41-
<ef-tab icon="settings"></ef-tab>
26+
<ef-tab-bar id="tabs">
27+
<ef-tab label="Market" value="market" active></ef-tab>
28+
<ef-tab label="Company" value="company"></ef-tab>
29+
<ef-tab label="News" value="news"></ef-tab>
30+
<ef-tab label="Charting" value="charting"></ef-tab>
31+
<ef-tab label="Monitors" value="monitor"></ef-tab>
32+
<ef-tab icon="settings" value="setting"></ef-tab>
4233
</ef-tab-bar>
4334
<ef-panel spacing>
4435
<h6 id="title">Market</h6>
@@ -52,9 +43,9 @@ for (let i = 0; i < tabs.length; i++) {
5243
A standard tab navigation control that can be used to navigate between views.
5344

5445
### Usage
46+
You can create a navigation tab by wrapping `ef-tab` with `ef-tab-bar`. Each `ef-tab` should be assigned with unique `value`.
5547

56-
You can create a navigation tab by wrapping `ef-tab` with `ef-tab-bar`.
57-
Tab bar will provide left and right navigation buttons if there is not enough space to display all tabs on the screen.
48+
By default, the first `ef-tab` will be set to active automatically. You can assign `active` attribute to any other `ef-tab` to set the default active tab.
5849

5950
@> For full features of `ef-tab` such as `icon`, please see [Tab](./elements/tab).
6051

@@ -66,36 +57,42 @@ halo('tab');
6657
```
6758
```html
6859
<ef-tab-bar>
69-
<ef-tab label="Tab 1"></ef-tab>
70-
<ef-tab label="Tab 2"></ef-tab>
71-
<ef-tab label="Tab 3"></ef-tab>
60+
<ef-tab label="Tab 1" value="tab1"></ef-tab>
61+
<ef-tab label="Tab 2" value="tab2"></ef-tab>
62+
<ef-tab label="Tab 3" value="tab3"></ef-tab>
7263
</ef-tab-bar><br>
7364
<ef-tab-bar style="max-width:350px">
74-
<ef-tab label="Tab 1"></ef-tab>
75-
<ef-tab label="Tab 2"></ef-tab>
76-
<ef-tab label="Tab 3"></ef-tab>
77-
<ef-tab label="Tab 4"></ef-tab>
78-
<ef-tab label="Tab 5"></ef-tab>
79-
<ef-tab label="Tab 6"></ef-tab>
80-
<ef-tab label="Tab 7"></ef-tab>
81-
<ef-tab label="Tab 8"></ef-tab>
82-
<ef-tab label="Tab 9"></ef-tab>
83-
<ef-tab label="Tab 10"></ef-tab>
65+
<ef-tab label="Tab 1" value="tab1"></ef-tab>
66+
<ef-tab label="Tab 2" value="tab2"></ef-tab>
67+
<ef-tab label="Tab 3" value="tab3"></ef-tab>
68+
<ef-tab label="Tab 4" value="tab4"></ef-tab>
69+
<ef-tab label="Tab 5" value="tab5"></ef-tab>
70+
<ef-tab label="Tab 6" value="tab6"></ef-tab>
71+
<ef-tab label="Tab 7" value="tab7"></ef-tab>
72+
<ef-tab label="Tab 8" value="tab8"></ef-tab>
73+
<ef-tab label="Tab 9" value="tab9"></ef-tab>
74+
<ef-tab label="Tab 10" value="tab10"></ef-tab>
8475
</ef-tab-bar>
8576
```
8677
::
8778

79+
Tab bar will provide left and right navigation buttons if there is not enough space to display all tabs on the screen.
80+
8881
```html
8982
<ef-tab-bar>
90-
<ef-tab label="Tab 1"></ef-tab>
91-
<ef-tab label="Tab 2"></ef-tab>
92-
<ef-tab label="Tab 3"></ef-tab>
83+
<ef-tab label="Tab 1" value="tab1"></ef-tab>
84+
<ef-tab label="Tab 2" value="tab2"></ef-tab>
85+
<ef-tab label="Tab 3" value="tab3"></ef-tab>
9386
</ef-tab-bar>
94-
```
9587

88+
<ef-tab-bar>
89+
<ef-tab label="Tab 1" value="tab1"></ef-tab>
90+
<ef-tab label="Tab 2" value="tab2" active></ef-tab>
91+
<ef-tab label="Tab 3" value="tab3"></ef-tab>
92+
</ef-tab-bar>
93+
```
9694

9795
### Level styles
98-
9996
A level can be set to `ef-tab-bar` to change the style of the tab bar. Level styling is managed by the theme.
10097

10198
::
@@ -106,65 +103,59 @@ halo('tab');
106103
```
107104
```html
108105
<ef-tab-bar level="1">
109-
<ef-tab label="Tab1"></ef-tab>
110-
<ef-tab label="Tab2" active></ef-tab>
111-
<ef-tab label="Tab3"></ef-tab>
106+
<ef-tab label="Tab1" value="tab1"></ef-tab>
107+
<ef-tab label="Tab2" active value="tab2"></ef-tab>
108+
<ef-tab label="Tab3" value="tab3"></ef-tab>
112109
</ef-tab-bar>
113110
<br>
114111
<ef-tab-bar level="2">
115-
<ef-tab label="Tab1"></ef-tab>
116-
<ef-tab label="Tab2" active></ef-tab>
117-
<ef-tab label="Tab3"></ef-tab>
112+
<ef-tab label="Tab1" value="tab1"></ef-tab>
113+
<ef-tab label="Tab2" active value="tab2"></ef-tab>
114+
<ef-tab label="Tab3" value="tab3"></ef-tab>
118115
</ef-tab-bar>
119116
<br>
120117
<ef-tab-bar level="3">
121-
<ef-tab label="Tab1"></ef-tab>
122-
<ef-tab label="Tab2" active></ef-tab>
123-
<ef-tab label="Tab3"></ef-tab>
118+
<ef-tab label="Tab1" value="tab1"></ef-tab>
119+
<ef-tab label="Tab2" active value="tab2"></ef-tab>
120+
<ef-tab label="Tab3" value="tab3"></ef-tab>
124121
</ef-tab-bar>
125122
```
126123
::
127124

128125
```html
129126
<ef-tab-bar level="1">
130-
<ef-tab label="Tab1"></ef-tab>
131-
<ef-tab label="Tab2" active></ef-tab>
132-
<ef-tab label="Tab3"></ef-tab>
127+
<ef-tab label="Tab1" value="tab1"></ef-tab>
128+
<ef-tab label="Tab2" active value="tab2"></ef-tab>
129+
<ef-tab label="Tab3" value="tab3"></ef-tab>
133130
</ef-tab-bar>
131+
<br>
134132
<ef-tab-bar level="2">
135-
<ef-tab label="Tab1"></ef-tab>
136-
<ef-tab label="Tab2" active></ef-tab>
137-
<ef-tab label="Tab3"></ef-tab>
133+
<ef-tab label="Tab1" value="tab1"></ef-tab>
134+
<ef-tab label="Tab2" value="tab2" active></ef-tab>
135+
<ef-tab label="Tab3" value="tab3"></ef-tab>
138136
</ef-tab-bar>
137+
<br>
139138
<ef-tab-bar level="3">
140-
<ef-tab label="Tab1"></ef-tab>
141-
<ef-tab label="Tab2" active></ef-tab>
142-
<ef-tab label="Tab3"></ef-tab>
139+
<ef-tab label="Tab1" value="tab1"></ef-tab>
140+
<ef-tab label="Tab2" value="tab2" active></ef-tab>
141+
<ef-tab label="Tab3" value="tab3"></ef-tab>
143142
</ef-tab-bar>
144143
```
145144

146145
### Vertical tab
147-
148146
Setting the `vertical` attribute/property to true will change the layout of the Tab Bar from horizontal to vertical.
149147

150148
::
151149
```javascript
152150
::tab-bar::
153151
import 'https://cdn.skypack.dev/@refinitiv-ui/elements/tab?min';
154152
halo('tab');
155-
const tabs = document.querySelectorAll('ef-tab');
156-
157-
/* reset all tabs to inactive */
158-
const resetActive = () => {
159-
tabs.forEach((tab) => tab.active = false);
160-
}
153+
const tabs = document.getElementById('tabs');
161154

162-
tabs.forEach((tab) => {
163-
tab.addEventListener('tap', (e) => {
164-
resetActive();
165-
document.getElementById('header').textContent = e.target.label;
166-
e.target.active = true;
167-
});
155+
tabs.addEventListener('value-changed', (event) => {
156+
if (event.detail && event.detail.value) {
157+
document.getElementById('header').textContent = tabs.querySelectorAll(`[value="${event.detail.value}"]`)[0].label;
158+
}
168159
});
169160
```
170161
```css
@@ -178,10 +169,10 @@ section {
178169
```
179170
```html
180171
<div class="container">
181-
<ef-tab-bar vertical>
182-
<ef-tab label="Home" sub-label="The family or social unit occupying a home" icon="home"></ef-tab>
183-
<ef-tab label="Calendar" sub-label="A chart or series of pages showing the days, weeks, and months of a particular year" icon="calendar" active></ef-tab>
184-
<ef-tab label="Setting" sub-label="A factor at which a machine or device can be adjusted to operate." icon="settings"></ef-tab>
172+
<ef-tab-bar id="tabs" vertical>
173+
<ef-tab label="Home" value="home" sub-label="The family or social unit occupying a home" icon="home"></ef-tab>
174+
<ef-tab label="Calendar" value="calendar" sub-label="A chart or series of pages showing the days, weeks, and months of a particular year" icon="calendar" active></ef-tab>
175+
<ef-tab label="Settings" value="settings" sub-label="A factor at which a machine or device can be adjusted to operate." icon="settings"></ef-tab>
185176
</ef-tab-bar>
186177
<section>
187178
<h6 id="header">Calendar</h6>
@@ -191,84 +182,5 @@ section {
191182
```
192183
::
193184

194-
```html
195-
<div class="container">
196-
<ef-tab-bar vertical>
197-
<ef-tab label="Home" sub-label="The family or social unit occupying a home" icon="home"></ef-tab>
198-
<ef-tab label="Calendar" sub-label="A chart or series of pages showing the days, weeks, and months of a particular year" icon="calendar" active></ef-tab>
199-
<ef-tab label="Setting" sub-label="A factor at which a machine or device can be adjusted to operate." icon="settings"></ef-tab>
200-
</ef-tab-bar>
201-
<section>
202-
<h6>Calendar</h6>
203-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste tempore doloribus error? Veniam reiciendis minus itaque eius temporibus quos totam nihil nisi, praesentium perspiciatis laudantium non quidem esse architecto et eos excepturi doloribus quas nulla impedit amet odio! Laborum fuga exercitationem quae autem provident, sint neque ex iure numquam tenetur.
204-
</section>
205-
</div>
206-
```
207-
208-
### Switching tab
209-
210-
`ef-tab` provides an `active` attribute/property to set the active tab. You can add a `tap` event listener to each `ef-tab` and then add the actions you need to perform -- the `tap` event is similar to the `click` event, but will work for both desktop and touch devices.
211-
212-
::
213-
```javascript
214-
::tab-bar::
215-
import 'https://cdn.skypack.dev/@refinitiv-ui/elements/tab?min';
216-
halo('tab');
217-
const tabs = document.querySelectorAll('ef-tab');
218-
const event = document.getElementById('event');
219-
for (let i = 0; i < tabs.length; i++) {
220-
tabs[i].addEventListener('tap', (e) => {
221-
for (let x = 0; x < tabs.length; x++) {
222-
tabs[x].active = false;
223-
}
224-
if (e.target.label && e.target.label.length > 0) {
225-
event.textContent = `${e.target.label} + is clicked`;
226-
}
227-
else {
228-
event.textContent = "Settings is clicked";
229-
}
230-
e.target.active = true;
231-
})
232-
}
233-
```
234-
```html
235-
<ef-tab-bar>
236-
<ef-tab label="Market" active></ef-tab>
237-
<ef-tab label="Company"></ef-tab>
238-
<ef-tab label="News"></ef-tab>
239-
<ef-tab label="Charting"></ef-tab>
240-
<ef-tab label="Monitors"></ef-tab>
241-
<ef-tab icon="settings"></ef-tab>
242-
</ef-tab-bar>
243-
<pre id="event"></pre>
244-
```
245-
::
246-
247-
```html
248-
<ef-tab-bar>
249-
<ef-tab label="Market" active></ef-tab>
250-
<ef-tab label="Company"></ef-tab>
251-
<ef-tab label="News"></ef-tab>
252-
<ef-tab label="Charting"></ef-tab>
253-
<ef-tab label="Monitors"></ef-tab>
254-
<ef-tab icon="settings"></ef-tab>
255-
</ef-tab-bar>
256-
<pre id="event"></pre>
257-
```
258-
259-
```javascript
260-
const tabs = document.querySelectorAll('ef-tab');
261-
262-
/* reset all tabs to inactive */
263-
const resetActive = () => {
264-
tabs.forEach((tab) => tab.active = false);
265-
}
266-
267-
tabs.forEach((tab) => {
268-
tab.addEventListener('tap', (e) => {
269-
resetActive();
270-
document.getElementById('event').textContent = `${e.target.label} + is clicked`;
271-
e.target.active = true;
272-
});
273-
});
274-
```
185+
### Handling active tab changed
186+
When users changed the active tab, Tab Bar will fire `value-changed` event with value of the new active tab in `detail.value`. If there is no assigned `value` to the tab, it will use `label` as a `value`.

0 commit comments

Comments
 (0)