@natachah/vanilla-frontend 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitlab-ci.yml +40 -0
- package/LICENSE.md +7 -0
- package/README.md +11 -0
- package/docs/index.html +36 -0
- package/docs/main.js +32 -0
- package/docs/pages/components/badge.html +154 -0
- package/docs/pages/components/button.html +186 -0
- package/docs/pages/components/card.html +184 -0
- package/docs/pages/components/dialog.html +334 -0
- package/docs/pages/components/disclosure.html +310 -0
- package/docs/pages/components/dropdown.html +255 -0
- package/docs/pages/components/form.html +331 -0
- package/docs/pages/components/list.html +140 -0
- package/docs/pages/components/loading.html +58 -0
- package/docs/pages/components/media.html +130 -0
- package/docs/pages/components/nav.html +119 -0
- package/docs/pages/components/progress.html +47 -0
- package/docs/pages/components/slider.html +311 -0
- package/docs/pages/components/table.html +168 -0
- package/docs/pages/javascript/autofill.html +170 -0
- package/docs/pages/javascript/checkall.html +59 -0
- package/docs/pages/javascript/comfort.html +134 -0
- package/docs/pages/javascript/consent.html +112 -0
- package/docs/pages/javascript/cookie.html +81 -0
- package/docs/pages/javascript/form.html +199 -0
- package/docs/pages/javascript/scroll.html +209 -0
- package/docs/pages/javascript/sidebar.html +53 -0
- package/docs/pages/javascript/sortable.html +148 -0
- package/docs/pages/javascript/toggle.html +191 -0
- package/docs/pages/javascript/tree.html +221 -0
- package/docs/pages/layout/grid.html +201 -0
- package/docs/pages/layout/reset.html +53 -0
- package/docs/pages/layout/typography.html +324 -0
- package/docs/pages/quick-start/conventions.html +112 -0
- package/docs/pages/quick-start/customization.html +187 -0
- package/docs/pages/quick-start/installation.html +95 -0
- package/docs/pages/quick-start/mixins.html +228 -0
- package/docs/pages/test.html +15 -0
- package/docs/src/js/demo.js +98 -0
- package/docs/src/js/doc-code.js +102 -0
- package/docs/src/js/doc-demo.js +14 -0
- package/docs/src/js/doc-layout.js +108 -0
- package/docs/src/scss/demo.scss +77 -0
- package/docs/src/scss/layout.scss +160 -0
- package/docs/src/scss/style.scss +278 -0
- package/docs/vite.config.mjs +23 -0
- package/esbuild.mjs +25 -0
- package/js/_autofill.js +131 -0
- package/js/_check-all.js +77 -0
- package/js/_comfort.js +174 -0
- package/js/_consent.js +84 -0
- package/js/_dialog.js +164 -0
- package/js/_dropdown.js +101 -0
- package/js/_scroll.js +184 -0
- package/js/_sidebar.js +97 -0
- package/js/_slider.js +249 -0
- package/js/_sortable.js +143 -0
- package/js/_tabpanel.js +88 -0
- package/js/_toggle.js +123 -0
- package/js/_tree.js +85 -0
- package/js/tests/autofill.test.js +157 -0
- package/js/tests/base-component.test.js +108 -0
- package/js/tests/check-all.test.js +88 -0
- package/js/tests/comfort.test.js +219 -0
- package/js/tests/consent.test.js +84 -0
- package/js/tests/cookie.test.js +102 -0
- package/js/tests/dialog.test.js +189 -0
- package/js/tests/dropdown.test.js +115 -0
- package/js/tests/form-helper.test.js +155 -0
- package/js/tests/scroll.test.js +203 -0
- package/js/tests/sidebar.test.js +99 -0
- package/js/tests/slider.test.js +307 -0
- package/js/tests/sortable.test.js +124 -0
- package/js/tests/tabpanel.test.js +114 -0
- package/js/tests/toggle.test.js +190 -0
- package/js/tests/tree.test.js +165 -0
- package/js/utilities/_base-component.js +101 -0
- package/js/utilities/_cookie.js +98 -0
- package/js/utilities/_error.js +80 -0
- package/js/utilities/_form-helper.js +101 -0
- package/package.json +42 -0
- package/scss/_badge.scss +37 -0
- package/scss/_button.scss +34 -0
- package/scss/_card.scss +122 -0
- package/scss/_dialog.scss +116 -0
- package/scss/_disclosure.scss +101 -0
- package/scss/_dropdown.scss +68 -0
- package/scss/_form.scss +197 -0
- package/scss/_grid.scss +40 -0
- package/scss/_group.scss +57 -0
- package/scss/_list.scss +18 -0
- package/scss/_loading.scss +49 -0
- package/scss/_media.scss +37 -0
- package/scss/_nav.scss +72 -0
- package/scss/_progress.scss +40 -0
- package/scss/_slider.scss +35 -0
- package/scss/_table.scss +36 -0
- package/scss/utilities/_mixin.scss +322 -0
- package/scss/utilities/_reset.scss +145 -0
- package/scss/utilities/_typography.scss +107 -0
- package/scss/vanilla-frontend.scss +23 -0
- package/scss/variables/_root.scss +70 -0
- package/scss/variables/_setting.scss +63 -0
- package/vitest.config.js +7 -0
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Components > Dropdown</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Dropdown</h1>
|
|
14
|
+
|
|
15
|
+
<p>The dropdown is using a <code><div></code> tag with the class <code>.dropdown</code>. Inside of the element you must add a <code><button></code> and another <code><div></code> or an <code><ul/ol></code> tag.</p>
|
|
16
|
+
|
|
17
|
+
<blockquote class="todo">
|
|
18
|
+
<p>Could be replaced by the popover attribute when compatibility is ok. Check on Can I Use website for Popover and Anchor</p>
|
|
19
|
+
</blockquote>
|
|
20
|
+
<doc-demo>
|
|
21
|
+
<div class="dropdown demo-dropdown">
|
|
22
|
+
<button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
|
|
23
|
+
Dropdown
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
25
|
+
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
|
|
26
|
+
</svg>
|
|
27
|
+
</button>
|
|
28
|
+
<ul id="myDropdown" tabindex="0" hidden>
|
|
29
|
+
<li><a href="#">Subitem</a></li>
|
|
30
|
+
<li><a href="#">Subitem</a></li>
|
|
31
|
+
<li><a href="#">Subitem</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
</doc-demo>
|
|
35
|
+
|
|
36
|
+
<div class="code-group">
|
|
37
|
+
<div role="tablist">
|
|
38
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
39
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
40
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
41
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
42
|
+
</div>
|
|
43
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
44
|
+
<div class="dropdown">
|
|
45
|
+
<button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
|
|
46
|
+
Dropdown
|
|
47
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
48
|
+
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
|
|
49
|
+
</svg>
|
|
50
|
+
</button>
|
|
51
|
+
<ul id="myDropdown" tabindex="0" hidden>
|
|
52
|
+
<li><a href="#">Subitem</a></li>
|
|
53
|
+
<li><a href="#">Subitem</a></li>
|
|
54
|
+
<li><a href="#">Subitem</a></li>
|
|
55
|
+
</ul>
|
|
56
|
+
</div>
|
|
57
|
+
</doc-code>
|
|
58
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
59
|
+
@import '@natachah/vanilla-frontend/scss/_component';
|
|
60
|
+
</doc-code>
|
|
61
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
62
|
+
--dropdown-color
|
|
63
|
+
--dropdown-background
|
|
64
|
+
--dropdown-border-size
|
|
65
|
+
--dropdown-border-style
|
|
66
|
+
--dropdown-border-color
|
|
67
|
+
--dropdown-border-radius
|
|
68
|
+
--dropdown-padding-inline
|
|
69
|
+
--dropdown-padding-block
|
|
70
|
+
--dropdown-transition
|
|
71
|
+
--dropdown-decoration
|
|
72
|
+
--dropdown-focus-size
|
|
73
|
+
--dropdown-focus-style
|
|
74
|
+
--dropdown-focus-color
|
|
75
|
+
--dropdown-focus-offset
|
|
76
|
+
--dropdown-hover-color
|
|
77
|
+
--dropdown-hover-background
|
|
78
|
+
--dropdown-hover-border-color
|
|
79
|
+
--dropdown-active-color
|
|
80
|
+
--dropdown-active-background
|
|
81
|
+
--dropdown-active-border-color
|
|
82
|
+
--dropdown-disabled-opacity
|
|
83
|
+
--dropdown-transition
|
|
84
|
+
--dropdown-svg-transform
|
|
85
|
+
--dropdown-index
|
|
86
|
+
--dropdown-offset
|
|
87
|
+
</doc-code>
|
|
88
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
89
|
+
import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
|
|
90
|
+
const dropdowns = document.querySelectorAll('.dropdown')
|
|
91
|
+
if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
|
|
92
|
+
</doc-code>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<p>To work properly the <code><button></code> of the dropdown must have an <code>aria-controls="IdOfTheContent"</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
|
|
96
|
+
|
|
97
|
+
<h2>States</h2>
|
|
98
|
+
|
|
99
|
+
<p>The <code><button></code> inside the dropdown will work as the default button component.</p>
|
|
100
|
+
|
|
101
|
+
<p>If you add an <code><ul/ol></code> with some <code><a></code>, it will transform the links into items with all the default states (<code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code>).</p>
|
|
102
|
+
|
|
103
|
+
<h2>Variants</h2>
|
|
104
|
+
|
|
105
|
+
<p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the <code><button></code>.</p>
|
|
106
|
+
|
|
107
|
+
<h3>Group</h3>
|
|
108
|
+
|
|
109
|
+
<p>You can group some dropdown by putting them in a <code><div></code> with the class <code>.group</code>.</p>
|
|
110
|
+
|
|
111
|
+
<doc-demo>
|
|
112
|
+
<div class="group">
|
|
113
|
+
<div class="dropdown demo-dropdown">
|
|
114
|
+
<button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
|
|
115
|
+
Dropdown A
|
|
116
|
+
</button>
|
|
117
|
+
<div id="myDropdownA" tabindex="0" hidden>
|
|
118
|
+
<p>AAA</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="dropdown demo-dropdown">
|
|
122
|
+
<button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
|
|
123
|
+
Dropdown B
|
|
124
|
+
</button>
|
|
125
|
+
<div id="myDropdownB" tabindex="0" hidden>
|
|
126
|
+
<p>BBB</p>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="dropdown demo-dropdown">
|
|
130
|
+
<button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
|
|
131
|
+
Dropdown C
|
|
132
|
+
</button>
|
|
133
|
+
<div id="myDropdownC" tabindex="0" hidden>
|
|
134
|
+
<p>CCC</p>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</doc-demo>
|
|
139
|
+
|
|
140
|
+
<div class="code-group">
|
|
141
|
+
<div role="tablist">
|
|
142
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
143
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
144
|
+
</div>
|
|
145
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
146
|
+
<div class="group">
|
|
147
|
+
<div class="dropdown">
|
|
148
|
+
<button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
|
|
149
|
+
Dropdown A
|
|
150
|
+
</button>
|
|
151
|
+
<div id="myDropdownA" tabindex="0" hidden>
|
|
152
|
+
<p>AAA</p>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="dropdown">
|
|
156
|
+
<button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
|
|
157
|
+
Dropdown B
|
|
158
|
+
</button>
|
|
159
|
+
<div id="myDropdownB" tabindex="0" hidden>
|
|
160
|
+
<p>BBB</p>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="dropdown">
|
|
164
|
+
<button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
|
|
165
|
+
Dropdown C
|
|
166
|
+
</button>
|
|
167
|
+
<div id="myDropdownC" tabindex="0" hidden>
|
|
168
|
+
<p>CCC</p>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</doc-code>
|
|
173
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
174
|
+
@import '@natachah/vanilla-frontend/scss/_group';
|
|
175
|
+
</doc-code>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<h2>Javascript</h2>
|
|
179
|
+
|
|
180
|
+
<blockquote>
|
|
181
|
+
<p>To work properly the dropdown required some javascript.</p>
|
|
182
|
+
</blockquote>
|
|
183
|
+
|
|
184
|
+
<h3>Options</h3>
|
|
185
|
+
|
|
186
|
+
<table>
|
|
187
|
+
<thead>
|
|
188
|
+
<tr>
|
|
189
|
+
<th>Name</th>
|
|
190
|
+
<th>Description</th>
|
|
191
|
+
<th>Value</th>
|
|
192
|
+
</tr>
|
|
193
|
+
</thead>
|
|
194
|
+
<tbody>
|
|
195
|
+
<tr>
|
|
196
|
+
<td data-label="Name">
|
|
197
|
+
<p>closable</p>
|
|
198
|
+
</td>
|
|
199
|
+
<td data-label="Description">
|
|
200
|
+
<p>The ability to close the dropdown when click outside</p>
|
|
201
|
+
</td>
|
|
202
|
+
<td data-label="Value">
|
|
203
|
+
<p><code>true</code> as a <code>boolean</code></p>
|
|
204
|
+
</td>
|
|
205
|
+
</tr>
|
|
206
|
+
</tbody>
|
|
207
|
+
</table>
|
|
208
|
+
|
|
209
|
+
<doc-code data-type="js">
|
|
210
|
+
new Toggle(myDropdown, {
|
|
211
|
+
closable:false
|
|
212
|
+
})
|
|
213
|
+
</doc-code>
|
|
214
|
+
|
|
215
|
+
<blockquote class="warning">
|
|
216
|
+
<p>If you want the ability to close the dropdown on click outside, add the <code>tabindex="0"</code> attribute on the content <code><div/ul></code> tag.</p>
|
|
217
|
+
</blockquote>
|
|
218
|
+
|
|
219
|
+
<h3>Events</h3>
|
|
220
|
+
<table>
|
|
221
|
+
<thead>
|
|
222
|
+
<tr>
|
|
223
|
+
<th>Event</th>
|
|
224
|
+
<th>Description</th>
|
|
225
|
+
<th>Value</th>
|
|
226
|
+
</tr>
|
|
227
|
+
</thead>
|
|
228
|
+
<tbody>
|
|
229
|
+
<tr>
|
|
230
|
+
<td data-label="Event">
|
|
231
|
+
<p>dropdown:changed</p>
|
|
232
|
+
</td>
|
|
233
|
+
<td data-label="Description">
|
|
234
|
+
<p>This event is fired when toggle the button</p>
|
|
235
|
+
</td>
|
|
236
|
+
<td data-label="Value">
|
|
237
|
+
<p><code>isOpen</code> as a <code>boolean</code></p>
|
|
238
|
+
</td>
|
|
239
|
+
</tr>
|
|
240
|
+
</tbody>
|
|
241
|
+
</table>
|
|
242
|
+
|
|
243
|
+
<doc-code data-type="js">
|
|
244
|
+
const dropdown = document.getElementById('myDropdown')
|
|
245
|
+
dropdown.addEventListener('dropdown:changed', (e) => {
|
|
246
|
+
const value = e.detail.isOpen
|
|
247
|
+
console.log(value)
|
|
248
|
+
})
|
|
249
|
+
</doc-code>
|
|
250
|
+
|
|
251
|
+
</doc-layout>
|
|
252
|
+
<script type="module" src="/main.js"></script>
|
|
253
|
+
</body>
|
|
254
|
+
|
|
255
|
+
</html>
|
|
@@ -0,0 +1,331 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Components ></title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Form</h1>
|
|
14
|
+
<p>The form is using the native <code><label></code>, <code><input></code> and co. tags.</p>
|
|
15
|
+
<doc-demo>
|
|
16
|
+
<label for="inputText">Input</label>
|
|
17
|
+
<input type="text" id="inputText" name="input" placeholder="My input" aria-describedby="myInputDescription">
|
|
18
|
+
<small id="myInputDescription">
|
|
19
|
+
Must be at least 8 characters.
|
|
20
|
+
</small>
|
|
21
|
+
</doc-demo>
|
|
22
|
+
|
|
23
|
+
<div class="code-group">
|
|
24
|
+
<div role="tablist">
|
|
25
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
26
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
27
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
28
|
+
</div>
|
|
29
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
30
|
+
<label for="inputText">Input</label>
|
|
31
|
+
<input type="text" id="inputText" name="input" placeholder="My input" aria-describedby="myInputDescription">
|
|
32
|
+
<small id="myInputDescription">
|
|
33
|
+
Must be at least 8 characters.
|
|
34
|
+
</small>
|
|
35
|
+
</doc-code>
|
|
36
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
37
|
+
@import '@natachah/vanilla-frontend/scss/_form';
|
|
38
|
+
</doc-code>
|
|
39
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
40
|
+
--form-color
|
|
41
|
+
--form-background
|
|
42
|
+
--form-border-size
|
|
43
|
+
--form-border-style
|
|
44
|
+
--form-border-color
|
|
45
|
+
--form-border-radius
|
|
46
|
+
--form-padding-inline
|
|
47
|
+
--form-padding-block
|
|
48
|
+
--form-transition
|
|
49
|
+
--form-decoration
|
|
50
|
+
--form-focus-size
|
|
51
|
+
--form-focus-style
|
|
52
|
+
--form-focus-color
|
|
53
|
+
--form-focus-offset
|
|
54
|
+
--form-disabled-opacity
|
|
55
|
+
</doc-code>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<blockquote class="tip">
|
|
59
|
+
<p>To display some information about a field use the <code>aria-describedby="IdOfMyDescription"</code> that refer to a <code><small></code> element with the information. </p>
|
|
60
|
+
</blockquote>
|
|
61
|
+
|
|
62
|
+
<h2>Fields</h2>
|
|
63
|
+
<h3>Inputs</h3>
|
|
64
|
+
<p>All <code><input></code> types are consistently styled and come with default states.</p>
|
|
65
|
+
<doc-demo>
|
|
66
|
+
<input type="text" name="text" placeholder="Some text">
|
|
67
|
+
<input type="search" name="search" placeholder="Enter some keyword">
|
|
68
|
+
<input type="email" name="email" placeholder="info@something.com">
|
|
69
|
+
<input type="url" name="url" placeholder="http://www.google.com">
|
|
70
|
+
<input type="tel" name="tel" placeholder="021 922 00 00">
|
|
71
|
+
<input type="number" name="number" placeholder="42">
|
|
72
|
+
<input type="password" name="password" placeholder="123456">
|
|
73
|
+
</doc-demo>
|
|
74
|
+
|
|
75
|
+
<p>The type <b>file</b> come with a default icon and no button.</p>
|
|
76
|
+
<doc-demo>
|
|
77
|
+
<input type="file" name="file" accept="image/png, image/jpeg">
|
|
78
|
+
</doc-demo>
|
|
79
|
+
|
|
80
|
+
<p>The type <b>date</b>, <b>time</b> and <b>datetime-local</b> come with default icon.</p>
|
|
81
|
+
<doc-demo>
|
|
82
|
+
<input type="date" name="date">
|
|
83
|
+
<input type="time" name="time">
|
|
84
|
+
<input type="datetime-local" name="datetime">
|
|
85
|
+
</doc-demo>
|
|
86
|
+
|
|
87
|
+
<blockquote class="warning">
|
|
88
|
+
<p>Hard to make it 100% similar on all browser.</p>
|
|
89
|
+
</blockquote>
|
|
90
|
+
|
|
91
|
+
<p>The type <b>color</b> is also consistent with the other input types.</p>
|
|
92
|
+
|
|
93
|
+
<doc-demo>
|
|
94
|
+
<input type="color" name="color">
|
|
95
|
+
</doc-demo>
|
|
96
|
+
|
|
97
|
+
<h3>Textarea</h3>
|
|
98
|
+
<p>The native <code><textarea></code> is styled like the input for consistency.</p>
|
|
99
|
+
<p>By default you only can resize the height.</p>
|
|
100
|
+
<doc-demo>
|
|
101
|
+
<textarea name="textarea" rows="5" cols="33">It was a dark and stormy night...</textarea>
|
|
102
|
+
</doc-demo>
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
<h3>Select</h3>
|
|
106
|
+
<p>The native <code><select></code> is styled like the input for consistency.</p>
|
|
107
|
+
<doc-demo>
|
|
108
|
+
<select name="select">
|
|
109
|
+
<option value="1">One</option>
|
|
110
|
+
<option value="2">Two</option>
|
|
111
|
+
<option value="3">Three</option>
|
|
112
|
+
<option value="4">Four</option>
|
|
113
|
+
</select>
|
|
114
|
+
</doc-demo>
|
|
115
|
+
|
|
116
|
+
<h3>Range</h3>
|
|
117
|
+
<p>The <b>range</b> field look more like a progress bar.</p>
|
|
118
|
+
<doc-demo>
|
|
119
|
+
<input type="range" name="range" min="0" max="10">
|
|
120
|
+
</doc-demo>
|
|
121
|
+
|
|
122
|
+
<h3>Radio</h3>
|
|
123
|
+
<p>The <b>radio</b> field must be inside a <code><fieldset></code>.</p>
|
|
124
|
+
<p>By default the radio are displayed inline.</p>
|
|
125
|
+
<doc-demo>
|
|
126
|
+
<fieldset>
|
|
127
|
+
<legend>Radio</legend>
|
|
128
|
+
<input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label>
|
|
129
|
+
<input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label>
|
|
130
|
+
<input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label>
|
|
131
|
+
</fieldset>
|
|
132
|
+
</doc-demo>
|
|
133
|
+
|
|
134
|
+
<doc-code>
|
|
135
|
+
<fieldset>
|
|
136
|
+
<legend>Radio</legend>
|
|
137
|
+
<input type="radio" id="radioA" name="radio" checked> <label for="radioA">Option A</label>
|
|
138
|
+
<input type="radio" id="radioB" name="radio"> <label for="radioB">Option B</label>
|
|
139
|
+
<input type="radio" id="radioC" name="radio"> <label for="radioC">Option C</label>
|
|
140
|
+
</fieldset>
|
|
141
|
+
</doc-code>
|
|
142
|
+
|
|
143
|
+
<p>To display the element into the vertical, surround the <code><input></code> and the <code><label></code> by a <code><div></code> tag.</p>
|
|
144
|
+
<doc-demo>
|
|
145
|
+
<fieldset>
|
|
146
|
+
<legend>Radio</legend>
|
|
147
|
+
<div>
|
|
148
|
+
<input type="radio" id="radioD" name="radio" checked> <label for="radioD">Option D</label>
|
|
149
|
+
</div>
|
|
150
|
+
<div>
|
|
151
|
+
<input type="radio" id="radioE" name="radio"> <label for="radioE">Option E</label>
|
|
152
|
+
</div>
|
|
153
|
+
<div>
|
|
154
|
+
<input type="radio" id="radioF" name="radio"> <label for="radioF">Option F</label>
|
|
155
|
+
</div>
|
|
156
|
+
</fieldset>
|
|
157
|
+
</doc-demo>
|
|
158
|
+
|
|
159
|
+
<doc-code>
|
|
160
|
+
<fieldset>
|
|
161
|
+
<legend>Radio</legend>
|
|
162
|
+
<div>
|
|
163
|
+
<input type="radio" id="radioD" name="radio" checked>
|
|
164
|
+
<label for="radioD">Option D</label>
|
|
165
|
+
</div>
|
|
166
|
+
<div>
|
|
167
|
+
<input type="radio" id="radioE" name="radio">
|
|
168
|
+
<label for="radioE">Option E</label>
|
|
169
|
+
</div>
|
|
170
|
+
<div>
|
|
171
|
+
<input type="radio" id="radioF" name="radio">
|
|
172
|
+
<label for="radioF">Option F</label>
|
|
173
|
+
</div>
|
|
174
|
+
</fieldset>
|
|
175
|
+
</doc-code>
|
|
176
|
+
|
|
177
|
+
<h3>Checkbox</h3>
|
|
178
|
+
<p>The <b>checkbox</b> field must be inside a <code><fieldset></code>.</p>
|
|
179
|
+
<p>By default the checkboxes are displayed inline.</p>
|
|
180
|
+
<doc-demo>
|
|
181
|
+
<fieldset>
|
|
182
|
+
<legend>Checkbox</legend>
|
|
183
|
+
<input type="checkbox" id="checkboxA" name="checkboxA" checked>
|
|
184
|
+
<label for="checkboxA">Option A</label>
|
|
185
|
+
<input type="checkbox" id="checkboxB" name="checkboxB">
|
|
186
|
+
<label for="checkboxB">Option B</label>
|
|
187
|
+
<input type="checkbox" id="checkboxC" name="checkboxC">
|
|
188
|
+
<label for="checkboxC">Option C</label>
|
|
189
|
+
</fieldset>
|
|
190
|
+
</doc-demo>
|
|
191
|
+
|
|
192
|
+
<doc-code>
|
|
193
|
+
<fieldset>
|
|
194
|
+
<legend>Checkbox</legend>
|
|
195
|
+
<input type="checkbox" id="checkboxA" name="checkboxA" checked>
|
|
196
|
+
<label for="checkboxA">Option A</label>
|
|
197
|
+
<input type="checkbox" id="checkboxB" name="checkboxB">
|
|
198
|
+
<label for="checkboxB">Option B</label>
|
|
199
|
+
<input type="checkbox" id="checkboxC" name="checkboxC">
|
|
200
|
+
<label for="checkboxC">Option C</label>
|
|
201
|
+
</fieldset>
|
|
202
|
+
</doc-code>
|
|
203
|
+
|
|
204
|
+
<p>To display the element into the vertical, surround the <code><input></code> and the <code><label></code> by a <code><div></code> tag.</p>
|
|
205
|
+
<doc-demo>
|
|
206
|
+
<fieldset>
|
|
207
|
+
<legend>Radio</legend>
|
|
208
|
+
<div>
|
|
209
|
+
<input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label>
|
|
210
|
+
</div>
|
|
211
|
+
<div>
|
|
212
|
+
<input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label>
|
|
213
|
+
</div>
|
|
214
|
+
<div>
|
|
215
|
+
<input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label>
|
|
216
|
+
</div>
|
|
217
|
+
</fieldset>
|
|
218
|
+
</doc-demo>
|
|
219
|
+
<doc-code>
|
|
220
|
+
<fieldset>
|
|
221
|
+
<legend>Radio</legend>
|
|
222
|
+
<div>
|
|
223
|
+
<input type="checkbox" id="checkboxD" name="checkbox" checked> <label for="checkboxD">Option D</label>
|
|
224
|
+
</div>
|
|
225
|
+
<div>
|
|
226
|
+
<input type="checkbox" id="checkboxE" name="checkbox"> <label for="checkboxE">Option E</label>
|
|
227
|
+
</div>
|
|
228
|
+
<div>
|
|
229
|
+
<input type="checkbox" id="checkboxF" name="checkbox"> <label for="checkboxF">Option F</label>
|
|
230
|
+
</div>
|
|
231
|
+
</fieldset>
|
|
232
|
+
</doc-code>
|
|
233
|
+
|
|
234
|
+
<h3>Switch</h3>
|
|
235
|
+
<p>The <b>checkbox</b> with the <code>role="switch"</code> attribute will render a switch component.</p>
|
|
236
|
+
<doc-demo>
|
|
237
|
+
<input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
|
|
238
|
+
</doc-demo>
|
|
239
|
+
<doc-code>
|
|
240
|
+
<input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
|
|
241
|
+
</doc-code>
|
|
242
|
+
|
|
243
|
+
<h2>States</h2>
|
|
244
|
+
<p>The form fields can have multiple states as <code>:focus</code>, <code>:disabled</code>, <code>:readonly</code> and <code>:validation</code>.</p>
|
|
245
|
+
|
|
246
|
+
<h3>Disabled</h3>
|
|
247
|
+
<p>Apply the <code>disabled</code> attribute on <code><input></code>, <code><textarea></code> or <code><select></code> tag to display the disabled style.</p>
|
|
248
|
+
<doc-demo>
|
|
249
|
+
<input type="text" value="My value" disabled>
|
|
250
|
+
<select type="text" disabled>
|
|
251
|
+
<option value="--">--</option>
|
|
252
|
+
</select>
|
|
253
|
+
<textarea disabled>It was a dark and stormy night...</textarea>
|
|
254
|
+
<input type="checkbox" disabled> <input type="checkbox" disabled checked> <input type="radio" disabled> <input type="radio" disabled checked> <input type="checkbox" role="switch" disabled> <input type="checkbox" role="switch" disabled checked>
|
|
255
|
+
</doc-demo>
|
|
256
|
+
|
|
257
|
+
<h3>Readonly</h3>
|
|
258
|
+
<p>Apply the <code>readonly</code> attribute on <code><input></code> or <code><textarea></code> tag to display the readonly style.</p>
|
|
259
|
+
<doc-demo>
|
|
260
|
+
<input type="text" value="My value" readonly>
|
|
261
|
+
<textarea readonly>It was a dark and stormy night...</textarea>
|
|
262
|
+
</doc-demo>
|
|
263
|
+
|
|
264
|
+
<h3>Validation</h3>
|
|
265
|
+
<p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code><small></code> tag to display the information.</p>
|
|
266
|
+
<blockquote class="warning">
|
|
267
|
+
<p>As every design is different, there is no default style for in/valid elements</p>
|
|
268
|
+
</blockquote>
|
|
269
|
+
|
|
270
|
+
<doc-code>
|
|
271
|
+
<input type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
272
|
+
<small id="invalidMsg">
|
|
273
|
+
<span aria-live="assertive">Incorrect value !</span>
|
|
274
|
+
</small>
|
|
275
|
+
<input type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
276
|
+
<small id="validMsg">
|
|
277
|
+
<span aria-live="assertive">All good !</span>
|
|
278
|
+
</small>
|
|
279
|
+
</doc-code>
|
|
280
|
+
|
|
281
|
+
<h2>Variants</h2>
|
|
282
|
+
<h3>Group</h3>
|
|
283
|
+
<p>You can group some form fields by putting them in a <code><div></code> with the class <code>.group</code>.</p>
|
|
284
|
+
<doc-demo>
|
|
285
|
+
<fieldset>
|
|
286
|
+
<legend>Price</legend>
|
|
287
|
+
<div class="group">
|
|
288
|
+
<label>Before</label>
|
|
289
|
+
<select>
|
|
290
|
+
<option value="A">CHF</option>
|
|
291
|
+
<option value="B">€</option>
|
|
292
|
+
<option value="C">$</option>
|
|
293
|
+
</select>
|
|
294
|
+
<input type="number" value="110">
|
|
295
|
+
<label>After</label>
|
|
296
|
+
<button>Send</button>
|
|
297
|
+
</div>
|
|
298
|
+
</fieldset>
|
|
299
|
+
</doc-demo>
|
|
300
|
+
|
|
301
|
+
<div class="code-group">
|
|
302
|
+
<div role="tablist">
|
|
303
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
304
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
305
|
+
</div>
|
|
306
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
307
|
+
<fieldset>
|
|
308
|
+
<legend>Price</legend>
|
|
309
|
+
<div class="group">
|
|
310
|
+
<label>Before</label>
|
|
311
|
+
<select>
|
|
312
|
+
<option value="A">CHF</option>
|
|
313
|
+
<option value="B">€</option>
|
|
314
|
+
<option value="C">$</option>
|
|
315
|
+
</select>
|
|
316
|
+
<input type="number" value="110">
|
|
317
|
+
<label>After</label>
|
|
318
|
+
<button>Send</button>
|
|
319
|
+
</div>
|
|
320
|
+
</fieldset>
|
|
321
|
+
</doc-code>
|
|
322
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
323
|
+
@import '@natachah/vanilla-frontend/scss/_group';
|
|
324
|
+
</doc-code>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
</doc-layout>
|
|
328
|
+
<script type="module" src="/main.js"></script>
|
|
329
|
+
</body>
|
|
330
|
+
|
|
331
|
+
</html>
|