-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathdemo.html
More file actions
202 lines (182 loc) · 6.54 KB
/
demo.html
File metadata and controls
202 lines (182 loc) · 6.54 KB
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>seven-minute-tabs Web Component Demo</title>
<style>
html {
font-family: system-ui, sans-serif;
}
body {
max-inline-size: max-content;
margin: auto;
}
seven-minute-tabs {
background-color: hsla(0 0% 0% / .04);
border-radius: .3125em;
}
@media (prefers-color-scheme: dark) {
html {
color: #ddd;
background-color: #222;
}
seven-minute-tabs {
background-color: hsla(0 0% 0% / .35);
}
}
seven-minute-tabs + seven-minute-tabs {
margin-block-start: 1em;
}
</style>
<link rel="stylesheet" href="demo-styles.css">
<script type="module" src="seven-minute-tabs.js" async></script>
</head>
<body>
<h1>Seven Minute Tabs Web Component Demo</h1>
<p>All visual styles shown here are decoupled from the component (completely optional: try removing <code>demo-styles.css</code>). Read more at the <a href="https://github.com/zachleat/seven-minute-tabs">documentation on GitHub</a></p>
<hr>
<h2>Vanilla</h2>
<seven-minute-tabs>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab" role="tab">First tab</a></li>
<li><a href="#second-tab" role="tab">Second tab</a></li>
<li><a href="#third-tab" role="tab">Third tab</a></li>
</ol>
<div id="first-tab" role="tabpanel">
First tab content
</div>
<div id="second-tab" role="tabpanel">
Second tab content
</div>
<div id="third-tab" role="tabpanel">
Third tab content
</div>
</seven-minute-tabs>
<p>Lots of tabs to test overflow at small widths</p>
<seven-minute-tabs>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab-wrap" role="tab">First tab</a></li>
<li><a href="#second-tab-wrap" role="tab">Second tab</a></li>
<li><a href="#third-tab-wrap" role="tab">Third tab</a></li>
<li><a href="#fourth-tab-wrap" role="tab">Fourth tab</a></li>
<li><a href="#fifth-tab-wrap" role="tab">Fifth tab</a></li>
<li><a href="#sixth-tab-wrap" role="tab">Sixth tab</a></li>
</ol>
<div id="first-tab-wrap" role="tabpanel">
First tab content
</div>
<div id="second-tab-wrap" role="tabpanel">
Second tab content
</div>
<div id="third-tab-wrap" role="tabpanel">
Third tab content
</div>
<div id="fourth-tab-wrap" role="tabpanel">
Fourth tab content
</div>
<div id="fifth-tab-wrap" role="tabpanel">
Fifth tab content
</div>
<div id="sixth-tab-wrap" role="tabpanel">
Sixth tab content
</div>
</seven-minute-tabs>
<h2>Tabs on bottom</h2>
<seven-minute-tabs>
<div id="first-tab-bottom" role="tabpanel">
First tab content
</div>
<div id="second-tab-bottom" role="tabpanel">
Second tab content
</div>
<div id="third-tab-bottom" role="tabpanel">
Third tab content
</div>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab-bottom" role="tab">First tab</a></li>
<li><a href="#second-tab-bottom" role="tab">Second tab</a></li>
<li><a href="#third-tab-bottom" role="tab">Third tab</a></li>
</ol>
</seven-minute-tabs>
<h2>Active tab syncs to group, persists across pageviews</h2>
<seven-minute-tabs persist sync>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab-b1" role="tab" data-tabs-persist="group1:firsttab">First tab</a></li>
<li><a href="#second-tab-b1" role="tab" data-tabs-persist="group1:secondtab">Second tab</a></li>
<li><a href="#third-tab-b1" role="tab" data-tabs-persist="group1:thirdtab">Third tab</a></li>
</ol>
<div id="first-tab-b1" role="tabpanel">
First tab content
</div>
<div id="second-tab-b1" role="tabpanel">
Second tab content
</div>
<div id="third-tab-b1" role="tabpanel">
Third tab content
</div>
</seven-minute-tabs>
<seven-minute-tabs persist sync>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab-b2" role="tab" data-tabs-persist="group1:firsttab">First tab</a></li>
<li><a href="#second-tab-b2" role="tab" data-tabs-persist="group1:secondtab">Second tab</a></li>
<li><a href="#third-tab-b2" role="tab" data-tabs-persist="group1:thirdtab">Third tab</a></li>
</ol>
<div id="first-tab-b2" role="tabpanel">
First tab content
</div>
<div id="second-tab-b2" role="tabpanel">
Second tab content
</div>
<div id="third-tab-b2" role="tabpanel">
Third tab content
</div>
</seven-minute-tabs>
<p><strong>Separate persist group:</strong></p>
<seven-minute-tabs persist>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li><a href="#first-tab-b3" role="tab" data-tabs-persist="group2:firsttab">First tab</a></li>
<li><a href="#second-tab-b3" role="tab" data-tabs-persist="group2:secondtab">Second tab</a></li>
<li><a href="#third-tab-b3" role="tab" data-tabs-persist="group2:thirdtab">Third tab</a></li>
</ol>
<div id="first-tab-b3" role="tabpanel">
First tab content
</div>
<div id="second-tab-b3" role="tabpanel">
Second tab content
</div>
<div id="third-tab-b3" role="tabpanel">
Third tab content
</div>
</seven-minute-tabs>
<h2>Prune buttons that don’t have a matching panel (starts with three tab links)</h2>
<seven-minute-tabs prune>
<div role="tablist" aria-label="What does this tab chooser do?">
<a href="#first-tab-c" role="tab">First tab</a>
<a href="#second-tab-c" role="tab">Second tab</a>
<a href="#missing" role="tab">Third tab</a>
</div>
<div id="first-tab-c" role="tabpanel">
First tab content
</div>
<div id="second-tab-c" role="tabpanel">
Second tab content
</div>
</seven-minute-tabs>
<h2><code>autoheight</code> option</h2>
<p>Unlocks consistent height when switching tabs.</p>
<seven-minute-tabs autoheight>
<div role="tablist" aria-label="What does this tab chooser do?">
<a href="#first-tab-d" role="tab">First tab</a>
<a href="#second-tab-d" role="tab">Second tab</a>
</div>
<div id="first-tab-d" role="tabpanel" style="min-height: var(--smt-height)"">
First tab content
</div>
<div id="second-tab-d" role="tabpanel" style="min-height: var(--smt-height)">
Second tab content<br><br><br><br>Super long tab content<br><br><br><br>Super long tab content<br><br><br><br>Super long tab content<br><br><br><br>Super long tab content
</div>
</seven-minute-tabs>
<p>Text after the component (to show the height above without using CSS)</p>
</body>
</html>