-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathindex.html
167 lines (147 loc) · 5.35 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab-container demo</title>
<link rel="stylesheet" href="tabs.css" />
</head>
<body>
<main>
<h1>Tab Container Examples</h1>
<h2>Horizontal (shadow tablist)</h2>
<tab-container>
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Horizontal (custom tablist)</h2>
<tab-container>
<div role="tablist" aria-label="Horizontal Tabs Example">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Horizontal (custom tablist and tablist-wrapper)</h2>
<tab-container>
<div slot="tablist-wrapper">
<div role="tablist" aria-label="Horizontal Tabs Example">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Vertical (shadow tablist)</h2>
<tab-container>
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Vertical (custom tablist)</h2>
<tab-container>
<div role="tablist" aria-label="Vertical Tabs Example" aria-orientation="vertical">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
</div>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Set initially selected tab</h2>
<tab-container>
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab" aria-selected="true">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
<div role="tabpanel" aria-labelledby="tab-one" hidden>
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two">
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Set default tab</h2>
<tab-container default-tab="1">
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
<div role="tabpanel" aria-labelledby="tab-one" hidden>
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two">
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
</tab-container>
<h2>Panel with extra buttons</h2>
<tab-container>
<button>Left button, not a tab!</button>
<button type="button" id="tab-one" role="tab">Tab one</button>
<button type="button" id="tab-two" role="tab">Tab two</button>
<button type="button" id="tab-three" role="tab">Tab three</button>
<button>Right button, not a tab!</button>
<button slot="before-tabs">2nd Left button, not a tab!</button>
<div role="tabpanel" aria-labelledby="tab-one">
Panel 1
</div>
<div role="tabpanel" aria-labelledby="tab-two" hidden>
Panel 2
</div>
<div role="tabpanel" aria-labelledby="tab-three" hidden>
Panel 3
</div>
<p>This comes after the panels</p>
</tab-container>
</main>
<!-- <script src="../dist/index.js" type="module"></script> -->
<script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
</body>
</html>