-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (132 loc) · 10.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Tabs</title>
</head>
<body>
<div class="wrapper">
<h1>Accessible Tabs</h1>
<p class="back">
<a href="../../index.html">Back to components list</a>
</p>
<h2>Demo</h2>
<h3>Manual</h3>
<div id="tab-demo-1" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Trim a pineapple">
<button class="tabs__tab" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1">Tab 1</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-2" id="tab-2">Tab 2</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-3" id="tab-3" data-deletable>Tab 3</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-4" id="tab-4">Tab 4</button>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-1" aria-labelledby="tab-1">
<h3>Steps</h3>
<ol>
<li>Cut the two ends of the fruit so that it can be placed vertically on the worktop.</li>
<li>Slice the skin from top to bottom going around the fruit.</li>
<li>Remove the “eyes” with the tip of the paring knife.</li>
<li>Slice the pineapple into quarters then, if necessary, remove the hard central part.</li>
</ol>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-2" aria-labelledby="tab-2" hidden>
<h3>Variant</h3>
<p>To remove pineapple eyes, you can use an effective but more difficult technique. The eyes form parallel and continuous spirals between them around the fruit. You can dig regular trenches with a knife, following these spirals. Remove the parts containing the eyes: the pineapple is sculpted with pretty parallel grooves.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-3" aria-labelledby="tab-3" hidden>
<h3>Practice</h3>
<p>You can eat the whole pineapple (eyes removed), “to the bite” as is often done on the islands. Just cut the fruit into quarters. The quarter plumes then serve as an improvised “handle” to bite into the pineapple. According to taste, sprinkle it with grated coconut.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-4" aria-labelledby="tab-4" hidden>
<h3>Suggestion</h3>
<p>Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.</p>
</div>
</div>
<h3>Automatic</h3>
<div id="tab-demo-2" class="tabs tabs--auto">
<div class="tabs__tablist" role="tablist" aria-label="Trim a pineapple">
<button class="tabs__tab" role="tab" aria-selected="true" aria-controls="tab-panel-5" id="tab-5">Tab 1</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-6" id="tab-6">Tab 2</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-7" id="tab-7" data-deletable>Tab 3</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-8" id="tab-8">Tab 4</button>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-5" aria-labelledby="tab-5">
<h3>Steps</h3>
<ol>
<li>Cut the two ends of the fruit so that it can be placed vertically on the worktop.</li>
<li>Slice the skin from top to bottom going around the fruit.</li>
<li>Retirez les “yeux” avec la pointe du couteau d’office.</li>
<li>Tranchez l’ananas en quartier puis, au besoin, ôtez la partie centrale dure.</li>
</ol>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-6" aria-labelledby="tab-6" hidden>
<h3>Variant</h3>
<p>To remove pineapple eyes, you can use an effective but more difficult technique. The eyes form parallel and continuous spirals between them around the fruit. You can dig regular trenches with a knife, following these spirals. Remove the parts containing the eyes: the pineapple is sculpted with pretty parallel grooves.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-7" aria-labelledby="tab-7" hidden>
<h3>Practice</h3>
<p>You can eat the whole pineapple (eyes removed), “to the bite” as is often done on the islands. Just cut the fruit into quarters. The quarter plumes then serve as an improvised “handle” to bite into the pineapple. According to taste, sprinkle it with grated coconut.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-8" aria-labelledby="tab-8" hidden>
<h3>Suggestion</h3>
<p>Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.</p>
</div>
</div>
<h3>With events</h3>
<div id="tab-demo-3" class="tabs tabs--auto">
<div class="tabs__tablist" role="tablist" aria-label="Trim a pineapple">
<button class="tabs__tab" role="tab" aria-selected="true" aria-controls="tab-panel-9" id="tab-9">Tab 1</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-10" id="tab-10">Tab 2</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-11" id="tab-11" data-deletable>Tab 3</button>
<button class="tabs__tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-panel-12" id="tab-12">Tab 4</button>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-9" aria-labelledby="tab-9">
<h3>Steps</h3>
<ol>
<li>Cut the two ends of the fruit so that it can be placed vertically on the worktop.</li>
<li>Slice the skin from top to bottom going around the fruit.</li>
<li>Retirez les “yeux” avec la pointe du couteau d’office.</li>
<li>Tranchez l’ananas en quartier puis, au besoin, ôtez la partie centrale dure.</li>
</ol>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-10" aria-labelledby="tab-10" hidden>
<h3>Variant</h3>
<p>To remove pineapple eyes, you can use an effective but more difficult technique. The eyes form parallel and continuous spirals between them around the fruit. You can dig regular trenches with a knife, following these spirals. Remove the parts containing the eyes: the pineapple is sculpted with pretty parallel grooves.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-11" aria-labelledby="tab-11" hidden>
<h3>Practice</h3>
<p>You can eat the whole pineapple (eyes removed), “to the bite” as is often done on the islands. Just cut the fruit into quarters. The quarter plumes then serve as an improvised “handle” to bite into the pineapple. According to taste, sprinkle it with grated coconut.</p>
</div>
<div class="tabs__panel" tabindex="0" role="tabpanel" id="tab-panel-12" aria-labelledby="tab-12" hidden>
<h3>Suggestion</h3>
<p>Lay the pineapple flat and slice it. Remove the core from the slices. Reconstitute the pineapple by stacking the slices on top of each other. Then style the pineapple with its plume of sheets. Squeeze a lime and sprinkle the pineapple with the lemon juice to prevent the flesh from oxidizing.</p>
</div>
</div>
<h2>Code</h2>
<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="html,result" data-slug-hash="eYRBpQj" data-user="beapi" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/beapi/pen/eYRBpQj">
Accessible Tabs</a> by Be API (<a href="https://codepen.io/beapi">@beapi</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
<script type="module">
import { Tabs } from '../../be-a11y.js'
import '../../src/css/index.css'
import './style.css'
Tabs.preset = {
'#tab-demo-1': {},
'#tab-demo-2': {
auto: true,
},
'#tab-demo-3': {
onTabChange: function() {
alert('Tab changed!')
}
}
}
Tabs.initFromPreset()
</script>
</body>
</html>