Skip to content

Commit dda281c

Browse files
web-padawanweb-padawan
authored
chore: move tabsheet page to playground, add new dev page (#10218)
1 parent 9939e0f commit dda281c

File tree

2 files changed

+121
-60
lines changed

2 files changed

+121
-60
lines changed

‎dev/playground/tabsheet.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>TabSheet</title>
8+
<script type="module" src="./common.js"></script>
9+
10+
<script type="module">
11+
import '@vaadin/button';
12+
import '@vaadin/checkbox-group';
13+
import '@vaadin/icon';
14+
import '@vaadin/icons/vaadin-iconset.js';
15+
import '@vaadin/radio-group';
16+
import '@vaadin/tabsheet';
17+
18+
// Generate content for the panels
19+
const lorem = `Odio quis mi. Aliquam massa pede, pharetra quis, tincidunt quis, fringilla at, mauris. Vestibulum a massa.
20+
Vestibulum luctus odio ut quam. Maecenas congue convallis diam. Cras urna arcu, vestibulum vitae, blandit ut,
21+
laoreet id, risus. Ut condimentum, arcu sit amet placerat blandit, augue nibh pretium nunc, in tempus sem dolor
22+
non leo. Etiam fringilla mauris a odio. Nunc lorem diam, interdum eget, lacinia in, scelerisque sit amet, purus.
23+
Nam ornare. Donec placerat dui ut orci. Phasellus quis lacus at nisl elementum cursus. Cras bibendum egestas
24+
nulla. Phasellus pulvinar ullamcorper odio. Etiam ipsum. Proin tincidunt. Aliquam aliquet.`;
25+
26+
document.querySelectorAll('[tab]').forEach((panelContent, i, array) => {
27+
const dotIndex = lorem.indexOf('.', (i * lorem.length) / array.length);
28+
const content = lorem.substring(dotIndex + 1);
29+
panelContent.textContent = content.repeat(5);
30+
});
31+
32+
const tabsheet = document.querySelector('vaadin-tabsheet');
33+
34+
document.querySelector('#variant-group').addEventListener('value-changed', (e) => {
35+
tabsheet.setAttribute('theme', e.detail.value.join(' '));
36+
});
37+
38+
document.querySelector('#direction-group').addEventListener('value-changed', (e) => {
39+
document.dir = e.detail.value;
40+
});
41+
</script>
42+
</head>
43+
44+
<body>
45+
<section class="section" dir="ltr">
46+
<vaadin-checkbox-group label="Tabsheet theme variants" id="variant-group" theme="vertical" dir="ltr">
47+
<vaadin-checkbox label="bordered (Lumo)" value="bordered" dir="ltr"></vaadin-checkbox>
48+
<vaadin-checkbox label="no-border (base)" value="no-border" dir="ltr"></vaadin-checkbox>
49+
<vaadin-checkbox label="no padding" value="no-padding" dir="ltr"></vaadin-checkbox>
50+
</vaadin-checkbox-group>
51+
52+
<vaadin-radio-group label="Direction" id="direction-group" value="ltr" theme="vertical" dir="ltr">
53+
<vaadin-radio-button label="ltr" value="ltr" dir="ltr"></vaadin-radio-button>
54+
<vaadin-radio-button label="rtl" value="rtl" dir="ltr"></vaadin-radio-button>
55+
</vaadin-radio-group>
56+
</section>
57+
58+
<vaadin-tabsheet>
59+
<vaadin-checkbox slot="prefix" label="All tabs"></vaadin-checkbox>
60+
<vaadin-button slot="suffix" label="Suffix">
61+
<vaadin-icon icon="vaadin:plus" slot="prefix"></vaadin-icon>
62+
Add tab
63+
</vaadin-button>
64+
65+
<vaadin-tabs slot="tabs">
66+
<vaadin-tab id="tab-1">Tab 1</vaadin-tab>
67+
<vaadin-tab id="tab-2">Tab 2</vaadin-tab>
68+
<vaadin-tab id="tab-3">Tab 3</vaadin-tab>
69+
<vaadin-tab id="tab-4">Tab 4</vaadin-tab>
70+
<vaadin-tab id="tab-5">Tab 5</vaadin-tab>
71+
<vaadin-tab id="tab-6">Loading tab</vaadin-tab>
72+
</vaadin-tabs>
73+
74+
<div tab="tab-1"></div>
75+
<div tab="tab-2"></div>
76+
<div tab="tab-3"></div>
77+
<div tab="tab-4"></div>
78+
<div tab="tab-5"></div>
79+
</vaadin-tabsheet>
80+
</body>
81+
</html>

‎dev/tabsheet.html‎

Lines changed: 40 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,56 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>TabSheet</title>
88
<script type="module" src="./common.js"></script>
9+
</head>
910

10-
<script type="module">
11-
import '@vaadin/button';
12-
import '@vaadin/checkbox-group';
13-
import '@vaadin/icon';
14-
import '@vaadin/icons/vaadin-iconset.js';
15-
import '@vaadin/radio-group';
16-
import '@vaadin/tabsheet';
11+
<body>
12+
<vaadin-tabsheet>
13+
<vaadin-tabs slot="tabs">
14+
<vaadin-tab id="tab-1">Tab 1</vaadin-tab>
15+
<vaadin-tab id="tab-2">Tab 2</vaadin-tab>
16+
</vaadin-tabs>
1717

18-
// Generate content for the panels
19-
const lorem = `Odio quis mi. Aliquam massa pede, pharetra quis, tincidunt quis, fringilla at, mauris. Vestibulum a massa.
20-
Vestibulum luctus odio ut quam. Maecenas congue convallis diam. Cras urna arcu, vestibulum vitae, blandit ut,
21-
laoreet id, risus. Ut condimentum, arcu sit amet placerat blandit, augue nibh pretium nunc, in tempus sem dolor
22-
non leo. Etiam fringilla mauris a odio. Nunc lorem diam, interdum eget, lacinia in, scelerisque sit amet, purus.
23-
Nam ornare. Donec placerat dui ut orci. Phasellus quis lacus at nisl elementum cursus. Cras bibendum egestas
24-
nulla. Phasellus pulvinar ullamcorper odio. Etiam ipsum. Proin tincidunt. Aliquam aliquet.`;
18+
<div tab="tab-1">Content 1</div>
19+
<div tab="tab-2">Content 2</div>
20+
</vaadin-tabsheet>
2521

26-
document.querySelectorAll('[tab]').forEach((panelContent, i, array) => {
27-
const dotIndex = lorem.indexOf('.', (i * lorem.length) / array.length);
28-
const content = lorem.substring(dotIndex + 1);
29-
panelContent.textContent = content.repeat(5);
30-
});
22+
<button id="add">Add</button>
23+
<button id="remove">Remove</button>
3124

32-
const tabsheet = document.querySelector('vaadin-tabsheet');
25+
<script type="module">
26+
import '@vaadin/tabsheet';
3327

34-
document.querySelector('#variant-group').addEventListener('value-changed', (e) => {
35-
tabsheet.setAttribute('theme', e.detail.value.join(' '));
36-
});
28+
const tabsheet = document.querySelector('vaadin-tabsheet');
3729

38-
document.querySelector('#direction-group').addEventListener('value-changed', (e) => {
39-
document.dir = e.detail.value;
40-
});
41-
</script>
42-
</head>
30+
document.querySelector('#add').addEventListener('click', () => {
31+
// Add new tab and panel
32+
const tab = document.createElement('vaadin-tab');
33+
const idx = document.querySelectorAll('vaadin-tab').length + 1;
34+
tab.id = `tab-${idx}`;
35+
tab.textContent = `Tab ${idx}`;
4336

44-
<body>
45-
<section class="section" dir="ltr">
46-
<vaadin-checkbox-group label="Tabsheet theme variants" id="variant-group" theme="vertical" dir="ltr">
47-
<vaadin-checkbox label="bordered (Lumo)" value="bordered" dir="ltr"></vaadin-checkbox>
48-
<vaadin-checkbox label="no-border (base)" value="no-border" dir="ltr"></vaadin-checkbox>
49-
<vaadin-checkbox label="no padding" value="no-padding" dir="ltr"></vaadin-checkbox>
50-
</vaadin-checkbox-group>
37+
const panel = document.createElement('div');
38+
panel.setAttribute('tab', `tab-${idx}`);
39+
panel.textContent = `Content ${idx}`;
5140

52-
<vaadin-radio-group label="Direction" id="direction-group" value="ltr" theme="vertical" dir="ltr">
53-
<vaadin-radio-button label="ltr" value="ltr" dir="ltr"></vaadin-radio-button>
54-
<vaadin-radio-button label="rtl" value="rtl" dir="ltr"></vaadin-radio-button>
55-
</vaadin-radio-group>
56-
</section>
41+
tabsheet.querySelector('vaadin-tabs').append(tab);
42+
tabsheet.append(panel);
43+
});
5744

58-
<vaadin-tabsheet>
59-
<vaadin-checkbox slot="prefix" label="All tabs"></vaadin-checkbox>
60-
<vaadin-button slot="suffix" label="Suffix">
61-
<vaadin-icon icon="vaadin:plus" slot="prefix"></vaadin-icon>
62-
Add tab
63-
</vaadin-button>
45+
document.querySelector('#remove').addEventListener('click', () => {
46+
const idx = document.querySelectorAll('vaadin-tab').length;
6447

65-
<vaadin-tabs slot="tabs">
66-
<vaadin-tab id="tab-1">Tab 1</vaadin-tab>
67-
<vaadin-tab id="tab-2">Tab 2</vaadin-tab>
68-
<vaadin-tab id="tab-3">Tab 3</vaadin-tab>
69-
<vaadin-tab id="tab-4">Tab 4</vaadin-tab>
70-
<vaadin-tab id="tab-5">Tab 5</vaadin-tab>
71-
<vaadin-tab id="tab-6">Loading tab</vaadin-tab>
72-
</vaadin-tabs>
48+
// Remove tab and panel
49+
const tab = document.getElementById(`tab-${idx}`);
50+
const panel = document.querySelector(`[tab="tab-${idx}"]`);
51+
tab.remove();
52+
panel.remove();
7353

74-
<div tab="tab-1"></div>
75-
<div tab="tab-2"></div>
76-
<div tab="tab-3"></div>
77-
<div tab="tab-4"></div>
78-
<div tab="tab-5"></div>
79-
</vaadin-tabsheet>
54+
// Select previous tab
55+
if (tabsheet.selected === idx - 1) {
56+
tabsheet.selected = tabsheet.selected - 1;
57+
}
58+
});
59+
</script>
8060
</body>
8161
</html>

0 commit comments

Comments
 (0)