@punkfairie/98.css 1.1.21
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/.devenv/load-exports +1 -0
- package/.devenv/root +1 -0
- package/.devenv/tasks.db +0 -0
- package/.devenv/tasks.db-shm +0 -0
- package/.devenv/tasks.db-wal +0 -0
- package/.direnv/bin/nix-direnv-reload +19 -0
- package/.direnv/flake-profile-a5d5b61aa8a61b7d9d765e1daf971a9a578f1cfa.rc +2228 -0
- package/.editorconfig +18 -0
- package/.envrc +17 -0
- package/LICENSE +7 -0
- package/README.md +76 -0
- package/build.js +81 -0
- package/dist/98.css +2 -0
- package/dist/98.css.map +1 -0
- package/dist/docs.css +152 -0
- package/dist/icon.png +0 -0
- package/dist/index.html +1673 -0
- package/dist/index.html.ejs +1129 -0
- package/dist/ms_sans_serif.woff +0 -0
- package/dist/ms_sans_serif.woff2 +0 -0
- package/dist/ms_sans_serif_bold.woff +0 -0
- package/dist/ms_sans_serif_bold.woff2 +0 -0
- package/dist/vs.css +67 -0
- package/dist/window.png +0 -0
- package/dist/zoom.png +0 -0
- package/docs/docs.css +152 -0
- package/docs/icon.png +0 -0
- package/docs/index.html.ejs +1129 -0
- package/docs/vs.css +67 -0
- package/docs/window.png +0 -0
- package/docs/zoom.png +0 -0
- package/flake.nix +60 -0
- package/fonts/converted/ms_sans_serif.woff +0 -0
- package/fonts/converted/ms_sans_serif.woff2 +0 -0
- package/fonts/converted/ms_sans_serif_bold.woff +0 -0
- package/fonts/converted/ms_sans_serif_bold.woff2 +0 -0
- package/fonts/src/ms-sans-serif/MS Sans Serif.ttf +0 -0
- package/fonts/src/ms-sans-serif/license.txt +4 -0
- package/fonts/src/ms-sans-serif/readme.txt +26 -0
- package/fonts/src/ms-sans-serif-bold/MS Sans Serif Bold.ttf +0 -0
- package/fonts/src/ms-sans-serif-bold/license.txt +4 -0
- package/fonts/src/ms-sans-serif-bold/readme.txt +26 -0
- package/icon/button-down-active.svg +5 -0
- package/icon/button-down.svg +8 -0
- package/icon/button-left.svg +8 -0
- package/icon/button-right.svg +8 -0
- package/icon/button-up.svg +8 -0
- package/icon/checkmark-disabled.svg +3 -0
- package/icon/checkmark.svg +3 -0
- package/icon/close.svg +3 -0
- package/icon/groupbox-border.svg +4 -0
- package/icon/help.svg +8 -0
- package/icon/indicator-horizontal.svg +6 -0
- package/icon/indicator-rectangle-horizontal.svg +6 -0
- package/icon/maximize-disabled.svg +4 -0
- package/icon/maximize.svg +3 -0
- package/icon/minimize.svg +3 -0
- package/icon/radio-border-disabled.svg +7 -0
- package/icon/radio-border.svg +8 -0
- package/icon/radio-dot-disabled.svg +3 -0
- package/icon/radio-dot.svg +3 -0
- package/icon/restore.svg +10 -0
- package/icon/scrollbar-background.svg +4 -0
- package/icon/sunken-panel-border.svg +10 -0
- package/now.json +4 -0
- package/package.json +48 -0
- package/server.js +16 -0
- package/style.css +1052 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,1673 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>98.css - A design system for building faithful recreations of old UIs</title>
|
|
5
|
+
<link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
|
|
9
|
+
<meta property="og:title" content="98.css" />
|
|
10
|
+
<meta name="Description" content="A design system for building faithful recreations of old UIs." />
|
|
11
|
+
<meta property="og:description" content="A design system for building faithful recreations of old UIs." />
|
|
12
|
+
<meta
|
|
13
|
+
property="og:image"
|
|
14
|
+
content="https://github.com/jdan/98.css/raw/main/docs/window.png?raw=true"
|
|
15
|
+
/>
|
|
16
|
+
|
|
17
|
+
<link rel="stylesheet" href="98.css">
|
|
18
|
+
<link rel="stylesheet" href="docs.css">
|
|
19
|
+
<link rel="stylesheet" href="vs.css">
|
|
20
|
+
</head>
|
|
21
|
+
<body ontouchstart>
|
|
22
|
+
<aside>
|
|
23
|
+
<ul class="tree-view">
|
|
24
|
+
<li><a href="#intro">Intro</a></li>
|
|
25
|
+
<li>
|
|
26
|
+
<a href="#components">Components</a>
|
|
27
|
+
<ul>
|
|
28
|
+
<li><a href="#button">Button</a></li>
|
|
29
|
+
<li><a href="#checkbox">Checkbox</a></li>
|
|
30
|
+
<li><a href="#option-button">OptionButton</a></li>
|
|
31
|
+
<li><a href="#group-box">GroupBox</a></li>
|
|
32
|
+
<li><a href="#text-box">TextBox</a></li>
|
|
33
|
+
<li><a href="#slider">Slider</a></li>
|
|
34
|
+
<li><a href="#dropdown">Dropdown</a></li>
|
|
35
|
+
<li>
|
|
36
|
+
<a href="#window">Window</a>
|
|
37
|
+
<ul>
|
|
38
|
+
<li><a href="#title-bar">Title Bar</a></li>
|
|
39
|
+
<li><a href="#window-contents">Window contents</a></li>
|
|
40
|
+
<li><a href="#status-bar">Status Bar</a></li>
|
|
41
|
+
</ul>
|
|
42
|
+
</li>
|
|
43
|
+
<li><a href="#tree-view">TreeView</a></li>
|
|
44
|
+
<li><a href="#tabs">Tabs</a></li>
|
|
45
|
+
<li><a href="#table-view">TableView</a></li>
|
|
46
|
+
<li><a href="#progress-indicator">Progress Indicator</a></li>
|
|
47
|
+
<li><a href="#field-borders">Field borders</a></li>
|
|
48
|
+
</ul>
|
|
49
|
+
</li>
|
|
50
|
+
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
|
|
51
|
+
</ul>
|
|
52
|
+
</aside>
|
|
53
|
+
|
|
54
|
+
<main>
|
|
55
|
+
<h1>98.css</h1>
|
|
56
|
+
<hr>
|
|
57
|
+
<p>A design system for building faithful recreations of old UIs.</p>
|
|
58
|
+
|
|
59
|
+
<p>
|
|
60
|
+
<a href="http://npm.im/98.css" rel="nofollow" style="text-decoration: none">
|
|
61
|
+
<img height="29" alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
|
|
62
|
+
</a>
|
|
63
|
+
<a href="https://unpkg.com/98.css" rel="nofollow" style="text-decoration: none">
|
|
64
|
+
<img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
|
|
65
|
+
</a>
|
|
66
|
+
</p>
|
|
67
|
+
|
|
68
|
+
<h2 id="intro">Intro</h2>
|
|
69
|
+
<p>
|
|
70
|
+
98.css is a CSS library for building interfaces that look like Windows 98.
|
|
71
|
+
See more <a href="https://github.com/jdan/98.css">on GitHub</a>.
|
|
72
|
+
</p>
|
|
73
|
+
|
|
74
|
+
<div class="window" style="margin: 32px; width: 250px">
|
|
75
|
+
<div class="title-bar">
|
|
76
|
+
<div class="title-bar-text">
|
|
77
|
+
My First VB4 Program
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="title-bar-controls">
|
|
81
|
+
<button aria-label="Minimize"></button>
|
|
82
|
+
<button aria-label="Maximize"></button>
|
|
83
|
+
<button aria-label="Close"></button>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="window-body">
|
|
87
|
+
<p>Hello, world!</p>
|
|
88
|
+
<section class="field-row" style="justify-content: flex-end">
|
|
89
|
+
<button>OK</button>
|
|
90
|
+
<button>Cancel</button>
|
|
91
|
+
</section>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<p>
|
|
96
|
+
This library relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need
|
|
97
|
+
to use a <code><button></code>. Input elements require labels. Icon buttons rely on
|
|
98
|
+
<code>aria-label</code>. This page will guide you through that process, but accessibility is a primary
|
|
99
|
+
goal of this project.
|
|
100
|
+
</p>
|
|
101
|
+
|
|
102
|
+
<p>
|
|
103
|
+
You can override many of the styles of your elements while maintaining the appearance provided by
|
|
104
|
+
this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels?
|
|
105
|
+
Be our guest.
|
|
106
|
+
</p>
|
|
107
|
+
|
|
108
|
+
<p>
|
|
109
|
+
<strong>This library does not contain any JavaScript</strong>, it merely styles your HTML with some CSS.
|
|
110
|
+
This means 98.css is compatible with your frontend framework of choice.
|
|
111
|
+
</p>
|
|
112
|
+
|
|
113
|
+
<p>
|
|
114
|
+
Here is an example of <a href="https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js">98.css used with React</a>, and
|
|
115
|
+
<a href="https://codesandbox.io/s/late-sound-miqho?file=/index.html">an example with vanilla JavaScript</a>. The fastest way to use 98.css is to import it from unpkg.
|
|
116
|
+
</p>
|
|
117
|
+
|
|
118
|
+
<pre style="max-width: 375px"><code><link
|
|
119
|
+
rel="stylesheet"
|
|
120
|
+
href="https://unpkg.com/98.css"
|
|
121
|
+
></code></pre>
|
|
122
|
+
|
|
123
|
+
<p>
|
|
124
|
+
You can install 98.css from the <a href="https://github.com/jdan/98.css/releases">GitHub releases page</a>, or <a href="https://www.npmjs.com/package/98.css">from npm</a>.
|
|
125
|
+
</p>
|
|
126
|
+
<pre style="max-width: 375px"><code>npm install 98.css</code></pre>
|
|
127
|
+
|
|
128
|
+
<h2 id="components">Components</h2>
|
|
129
|
+
|
|
130
|
+
<section class="component">
|
|
131
|
+
<h3 id="button">Button</h3>
|
|
132
|
+
<div>
|
|
133
|
+
<blockquote>
|
|
134
|
+
A <em>command button</em>, also referred to as a push button, is a control
|
|
135
|
+
that causes the application to perform some action when the user clicks it.
|
|
136
|
+
|
|
137
|
+
<footer>— Microsoft Windows User Experience p. 160</footer>
|
|
138
|
+
</blockquote>
|
|
139
|
+
|
|
140
|
+
<p>
|
|
141
|
+
A standard button measures 75px wide and 23px tall, with a raised outer and inner border.
|
|
142
|
+
They are given 12px of horizontal padding by default.
|
|
143
|
+
</p>
|
|
144
|
+
|
|
145
|
+
<div class="example">
|
|
146
|
+
<button>Click me</button>
|
|
147
|
+
<input type="submit" />
|
|
148
|
+
<input type="reset" />
|
|
149
|
+
<details>
|
|
150
|
+
<summary>Show code</summary>
|
|
151
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Click me<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
152
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> /></span>
|
|
153
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span> /></span></code></pre>
|
|
154
|
+
</details>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<p>
|
|
158
|
+
You can add the class <code>default</code> to any button to apply additional styling,
|
|
159
|
+
useful when communicating to the user what default action would happen in the active window if
|
|
160
|
+
the <kbd>Enter</kbd> key was pressed on Windows 98.
|
|
161
|
+
</p>
|
|
162
|
+
|
|
163
|
+
<div class="example">
|
|
164
|
+
<button class="default">OK</button>
|
|
165
|
+
<details>
|
|
166
|
+
<summary>Show code</summary>
|
|
167
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"default"</span>></span>OK<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
168
|
+
</details>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<p>
|
|
172
|
+
When buttons are clicked, the raised borders become sunken.
|
|
173
|
+
The following button is simulated to be in the pressed (active) state.
|
|
174
|
+
</p>
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<div class="example">
|
|
178
|
+
<button class="active">I am being pressed</button>
|
|
179
|
+
<details>
|
|
180
|
+
<summary>Show code</summary>
|
|
181
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am being pressed<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
182
|
+
</details>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<p>
|
|
186
|
+
Disabled buttons maintain the same raised border, but have a "washed out"
|
|
187
|
+
appearance in their label.
|
|
188
|
+
</p>
|
|
189
|
+
|
|
190
|
+
<div class="example">
|
|
191
|
+
<button disabled>I cannot be clicked</button>
|
|
192
|
+
<details>
|
|
193
|
+
<summary>Show code</summary>
|
|
194
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>></span>I cannot be clicked<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
195
|
+
</details>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<p>
|
|
199
|
+
Button focus is communicated with a dotted border, set 4px within the contents of the button.
|
|
200
|
+
The following example is simulated to be focused.
|
|
201
|
+
</p>
|
|
202
|
+
|
|
203
|
+
<div class="example">
|
|
204
|
+
<button class="focused">I am focused</button>
|
|
205
|
+
<details>
|
|
206
|
+
<summary>Show code</summary>
|
|
207
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am focused<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
208
|
+
</details>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</section>
|
|
212
|
+
|
|
213
|
+
<section class="component">
|
|
214
|
+
<h3 id="checkbox">Checkbox</h3>
|
|
215
|
+
<div>
|
|
216
|
+
<blockquote>
|
|
217
|
+
A <em>check box</em> represents an independent or non-exclusive choice.
|
|
218
|
+
<footer>— Microsoft Windows User Experience p. 167</footer>
|
|
219
|
+
</blockquote>
|
|
220
|
+
|
|
221
|
+
<p>
|
|
222
|
+
Checkboxes are represented with a sunken panel, populated with a "check" icon when
|
|
223
|
+
selected, next to a label indicating the choice.
|
|
224
|
+
</p>
|
|
225
|
+
|
|
226
|
+
<p>
|
|
227
|
+
Note: You <strong>must</strong> include a corresponding label <strong>after</strong>
|
|
228
|
+
your checkbox, using the <code><label></code> element with a <code>for</code> attribute
|
|
229
|
+
pointed at the <code>id</code> of your input. This ensures the checkbox is easy to use with
|
|
230
|
+
assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key,
|
|
231
|
+
being able to click the entire label to select the box).
|
|
232
|
+
</p>
|
|
233
|
+
|
|
234
|
+
<div class="example">
|
|
235
|
+
<input type="checkbox" id="example1">
|
|
236
|
+
<label for="example1">This is a checkbox</label>
|
|
237
|
+
<details>
|
|
238
|
+
<summary>Show code</summary>
|
|
239
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>
|
|
240
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example1"</span>></span>This is a checkbox<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre>
|
|
241
|
+
</details>
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<p>
|
|
245
|
+
Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code>
|
|
246
|
+
attributes.
|
|
247
|
+
</p>
|
|
248
|
+
|
|
249
|
+
<p>
|
|
250
|
+
When grouping inputs, wrap each input in a container with the <code>field-row</code> class. This ensures
|
|
251
|
+
a consistent spacing between inputs.
|
|
252
|
+
</p>
|
|
253
|
+
|
|
254
|
+
<div class="example">
|
|
255
|
+
<div class="field-row">
|
|
256
|
+
<input checked type="checkbox" id="example2">
|
|
257
|
+
<label for="example2">I am checked</label>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="field-row">
|
|
260
|
+
<input disabled type="checkbox" id="example3">
|
|
261
|
+
<label for="example3">I am inactive</label>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="field-row">
|
|
264
|
+
<input checked disabled type="checkbox" id="example4">
|
|
265
|
+
<label for="example4">I am inactive but still checked</label>
|
|
266
|
+
</div>
|
|
267
|
+
<details>
|
|
268
|
+
<summary>Show code</summary>
|
|
269
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
270
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>></span>
|
|
271
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example2"</span>></span>I am checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
272
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
273
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
274
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>></span>
|
|
275
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example3"</span>></span>I am inactive<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
276
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
277
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
278
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4"</span>></span>
|
|
279
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example4"</span>></span>I am inactive but still checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
280
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
281
|
+
</details>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</section>
|
|
285
|
+
|
|
286
|
+
<section class="component">
|
|
287
|
+
<h3 id="option-button">OptionButton</h3>
|
|
288
|
+
<div>
|
|
289
|
+
<blockquote>
|
|
290
|
+
An <em>option button</em>, also referred to as a radio button, represents a single
|
|
291
|
+
choice within a limited set of mutually exclusive choices. That is, the user can choose only
|
|
292
|
+
one set of options.
|
|
293
|
+
|
|
294
|
+
<footer>— Microsoft Windows User Experience p. 164</footer>
|
|
295
|
+
</blockquote>
|
|
296
|
+
|
|
297
|
+
<p>
|
|
298
|
+
Option buttons can be used via the <code>radio</code> type on an input element.
|
|
299
|
+
</p>
|
|
300
|
+
|
|
301
|
+
<p>
|
|
302
|
+
Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
|
|
303
|
+
input. Just as before: when grouping inputs, wrap each input in a container with the
|
|
304
|
+
<code>field-row</code> class to ensure a consistent spacing between inputs.
|
|
305
|
+
</p>
|
|
306
|
+
|
|
307
|
+
<div class="example">
|
|
308
|
+
<div class="field-row">
|
|
309
|
+
<input id="radio5" type="radio" name="first-example">
|
|
310
|
+
<label for="radio5">Yes</label>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="field-row">
|
|
313
|
+
<input id="radio6" type="radio" name="first-example">
|
|
314
|
+
<label for="radio6">No</label>
|
|
315
|
+
</div>
|
|
316
|
+
<details>
|
|
317
|
+
<summary>Show code</summary>
|
|
318
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
319
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio5"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
|
320
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio5"</span>></span>Yes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
321
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
322
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
323
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio6"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
|
324
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio6"</span>></span>No<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
325
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
326
|
+
</details>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<p>
|
|
330
|
+
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
|
|
331
|
+
HTML attributes.
|
|
332
|
+
</p>
|
|
333
|
+
|
|
334
|
+
<div class="example">
|
|
335
|
+
<div class="field-row">
|
|
336
|
+
<input id="radio7" type="radio" name="second-example">
|
|
337
|
+
<label for="radio7">Peanut butter should be smooth</label>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="field-row">
|
|
340
|
+
<input checked disabled id="radio8" type="radio" name="second-example">
|
|
341
|
+
<label for="radio8">I understand why people like crunchy peanut butter</label>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="field-row">
|
|
344
|
+
<input disabled id="radio9" type="radio" name="second-example">
|
|
345
|
+
<label for="radio9">Crunchy peanut butter is good</label>
|
|
346
|
+
</div>
|
|
347
|
+
<details>
|
|
348
|
+
<summary>Show code</summary>
|
|
349
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
350
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio7"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
|
351
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio7"</span>></span>Peanut butter should be smooth<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
352
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
353
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
354
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio8"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
|
355
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio8"</span>></span>I understand why people like crunchy peanut butter<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
356
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
357
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
358
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio9"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
|
359
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio9"</span>></span>Crunchy peanut butter is good<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
360
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
361
|
+
</details>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
</section>
|
|
365
|
+
|
|
366
|
+
<section class="component">
|
|
367
|
+
<h3 id="group-box">GroupBox</h3>
|
|
368
|
+
<div>
|
|
369
|
+
<blockquote>
|
|
370
|
+
A <em>group box</em> is a special control you can use to organize a set of
|
|
371
|
+
controls. A group box is a rectangular frame with an optional label that surrounds
|
|
372
|
+
a set of controls.
|
|
373
|
+
|
|
374
|
+
<footer>— Microsoft Windows User Experience p. 189</footer>
|
|
375
|
+
</blockquote>
|
|
376
|
+
|
|
377
|
+
<p>
|
|
378
|
+
A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
|
|
379
|
+
It contains a sunken outer border and a raised inner border, resembling an engraved box
|
|
380
|
+
around your controls.
|
|
381
|
+
</p>
|
|
382
|
+
|
|
383
|
+
<div class="example">
|
|
384
|
+
<fieldset>
|
|
385
|
+
<div class="field-row">Select one:</div>
|
|
386
|
+
<div class="field-row">
|
|
387
|
+
<input id="radio10" type="radio" name="fieldset-example">
|
|
388
|
+
<label for="radio10">Diners</label>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="field-row">
|
|
391
|
+
<input id="radio11" type="radio" name="fieldset-example">
|
|
392
|
+
<label for="radio11">Drive-Ins</label>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="field-row">
|
|
395
|
+
<input id="radio12" type="radio" name="fieldset-example">
|
|
396
|
+
<label for="radio12">Dives</label>
|
|
397
|
+
</div>
|
|
398
|
+
</fieldset>
|
|
399
|
+
<details>
|
|
400
|
+
<summary>Show code</summary>
|
|
401
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
|
402
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>Select one:<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
403
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
404
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio10"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
|
405
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio10"</span>></span>Diners<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
406
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
407
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
408
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio11"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
|
409
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio11"</span>></span>Drive-Ins<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
410
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
411
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
412
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio12"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
|
413
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio12"</span>></span>Dives<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
414
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
415
|
+
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
|
416
|
+
</details>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<p>
|
|
420
|
+
You can provide your group with a label by placing a <code>legend</code> element
|
|
421
|
+
within the <code>fieldset</code>.
|
|
422
|
+
</p>
|
|
423
|
+
|
|
424
|
+
<div class="example">
|
|
425
|
+
<fieldset>
|
|
426
|
+
<legend>Today's mood</legend>
|
|
427
|
+
<div class="field-row">
|
|
428
|
+
<input id="radio13" type="radio" name="fieldset-example2">
|
|
429
|
+
<label for="radio13">Claire Saffitz</label>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="field-row">
|
|
432
|
+
<input id="radio14" type="radio" name="fieldset-example2">
|
|
433
|
+
<label for="radio14">Brad Leone</label>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="field-row">
|
|
436
|
+
<input id="radio15" type="radio" name="fieldset-example2">
|
|
437
|
+
<label for="radio15">Chris Morocco</label>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="field-row">
|
|
440
|
+
<input id="radio16" type="radio" name="fieldset-example2">
|
|
441
|
+
<label for="radio16">Carla Lalli Music</label>
|
|
442
|
+
</div>
|
|
443
|
+
</fieldset>
|
|
444
|
+
<details>
|
|
445
|
+
<summary>Show code</summary>
|
|
446
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
|
447
|
+
<span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Today's mood<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
|
|
448
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
449
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio13"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
|
450
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio13"</span>></span>Claire Saffitz<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
451
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
452
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
453
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio14"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
|
454
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio14"</span>></span>Brad Leone<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
455
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
456
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
457
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio15"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
|
458
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio15"</span>></span>Chris Morocco<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
459
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
460
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
461
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio16"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
|
462
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio16"</span>></span>Carla Lalli Music<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
463
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
464
|
+
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
|
465
|
+
</details>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
</section>
|
|
469
|
+
|
|
470
|
+
<section class="component">
|
|
471
|
+
<h3 id="text-box">TextBox</h3>
|
|
472
|
+
<div>
|
|
473
|
+
<blockquote>
|
|
474
|
+
A <em>text box</em> (also referred to as an edit control) is a
|
|
475
|
+
rectangular control where the user enters or edits text. It can
|
|
476
|
+
be defined to support a single line or multiple lines of text.
|
|
477
|
+
|
|
478
|
+
<footer>— Microsoft Windows User Experience p. 181</footer>
|
|
479
|
+
</blockquote>
|
|
480
|
+
|
|
481
|
+
<p>
|
|
482
|
+
Text boxes can rendered by specifying a <code>text</code> type on an
|
|
483
|
+
<code>input</code> element. As with checkboxes and radio buttons, you
|
|
484
|
+
should provide a corresponding label with a properly set <code>for</code>
|
|
485
|
+
attribute, and wrap both in a container with the <code>field-row</code> class.
|
|
486
|
+
</p>
|
|
487
|
+
|
|
488
|
+
<div class="example">
|
|
489
|
+
<div class="field-row">
|
|
490
|
+
<label for="text17">Occupation</label>
|
|
491
|
+
<input id="text17" type="text" />
|
|
492
|
+
</div>
|
|
493
|
+
<details>
|
|
494
|
+
<summary>Show code</summary>
|
|
495
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
496
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text17"</span>></span>Occupation<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
497
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text17"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
|
498
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
499
|
+
</details>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<p>
|
|
503
|
+
Additionally, you can make use of the <code>field-row-stacked</code> class
|
|
504
|
+
to position your label above the input instead of beside it.
|
|
505
|
+
</p>
|
|
506
|
+
|
|
507
|
+
<div class="example">
|
|
508
|
+
<div class="field-row-stacked" style="width: 200px">
|
|
509
|
+
<label for="text18">Address (Line 1)</label>
|
|
510
|
+
<input id="text18" type="text" />
|
|
511
|
+
</div>
|
|
512
|
+
<div class="field-row-stacked" style="width: 200px">
|
|
513
|
+
<label for="text19">Address (Line 2)</label>
|
|
514
|
+
<input id="text19" type="text" />
|
|
515
|
+
</div>
|
|
516
|
+
<details>
|
|
517
|
+
<summary>Show code</summary>
|
|
518
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
|
519
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text18"</span>></span>Address (Line 1)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
520
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text18"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
|
521
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
522
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
|
523
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text19"</span>></span>Address (Line 2)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
524
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text19"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
|
525
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
526
|
+
</details>
|
|
527
|
+
</div>
|
|
528
|
+
|
|
529
|
+
<p>
|
|
530
|
+
To support multiple lines in the user's input, use the <code>textarea</code>
|
|
531
|
+
element instead.
|
|
532
|
+
</p>
|
|
533
|
+
|
|
534
|
+
<div class="example">
|
|
535
|
+
<div class="field-row-stacked" style="width: 200px">
|
|
536
|
+
<label for="text20">Additional notes</label>
|
|
537
|
+
<textarea id="text20" rows="8"></textarea>
|
|
538
|
+
</div>
|
|
539
|
+
<details>
|
|
540
|
+
<summary>Show code</summary>
|
|
541
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
|
542
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text20"</span>></span>Additional notes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
543
|
+
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text20"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"8"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
|
544
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
545
|
+
</details>
|
|
546
|
+
</div>
|
|
547
|
+
|
|
548
|
+
<p>
|
|
549
|
+
Text boxes can also be disabled and have value with their corresponding HTML attributes.
|
|
550
|
+
</p>
|
|
551
|
+
|
|
552
|
+
<div class="example">
|
|
553
|
+
<div class="field-row">
|
|
554
|
+
<label for="text21">Favorite color</label>
|
|
555
|
+
<input id="text21" disabled type="text" value="Windows Green"/>
|
|
556
|
+
</div>
|
|
557
|
+
<details>
|
|
558
|
+
<summary>Show code</summary>
|
|
559
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
560
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text21"</span>></span>Favorite color<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
561
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text21"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Windows Green"</span>/></span>
|
|
562
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
563
|
+
</details>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
|
|
567
|
+
|
|
568
|
+
</section>
|
|
569
|
+
|
|
570
|
+
<section class="component">
|
|
571
|
+
<h3 id="slider">Slider</h3>
|
|
572
|
+
<div>
|
|
573
|
+
<blockquote>
|
|
574
|
+
A <em>slider</em>, sometimes called a trackbar control, consists of a bar that
|
|
575
|
+
defines the extent or range of the adjustment and an indicator that
|
|
576
|
+
shows the current value for the control...
|
|
577
|
+
|
|
578
|
+
<footer>— Microsoft Windows User Experience p. 146</footer>
|
|
579
|
+
</blockquote>
|
|
580
|
+
|
|
581
|
+
<p>
|
|
582
|
+
Sliders can rendered by specifying a <code>range</code> type on an
|
|
583
|
+
<code>input</code> element.
|
|
584
|
+
</p>
|
|
585
|
+
|
|
586
|
+
<div class="example">
|
|
587
|
+
<div class="field-row" style="width: 300px">
|
|
588
|
+
<label for="range22">Volume:</label>
|
|
589
|
+
<label for="range23">Low</label>
|
|
590
|
+
<input id="range23" type="range" min="1" max="11" value="5" />
|
|
591
|
+
<label for="range24">High</label>
|
|
592
|
+
</div>
|
|
593
|
+
<details>
|
|
594
|
+
<summary>Show code</summary>
|
|
595
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
|
596
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"range22"</span>></span>Volume:<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
597
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"range23"</span>></span>Low<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
598
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"range23"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"11"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"5"</span> /></span>
|
|
599
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"range24"</span>></span>High<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
600
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
601
|
+
</details>
|
|
602
|
+
</div>
|
|
603
|
+
|
|
604
|
+
<p>
|
|
605
|
+
You can make use of the <code>has-box-indicator</code> class replace the
|
|
606
|
+
default indicator with a box indicator, furthermore the slider can be wrapped
|
|
607
|
+
with a <code>div</code> using <code>is-vertical</code> to display the input vertically.
|
|
608
|
+
</p>
|
|
609
|
+
|
|
610
|
+
<p>
|
|
611
|
+
Note: To change the length of a vertical slider, the <code>input</code> width
|
|
612
|
+
and <code>div</code> height.
|
|
613
|
+
</p>
|
|
614
|
+
|
|
615
|
+
<div class="example">
|
|
616
|
+
<div class="field-row">
|
|
617
|
+
<label for="range25">Cowbell</label>
|
|
618
|
+
<div class="is-vertical">
|
|
619
|
+
<input id="range25" class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
|
|
620
|
+
</div>
|
|
621
|
+
</div>
|
|
622
|
+
<details>
|
|
623
|
+
<summary>Show code</summary>
|
|
624
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
|
625
|
+
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"range25"</span>></span>Cowbell<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
|
626
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"is-vertical"</span>></span>
|
|
627
|
+
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"range25"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-box-indicator"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">step</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span> /></span>
|
|
628
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
629
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
630
|
+
</details>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
</section>
|
|
634
|
+
|
|
635
|
+
<section class="component">
|
|
636
|
+
<h3 id="dropdown">Dropdown</h3>
|
|
637
|
+
<div>
|
|
638
|
+
<blockquote>
|
|
639
|
+
A <em>drop-down list box</em> allows the selection of only a
|
|
640
|
+
single item from a list. In its closed state, the control displays
|
|
641
|
+
the current value for the control. The user opens the list to change
|
|
642
|
+
the value.
|
|
643
|
+
|
|
644
|
+
<footer>
|
|
645
|
+
— Microsoft Windows User Experience p. 175
|
|
646
|
+
</footer>
|
|
647
|
+
</blockquote>
|
|
648
|
+
|
|
649
|
+
<p>
|
|
650
|
+
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
|
|
651
|
+
elements.
|
|
652
|
+
</p>
|
|
653
|
+
|
|
654
|
+
<div class="example">
|
|
655
|
+
<select>
|
|
656
|
+
<option>5 - Incredible!</option>
|
|
657
|
+
<option>4 - Great!</option>
|
|
658
|
+
<option>3 - Pretty good</option>
|
|
659
|
+
<option>2 - Not so great</option>
|
|
660
|
+
<option>1 - Unfortunate</option>
|
|
661
|
+
</select>
|
|
662
|
+
<details>
|
|
663
|
+
<summary>Show code</summary>
|
|
664
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
|
665
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
666
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
667
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
668
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
669
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
670
|
+
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
|
671
|
+
</details>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
<p>
|
|
675
|
+
By default, the first option will be selected. You can change this by
|
|
676
|
+
giving one of your <code>option</code> elements the <code>selected</code>
|
|
677
|
+
attribute.
|
|
678
|
+
</p>
|
|
679
|
+
|
|
680
|
+
<div class="example">
|
|
681
|
+
<select>
|
|
682
|
+
<option>5 - Incredible!</option>
|
|
683
|
+
<option>4 - Great!</option>
|
|
684
|
+
<option selected>3 - Pretty good</option>
|
|
685
|
+
<option>2 - Not so great</option>
|
|
686
|
+
<option>1 - Unfortunate</option>
|
|
687
|
+
</select>
|
|
688
|
+
<details>
|
|
689
|
+
<summary>Show code</summary>
|
|
690
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
|
691
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
692
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
693
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
694
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
695
|
+
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
696
|
+
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
|
697
|
+
</details>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
</section>
|
|
701
|
+
|
|
702
|
+
<h3 id="window">Window</h3>
|
|
703
|
+
<p>
|
|
704
|
+
The following components illustrate how to build complete windows using
|
|
705
|
+
98.css.
|
|
706
|
+
</p>
|
|
707
|
+
|
|
708
|
+
<section class="component">
|
|
709
|
+
<h4 id="title-bar">Title Bar</h4>
|
|
710
|
+
<div>
|
|
711
|
+
<blockquote>
|
|
712
|
+
At the top edge of the window, inside its border, is the title bar
|
|
713
|
+
(also reffered to as the caption or caption bar), which extends across
|
|
714
|
+
the width of the window. The title bar identifies the contents of the
|
|
715
|
+
window.
|
|
716
|
+
|
|
717
|
+
<footer>
|
|
718
|
+
— Microsoft Windows User Experience p. 118
|
|
719
|
+
</footer>
|
|
720
|
+
</blockquote>
|
|
721
|
+
|
|
722
|
+
<blockquote>
|
|
723
|
+
Include command buttons associated with the common commands of the
|
|
724
|
+
primary window in the title bar. These buttons act as shortcuts to specific
|
|
725
|
+
window commands.
|
|
726
|
+
|
|
727
|
+
<footer>
|
|
728
|
+
— Microsoft Windows User Experience p. 122
|
|
729
|
+
</footer>
|
|
730
|
+
</blockquote>
|
|
731
|
+
|
|
732
|
+
<p>
|
|
733
|
+
You can build a complete title bar by making use of three classes,
|
|
734
|
+
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
|
|
735
|
+
</p>
|
|
736
|
+
|
|
737
|
+
<div class="example">
|
|
738
|
+
<div class="title-bar">
|
|
739
|
+
<div class="title-bar-text">A Title Bar</div>
|
|
740
|
+
<div class="title-bar-controls">
|
|
741
|
+
<button aria-label="Close"></button>
|
|
742
|
+
</div>
|
|
743
|
+
</div>
|
|
744
|
+
<details>
|
|
745
|
+
<summary>Show code</summary>
|
|
746
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
747
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
748
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
749
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
750
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
751
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
752
|
+
</details>
|
|
753
|
+
</div>
|
|
754
|
+
|
|
755
|
+
<p>
|
|
756
|
+
We make use of <code>aria-label</code> to render the Close button, to let
|
|
757
|
+
assistive technologies know the intent of this button. You may also use
|
|
758
|
+
"Minimize", "Maximize", "Restore" and "Help" like so:
|
|
759
|
+
</p>
|
|
760
|
+
|
|
761
|
+
<div class="example">
|
|
762
|
+
<div class="title-bar">
|
|
763
|
+
<div class="title-bar-text">A Title Bar</div>
|
|
764
|
+
<div class="title-bar-controls">
|
|
765
|
+
<button aria-label="Minimize"></button>
|
|
766
|
+
<button aria-label="Maximize"></button>
|
|
767
|
+
<button aria-label="Close"></button>
|
|
768
|
+
</div>
|
|
769
|
+
</div>
|
|
770
|
+
|
|
771
|
+
<br />
|
|
772
|
+
|
|
773
|
+
<div class="title-bar">
|
|
774
|
+
<div class="title-bar-text">A Maximized Title Bar</div>
|
|
775
|
+
<div class="title-bar-controls">
|
|
776
|
+
<button aria-label="Minimize"></button>
|
|
777
|
+
<button aria-label="Restore"></button>
|
|
778
|
+
<button aria-label="Close"></button>
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
781
|
+
|
|
782
|
+
<br />
|
|
783
|
+
|
|
784
|
+
<div class="title-bar">
|
|
785
|
+
<div class="title-bar-text">A Helpful Bar</div>
|
|
786
|
+
<div class="title-bar-controls">
|
|
787
|
+
<button aria-label="Help"></button>
|
|
788
|
+
<button aria-label="Close"></button>
|
|
789
|
+
</div>
|
|
790
|
+
</div>
|
|
791
|
+
<details>
|
|
792
|
+
<summary>Show code</summary>
|
|
793
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
794
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
795
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
796
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
797
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
798
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
799
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
800
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
801
|
+
|
|
802
|
+
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
|
803
|
+
|
|
804
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
805
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Maximized Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
806
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
807
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
808
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Restore"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
809
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
810
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
811
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
812
|
+
|
|
813
|
+
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
|
814
|
+
|
|
815
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
816
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Helpful Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
817
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
818
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Help"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
819
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
820
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
821
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
822
|
+
</details>
|
|
823
|
+
</div>
|
|
824
|
+
|
|
825
|
+
<p>
|
|
826
|
+
Each <code>aria-label</code> also has a corresponding styling class to render the title bar buttons,
|
|
827
|
+
to let the <code>aria-label</code> text be in other languages without causing rendering, accessibility, or localization issues.
|
|
828
|
+
</p>
|
|
829
|
+
|
|
830
|
+
<div class="example">
|
|
831
|
+
<div class="title-bar">
|
|
832
|
+
<div class="title-bar-text">A Title Bar using Button Styling Classes</div>
|
|
833
|
+
<div class="title-bar-controls">
|
|
834
|
+
<button aria-label="Any Text" class="minimize"></button>
|
|
835
|
+
<button aria-label="Any Text" class="maximize"></button>
|
|
836
|
+
<button aria-label="Any Text" class="close"></button>
|
|
837
|
+
</div>
|
|
838
|
+
</div>
|
|
839
|
+
|
|
840
|
+
<br />
|
|
841
|
+
|
|
842
|
+
<div class="title-bar">
|
|
843
|
+
<div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div>
|
|
844
|
+
<div class="title-bar-controls">
|
|
845
|
+
<button aria-label="Any Text" class="minimize"></button>
|
|
846
|
+
<button aria-label="Any Text" class="restore"></button>
|
|
847
|
+
<button aria-label="Any Text" class="close"></button>
|
|
848
|
+
</div>
|
|
849
|
+
</div>
|
|
850
|
+
|
|
851
|
+
<br />
|
|
852
|
+
|
|
853
|
+
<div class="title-bar">
|
|
854
|
+
<div class="title-bar-text">A Helpful Bar using Button Styling Classes</div>
|
|
855
|
+
<div class="title-bar-controls">
|
|
856
|
+
<button aria-label="Any Text" class="help"></button>
|
|
857
|
+
<button aria-label="Any Text" class="close"></button>
|
|
858
|
+
</div>
|
|
859
|
+
</div>
|
|
860
|
+
<details>
|
|
861
|
+
<summary>Show code</summary>
|
|
862
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
863
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar using Button Styling Classes<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
864
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
865
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
866
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
867
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
868
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
869
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
870
|
+
|
|
871
|
+
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
|
872
|
+
|
|
873
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
874
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Maximized Title Bar using Button Styling Classes<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
875
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
876
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
877
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"restore"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
878
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
879
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
880
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
881
|
+
|
|
882
|
+
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
|
883
|
+
|
|
884
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
885
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Helpful Bar using Button Styling Classes<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
886
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
887
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"help"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
888
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Any Text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
889
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
890
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
891
|
+
</details>
|
|
892
|
+
</div>
|
|
893
|
+
|
|
894
|
+
<p>
|
|
895
|
+
Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
|
|
896
|
+
</p>
|
|
897
|
+
|
|
898
|
+
<div class="example">
|
|
899
|
+
<div class="title-bar">
|
|
900
|
+
<div class="title-bar-text">A Title Bar with Maximize disabled</div>
|
|
901
|
+
<div class="title-bar-controls">
|
|
902
|
+
<button aria-label="Minimize"></button>
|
|
903
|
+
<button aria-label="Maximize" disabled></button>
|
|
904
|
+
<button aria-label="Close"></button>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
907
|
+
<details>
|
|
908
|
+
<summary>Show code</summary>
|
|
909
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
910
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar with Maximize disabled<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
911
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
912
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
913
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
914
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
915
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
916
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
917
|
+
</details>
|
|
918
|
+
</div>
|
|
919
|
+
|
|
920
|
+
<p>
|
|
921
|
+
You can make a title bar "inactive" by adding <code>inactive</code> class,
|
|
922
|
+
useful when making more than one window.
|
|
923
|
+
</p>
|
|
924
|
+
<div class="example">
|
|
925
|
+
<div class="title-bar inactive">
|
|
926
|
+
<div class="title-bar-text">An inactive title bar</div>
|
|
927
|
+
<div class="title-bar-controls">
|
|
928
|
+
<button aria-label="Close"></button>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
<details>
|
|
932
|
+
<summary>Show code</summary>
|
|
933
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar inactive"</span>></span>
|
|
934
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>An inactive title bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
935
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
936
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
937
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
938
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
939
|
+
</details>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</section>
|
|
943
|
+
|
|
944
|
+
<section class="component">
|
|
945
|
+
<h4 id="window-contents">Window contents</h4>
|
|
946
|
+
<div>
|
|
947
|
+
<blockquote>
|
|
948
|
+
Every window has a boundary that defines its shape.
|
|
949
|
+
|
|
950
|
+
<footer>
|
|
951
|
+
— Microsoft Windows User Experience p. 118
|
|
952
|
+
</footer>
|
|
953
|
+
</blockquote>
|
|
954
|
+
|
|
955
|
+
<p>
|
|
956
|
+
To give our title bar a home, we make use of the <code>window</code>
|
|
957
|
+
class. This provides a raised outer and inner border, as well as some
|
|
958
|
+
padding. We can freely resize the window by specifying a width in the
|
|
959
|
+
container style.
|
|
960
|
+
</p>
|
|
961
|
+
|
|
962
|
+
<div class="example">
|
|
963
|
+
<div class="window" style="width: 300px">
|
|
964
|
+
<div class="title-bar">
|
|
965
|
+
<div class="title-bar-text">A Complete Window</div>
|
|
966
|
+
<div class="title-bar-controls">
|
|
967
|
+
<button aria-label="Minimize"></button>
|
|
968
|
+
<button aria-label="Maximize"></button>
|
|
969
|
+
<button aria-label="Close"></button>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
<details>
|
|
974
|
+
<summary>Show code</summary>
|
|
975
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
|
976
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
977
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Complete Window<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
978
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
979
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
980
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
981
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
982
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
983
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
984
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
985
|
+
</details>
|
|
986
|
+
</div>
|
|
987
|
+
|
|
988
|
+
<p>
|
|
989
|
+
To draw the contents of the window, we use the <code>window-body</code>
|
|
990
|
+
class under the title bar.
|
|
991
|
+
</p>
|
|
992
|
+
|
|
993
|
+
<div class="example">
|
|
994
|
+
<div class="window" style="width: 300px">
|
|
995
|
+
<div class="title-bar">
|
|
996
|
+
<div class="title-bar-text">A Window With Stuff In It</div>
|
|
997
|
+
<div class="title-bar-controls">
|
|
998
|
+
<button aria-label="Minimize"></button>
|
|
999
|
+
<button aria-label="Maximize"></button>
|
|
1000
|
+
<button aria-label="Close"></button>
|
|
1001
|
+
</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="window-body">
|
|
1004
|
+
<p>There's so much room for activities!</p>
|
|
1005
|
+
</div>
|
|
1006
|
+
</div>
|
|
1007
|
+
<details>
|
|
1008
|
+
<summary>Show code</summary>
|
|
1009
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
|
1010
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
1011
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Window With Stuff In It<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1012
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
|
1013
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1014
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1015
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1016
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1017
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1018
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1019
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's so much room for activities!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1020
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1021
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1022
|
+
</details>
|
|
1023
|
+
</div>
|
|
1024
|
+
</div>
|
|
1025
|
+
</section>
|
|
1026
|
+
|
|
1027
|
+
<section class="component">
|
|
1028
|
+
<h4 id="status-bar">Status Bar</h4>
|
|
1029
|
+
<div>
|
|
1030
|
+
<blockquote>
|
|
1031
|
+
A status bar is a special area within a window, typically the bottom, that displays information
|
|
1032
|
+
about the current state of what is being viewed in the window or any other contextual information, such as keyboard
|
|
1033
|
+
state.
|
|
1034
|
+
|
|
1035
|
+
<footer>
|
|
1036
|
+
— Microsoft Windows User Experience p. 146
|
|
1037
|
+
</footer>
|
|
1038
|
+
</blockquote>
|
|
1039
|
+
|
|
1040
|
+
<p>
|
|
1041
|
+
You can render a status bar with the <code>status-bar</code> class,
|
|
1042
|
+
and <code>status-bar-field</code> for every child text element.
|
|
1043
|
+
</p>
|
|
1044
|
+
|
|
1045
|
+
<div class="example">
|
|
1046
|
+
<div class="window" style="width: 320px">
|
|
1047
|
+
<div class="title-bar">
|
|
1048
|
+
<div class="title-bar-text">A Window With A Status Bar</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
<div class="window-body">
|
|
1051
|
+
<p> There are just so many possibilities:</p>
|
|
1052
|
+
<ul>
|
|
1053
|
+
<li>A Task Manager</li>
|
|
1054
|
+
<li>A Notepad</li>
|
|
1055
|
+
<li>Or even a File Explorer!</li>
|
|
1056
|
+
</ul>
|
|
1057
|
+
</div>
|
|
1058
|
+
<div class="status-bar">
|
|
1059
|
+
<p class="status-bar-field">Press F1 for help</p>
|
|
1060
|
+
<p class="status-bar-field">Slide 1</p>
|
|
1061
|
+
<p class="status-bar-field">CPU Usage: 14%</p>
|
|
1062
|
+
</div>
|
|
1063
|
+
</div>
|
|
1064
|
+
<details>
|
|
1065
|
+
<summary>Show code</summary>
|
|
1066
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 320px"</span>></span>
|
|
1067
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
|
1068
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Window With A Status Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1069
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1070
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1071
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span> There are just so many possibilities:<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1072
|
+
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
|
1073
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>A Task Manager<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1074
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>A Notepad<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1075
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Or even a File Explorer!<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1076
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
|
1077
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1078
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"status-bar"</span>></span>
|
|
1079
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"status-bar-field"</span>></span>Press F1 for help<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1080
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"status-bar-field"</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1081
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"status-bar-field"</span>></span>CPU Usage: 14%<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1082
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1083
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1084
|
+
</details>
|
|
1085
|
+
</div>
|
|
1086
|
+
|
|
1087
|
+
|
|
1088
|
+
</section>
|
|
1089
|
+
|
|
1090
|
+
<section class="component">
|
|
1091
|
+
<h3 id="tree-view">TreeView</h3>
|
|
1092
|
+
<div>
|
|
1093
|
+
<blockquote>
|
|
1094
|
+
A <em>tree view control</em> is a special list box control
|
|
1095
|
+
that displays a set of objects as an indented outline based
|
|
1096
|
+
on their logical hierarchical relationship.
|
|
1097
|
+
|
|
1098
|
+
<footer>
|
|
1099
|
+
— Microsoft Windows User Experience p. 178
|
|
1100
|
+
</footer>
|
|
1101
|
+
</blockquote>
|
|
1102
|
+
|
|
1103
|
+
<p>
|
|
1104
|
+
To render a tree view, use an <code>ul</code> element with the
|
|
1105
|
+
<code>tree-view</code> class. The children of this list (<code>li</code>
|
|
1106
|
+
elements), can contain whatever you'd like.
|
|
1107
|
+
</p>
|
|
1108
|
+
|
|
1109
|
+
<div class="example">
|
|
1110
|
+
<ul class="tree-view">
|
|
1111
|
+
<li>We can put</li>
|
|
1112
|
+
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
|
|
1113
|
+
<li>We want in here</li>
|
|
1114
|
+
</ul>
|
|
1115
|
+
<details>
|
|
1116
|
+
<summary>Show code</summary>
|
|
1117
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
|
1118
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We can put<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1119
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: purple"</span>></span>✨ Whatever ✨<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1120
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We want in here<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1121
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
1122
|
+
</details>
|
|
1123
|
+
</div>
|
|
1124
|
+
|
|
1125
|
+
<p>
|
|
1126
|
+
To make this a tree, we can nest further <code>ul</code> elements
|
|
1127
|
+
(no class needed on these). This will provide them with a nice dotted
|
|
1128
|
+
border and indentation to illustrate the structure of the tree.
|
|
1129
|
+
</p>
|
|
1130
|
+
<p>
|
|
1131
|
+
To create expandable sections, wrap child lists inside of
|
|
1132
|
+
<code>details</code> elements.
|
|
1133
|
+
</p>
|
|
1134
|
+
|
|
1135
|
+
<div class="example">
|
|
1136
|
+
<ul class="tree-view">
|
|
1137
|
+
<li>Table of Contents</li>
|
|
1138
|
+
<li>What is web development?</li>
|
|
1139
|
+
<li>
|
|
1140
|
+
CSS
|
|
1141
|
+
<ul>
|
|
1142
|
+
<li>Selectors</li>
|
|
1143
|
+
<li>Specificity</li>
|
|
1144
|
+
<li>Properties</li>
|
|
1145
|
+
</ul>
|
|
1146
|
+
</li>
|
|
1147
|
+
<li>
|
|
1148
|
+
<details open>
|
|
1149
|
+
<summary>JavaScript</summary>
|
|
1150
|
+
<ul>
|
|
1151
|
+
<li>Avoid at all costs</li>
|
|
1152
|
+
<li>
|
|
1153
|
+
<details>
|
|
1154
|
+
<summary>Unless</summary>
|
|
1155
|
+
<ul>
|
|
1156
|
+
<li>Avoid</li>
|
|
1157
|
+
<li>
|
|
1158
|
+
<details>
|
|
1159
|
+
<summary>At</summary>
|
|
1160
|
+
<ul>
|
|
1161
|
+
<li>Avoid</li>
|
|
1162
|
+
<li>At</li>
|
|
1163
|
+
<li>All</li>
|
|
1164
|
+
<li>Cost</li>
|
|
1165
|
+
</ul>
|
|
1166
|
+
</details>
|
|
1167
|
+
</li>
|
|
1168
|
+
<li>All</li>
|
|
1169
|
+
<li>Cost</li>
|
|
1170
|
+
</ul>
|
|
1171
|
+
</details>
|
|
1172
|
+
</li>
|
|
1173
|
+
</ul>
|
|
1174
|
+
</details>
|
|
1175
|
+
</li>
|
|
1176
|
+
<li>HTML</li>
|
|
1177
|
+
<li>Special Thanks</li>
|
|
1178
|
+
</ul>
|
|
1179
|
+
<details>
|
|
1180
|
+
<summary>Show code</summary>
|
|
1181
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
|
1182
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Table of Contents<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1183
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>What is web development?<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1184
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
|
1185
|
+
CSS
|
|
1186
|
+
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
|
1187
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Selectors<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1188
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Specificity<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1189
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Properties<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1190
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
|
1191
|
+
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1192
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
|
1193
|
+
<span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">open</span>></span>
|
|
1194
|
+
<span class="hljs-tag"><<span class="hljs-name">summary</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name">summary</span>></span>
|
|
1195
|
+
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
|
1196
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid at all costs<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1197
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
|
1198
|
+
<span class="hljs-tag"><<span class="hljs-name">details</span>></span>
|
|
1199
|
+
<span class="hljs-tag"><<span class="hljs-name">summary</span>></span>Unless<span class="hljs-tag"></<span class="hljs-name">summary</span>></span>
|
|
1200
|
+
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
|
1201
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1202
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
|
1203
|
+
<span class="hljs-tag"><<span class="hljs-name">details</span>></span>
|
|
1204
|
+
<span class="hljs-tag"><<span class="hljs-name">summary</span>></span>At<span class="hljs-tag"></<span class="hljs-name">summary</span>></span>
|
|
1205
|
+
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
|
1206
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1207
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>At<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1208
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>All<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1209
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Cost<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1210
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
|
1211
|
+
<span class="hljs-tag"></<span class="hljs-name">details</span>></span>
|
|
1212
|
+
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1213
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>All<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1214
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Cost<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1215
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
|
1216
|
+
<span class="hljs-tag"></<span class="hljs-name">details</span>></span>
|
|
1217
|
+
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1218
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
|
1219
|
+
<span class="hljs-tag"></<span class="hljs-name">details</span>></span>
|
|
1220
|
+
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1221
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1222
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Special Thanks<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1223
|
+
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
1224
|
+
</details>
|
|
1225
|
+
</div>
|
|
1226
|
+
</div>
|
|
1227
|
+
</section>
|
|
1228
|
+
|
|
1229
|
+
<section class="component">
|
|
1230
|
+
<h3 id="tabs">Tabs</h3>
|
|
1231
|
+
<div>
|
|
1232
|
+
<blockquote>
|
|
1233
|
+
A <em>tab control</em> is analogous to a divider in a file cabinet or notebook.
|
|
1234
|
+
You can use this control to define multiple logical pages or sections of information within the same window.
|
|
1235
|
+
|
|
1236
|
+
<footer>
|
|
1237
|
+
— Microsoft Windows User Experience p. 193
|
|
1238
|
+
</footer>
|
|
1239
|
+
</blockquote>
|
|
1240
|
+
|
|
1241
|
+
<p>
|
|
1242
|
+
To render a tab list, use a <code>menu</code> element with the
|
|
1243
|
+
<code>[role=tablist]</code> attribute. The children of this menu (<code>li</code>
|
|
1244
|
+
elements), should get a <code>[role=tab]</code> attribute.
|
|
1245
|
+
</p>
|
|
1246
|
+
|
|
1247
|
+
<p>
|
|
1248
|
+
Tabs should be managed by adding custom javascript code.
|
|
1249
|
+
All you need is to add the <code>[aria-selected=true]</code> attribute to the active tab.
|
|
1250
|
+
</p>
|
|
1251
|
+
|
|
1252
|
+
<div class="example">
|
|
1253
|
+
<div class="window-body">
|
|
1254
|
+
<p>Hello, world!</p>
|
|
1255
|
+
|
|
1256
|
+
<menu role="tablist">
|
|
1257
|
+
<li role="tab" aria-selected="true"><a href="#tabs">Desktop</a></li>
|
|
1258
|
+
<li role="tab"><a href="#tabs">My computer</a></li>
|
|
1259
|
+
<li role="tab"><a href="#tabs">Control panel</a></li>
|
|
1260
|
+
<li role="tab"><a href="#tabs">Devices manager</a></li>
|
|
1261
|
+
<li role="tab"><a href="#tabs">Hardware profiles</a></li>
|
|
1262
|
+
<li role="tab"><a href="#tabs">Performance</a></li>
|
|
1263
|
+
</menu>
|
|
1264
|
+
<div class="window" role="tabpanel">
|
|
1265
|
+
<div class="window-body">
|
|
1266
|
+
<p>the tab content</p>
|
|
1267
|
+
</div>
|
|
1268
|
+
</div>
|
|
1269
|
+
</div>
|
|
1270
|
+
<details>
|
|
1271
|
+
<summary>Show code</summary>
|
|
1272
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1273
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1274
|
+
|
|
1275
|
+
<span class="hljs-tag"><<span class="hljs-name">menu</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tablist"</span>></span>
|
|
1276
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span> <span class="hljs-attr">aria-selected</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Desktop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1277
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>My computer<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1278
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Control panel<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1279
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Devices manager<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1280
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Hardware profiles<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1281
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Performance<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1282
|
+
<span class="hljs-tag"></<span class="hljs-name">menu</span>></span>
|
|
1283
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tabpanel"</span>></span>
|
|
1284
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1285
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>the tab content<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1286
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1287
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1288
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1289
|
+
</details>
|
|
1290
|
+
</div>
|
|
1291
|
+
|
|
1292
|
+
<p>
|
|
1293
|
+
To create multirows tabs, add a <code>multirows</code>
|
|
1294
|
+
class to the <code>menu</code> tag.
|
|
1295
|
+
</p>
|
|
1296
|
+
|
|
1297
|
+
<div class="example">
|
|
1298
|
+
<div class="window-body">
|
|
1299
|
+
<p>Hello, world!</p>
|
|
1300
|
+
|
|
1301
|
+
<menu role="tablist" class="multirows">
|
|
1302
|
+
<li role="tab"><a href="#tabs">Desktop</a></li>
|
|
1303
|
+
<li role="tab"><a href="#tabs">My computer</a></li>
|
|
1304
|
+
<li role="tab"><a href="#tabs">Control panel</a></li>
|
|
1305
|
+
<li role="tab"><a href="#tabs">Devices manager</a></li>
|
|
1306
|
+
<li role="tab"><a href="#tabs">Hardware profiles</a></li>
|
|
1307
|
+
<li role="tab"><a href="#tabs">Performance</a></li>
|
|
1308
|
+
</menu>
|
|
1309
|
+
<menu role="tablist" class="multirows">
|
|
1310
|
+
<li role="tab"><a href="#tabs">Users</a></li>
|
|
1311
|
+
<li role="tab"><a href="#tabs">Network</a></li>
|
|
1312
|
+
<li role="tab"><a href="#tabs">Programs</a></li>
|
|
1313
|
+
<li role="tab"><a href="#tabs">Services</a></li>
|
|
1314
|
+
<li role="tab"><a href="#tabs">Resources</a></li>
|
|
1315
|
+
<li role="tab"><a href="#tabs">Advanced</a></li>
|
|
1316
|
+
</menu>
|
|
1317
|
+
<div class="window" role="tabpanel">
|
|
1318
|
+
<div class="window-body">
|
|
1319
|
+
<p>the tab content</p>
|
|
1320
|
+
</div>
|
|
1321
|
+
</div>
|
|
1322
|
+
</div>
|
|
1323
|
+
<details>
|
|
1324
|
+
<summary>Show code</summary>
|
|
1325
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1326
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello, world!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1327
|
+
|
|
1328
|
+
<span class="hljs-tag"><<span class="hljs-name">menu</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tablist"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"multirows"</span>></span>
|
|
1329
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Desktop<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1330
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>My computer<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1331
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Control panel<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1332
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Devices manager<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1333
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Hardware profiles<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1334
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Performance<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1335
|
+
<span class="hljs-tag"></<span class="hljs-name">menu</span>></span>
|
|
1336
|
+
<span class="hljs-tag"><<span class="hljs-name">menu</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tablist"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"multirows"</span>></span>
|
|
1337
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Users<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1338
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Network<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1339
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Programs<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1340
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Services<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1341
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Resources<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1342
|
+
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tab"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#tabs"</span>></span>Advanced<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
|
1343
|
+
<span class="hljs-tag"></<span class="hljs-name">menu</span>></span>
|
|
1344
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"tabpanel"</span>></span>
|
|
1345
|
+
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
|
1346
|
+
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>the tab content<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1347
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1348
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1349
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1350
|
+
</details>
|
|
1351
|
+
</div>
|
|
1352
|
+
</div>
|
|
1353
|
+
</section>
|
|
1354
|
+
<section class="component">
|
|
1355
|
+
<h3 id="table-view">TableView</h3>
|
|
1356
|
+
<div>
|
|
1357
|
+
<p>
|
|
1358
|
+
To render a table view, use a table element. Wrap it with a div element with <code>sunken-panel</code> class to provide proper border and overflow container.
|
|
1359
|
+
</p>
|
|
1360
|
+
<p>
|
|
1361
|
+
With a bit of extra scripting you can make table view interactive. Give <code>interactive</code> class to
|
|
1362
|
+
table element to show pointer cursor when hovering over body rows. Table rows can be given
|
|
1363
|
+
<code>highlighted</code> class to appear selected.
|
|
1364
|
+
</p>
|
|
1365
|
+
|
|
1366
|
+
<div class="example">
|
|
1367
|
+
<div class="sunken-panel" style="height: 120px; width: 240px;">
|
|
1368
|
+
<table class="interactive">
|
|
1369
|
+
<thead>
|
|
1370
|
+
<tr>
|
|
1371
|
+
<th>Name</th>
|
|
1372
|
+
<th>Version</th>
|
|
1373
|
+
<th>Company</th>
|
|
1374
|
+
</tr>
|
|
1375
|
+
</thead>
|
|
1376
|
+
<tbody>
|
|
1377
|
+
<tr>
|
|
1378
|
+
<td>MySQL ODBC 3.51 Driver</td>
|
|
1379
|
+
<td>3.51.11.00</td>
|
|
1380
|
+
<td>MySQL AB</td>
|
|
1381
|
+
</tr>
|
|
1382
|
+
<tr>
|
|
1383
|
+
<td>SQL Server</td>
|
|
1384
|
+
<td>3.70.06.23</td>
|
|
1385
|
+
<td>Microsoft Corporation</td>
|
|
1386
|
+
</tr>
|
|
1387
|
+
<tr>
|
|
1388
|
+
<td>SQL Server</td>
|
|
1389
|
+
<td>3.70.06.23</td>
|
|
1390
|
+
<td>Microsoft Corporation</td>
|
|
1391
|
+
</tr>
|
|
1392
|
+
<tr>
|
|
1393
|
+
<td>SQL Server</td>
|
|
1394
|
+
<td>3.70.06.23</td>
|
|
1395
|
+
<td>Microsoft Corporation</td>
|
|
1396
|
+
</tr>
|
|
1397
|
+
<tr>
|
|
1398
|
+
<td>SQL Server</td>
|
|
1399
|
+
<td>3.70.06.23</td>
|
|
1400
|
+
<td>Microsoft Corporation</td>
|
|
1401
|
+
</tr>
|
|
1402
|
+
<tr>
|
|
1403
|
+
<td>SQL Server</td>
|
|
1404
|
+
<td>3.70.06.23</td>
|
|
1405
|
+
<td>Microsoft Corporation</td>
|
|
1406
|
+
</tr>
|
|
1407
|
+
<tr>
|
|
1408
|
+
<td>SQL Server</td>
|
|
1409
|
+
<td>3.70.06.23</td>
|
|
1410
|
+
<td>Microsoft Corporation</td>
|
|
1411
|
+
</tr>
|
|
1412
|
+
<tr>
|
|
1413
|
+
<td>SQL Server</td>
|
|
1414
|
+
<td>3.70.06.23</td>
|
|
1415
|
+
<td>Microsoft Corporation</td>
|
|
1416
|
+
</tr>
|
|
1417
|
+
<tr>
|
|
1418
|
+
<td>SQL Server</td>
|
|
1419
|
+
<td>3.70.06.23</td>
|
|
1420
|
+
<td>Microsoft Corporation</td>
|
|
1421
|
+
</tr>
|
|
1422
|
+
<tr>
|
|
1423
|
+
<td>SQL Server</td>
|
|
1424
|
+
<td>3.70.06.23</td>
|
|
1425
|
+
<td>Microsoft Corporation</td>
|
|
1426
|
+
</tr>
|
|
1427
|
+
</tbody>
|
|
1428
|
+
</table>
|
|
1429
|
+
</div>
|
|
1430
|
+
<script>
|
|
1431
|
+
document.querySelectorAll('table.interactive').forEach(element => {
|
|
1432
|
+
element.addEventListener('click', (event) => {
|
|
1433
|
+
const highlightedClass = 'highlighted';
|
|
1434
|
+
const isRow = element => element.tagName === 'TR' && element.parentElement.tagName === 'TBODY';
|
|
1435
|
+
const newlySelectedRow = event.composedPath().find(isRow);
|
|
1436
|
+
const previouslySelectedRow = Array.from(newlySelectedRow.parentElement.children).filter(isRow).find(element => element.classList.contains(highlightedClass));
|
|
1437
|
+
if(previouslySelectedRow){
|
|
1438
|
+
previouslySelectedRow.classList.toggle(highlightedClass);
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
if (newlySelectedRow) {
|
|
1442
|
+
newlySelectedRow.classList.toggle(highlightedClass);
|
|
1443
|
+
}
|
|
1444
|
+
})
|
|
1445
|
+
});
|
|
1446
|
+
</script>
|
|
1447
|
+
<details>
|
|
1448
|
+
<summary>Show code</summary>
|
|
1449
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sunken-panel"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 120px; width: 240px;"</span>></span>
|
|
1450
|
+
<span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"interactive"</span>></span>
|
|
1451
|
+
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
|
1452
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1453
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1454
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Version<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1455
|
+
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Company<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1456
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1457
|
+
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
|
1458
|
+
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
|
1459
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1460
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>MySQL ODBC 3.51 Driver<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1461
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.51.11.00<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1462
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>MySQL AB<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1463
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1464
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1465
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1466
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1467
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1468
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1469
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1470
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1471
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1472
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1473
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1474
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1475
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1476
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1477
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1478
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1479
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1480
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1481
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1482
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1483
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1484
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1485
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1486
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1487
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1488
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1489
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1490
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1491
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1492
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1493
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1494
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1495
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1496
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1497
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1498
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1499
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1500
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1501
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1502
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1503
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1504
|
+
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1505
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>SQL Server<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1506
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>3.70.06.23<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1507
|
+
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Microsoft Corporation<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
|
1508
|
+
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1509
|
+
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
|
1510
|
+
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
|
|
1511
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
1512
|
+
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
|
1513
|
+
<span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'table.interactive'</span>).forEach(<span class="hljs-function"><span class="hljs-params">element</span> =></span> {
|
|
1514
|
+
element.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
|
|
1515
|
+
<span class="hljs-keyword">const</span> highlightedClass = <span class="hljs-string">'highlighted'</span>;
|
|
1516
|
+
<span class="hljs-keyword">const</span> isRow = <span class="hljs-function"><span class="hljs-params">element</span> =></span> element.tagName === <span class="hljs-string">'TR'</span> && element.parentElement.tagName === <span class="hljs-string">'TBODY'</span>;
|
|
1517
|
+
<span class="hljs-keyword">const</span> newlySelectedRow = event.composedPath().find(isRow);
|
|
1518
|
+
<span class="hljs-keyword">const</span> previouslySelectedRow = <span class="hljs-built_in">Array</span>.from(newlySelectedRow.parentElement.children).filter(isRow).find(<span class="hljs-function"><span class="hljs-params">element</span> =></span> element.classList.contains(highlightedClass));
|
|
1519
|
+
<span class="hljs-keyword">if</span>(previouslySelectedRow){
|
|
1520
|
+
previouslySelectedRow.classList.toggle(highlightedClass);
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
<span class="hljs-keyword">if</span> (newlySelectedRow) {
|
|
1524
|
+
newlySelectedRow.classList.toggle(highlightedClass);
|
|
1525
|
+
}
|
|
1526
|
+
})
|
|
1527
|
+
});
|
|
1528
|
+
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
1529
|
+
</details>
|
|
1530
|
+
</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
</section>
|
|
1533
|
+
|
|
1534
|
+
<section class="component">
|
|
1535
|
+
<h3 id="progress-indicator">Progress Indicator</h3>
|
|
1536
|
+
<div>
|
|
1537
|
+
<blockquote>
|
|
1538
|
+
You can use a <em>progress indicator</em>, also known as a <em>progress bar control</em>, to show the percentage of completion of a lengthy operation.
|
|
1539
|
+
|
|
1540
|
+
<footer>
|
|
1541
|
+
— Microsoft Windows User Experience p. 189
|
|
1542
|
+
</footer>
|
|
1543
|
+
</blockquote>
|
|
1544
|
+
|
|
1545
|
+
<p>
|
|
1546
|
+
There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the <code>segmented</code> class.
|
|
1547
|
+
</p>
|
|
1548
|
+
|
|
1549
|
+
<div class="example">
|
|
1550
|
+
<div class="progress-indicator">
|
|
1551
|
+
<span class="progress-indicator-bar" style="width: 40%;" />
|
|
1552
|
+
</div>
|
|
1553
|
+
<details>
|
|
1554
|
+
<summary>Show code</summary>
|
|
1555
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-indicator"</span>></span>
|
|
1556
|
+
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-indicator-bar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 40%;"</span> /></span>
|
|
1557
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1558
|
+
</details>
|
|
1559
|
+
</div>
|
|
1560
|
+
|
|
1561
|
+
<div class="example">
|
|
1562
|
+
<div class="progress-indicator segmented">
|
|
1563
|
+
<span class="progress-indicator-bar" style="width: 40%;" />
|
|
1564
|
+
</div>
|
|
1565
|
+
<details>
|
|
1566
|
+
<summary>Show code</summary>
|
|
1567
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-indicator segmented"</span>></span>
|
|
1568
|
+
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-indicator-bar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 40%;"</span> /></span>
|
|
1569
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1570
|
+
</details>
|
|
1571
|
+
</div>
|
|
1572
|
+
</div>
|
|
1573
|
+
</section>
|
|
1574
|
+
|
|
1575
|
+
<section class="component">
|
|
1576
|
+
<h3 id="field-borders">Field borders</a></li></h3>
|
|
1577
|
+
<div>
|
|
1578
|
+
<blockquote>
|
|
1579
|
+
Text boxes, check boxes, drop-down list boxes, spin boxes and list
|
|
1580
|
+
boxes use the <em>field border style</em>. You can also use the style
|
|
1581
|
+
for define the work area within a window. It uses the sunken outer and
|
|
1582
|
+
sunken inner basic border styles.
|
|
1583
|
+
|
|
1584
|
+
For most controls, the interior of the field uses the button highlight
|
|
1585
|
+
color. For text fields, such as text boxes and combo boxes, the
|
|
1586
|
+
interior uses the button face color when the field is read-only or
|
|
1587
|
+
disabled.
|
|
1588
|
+
|
|
1589
|
+
<footer>
|
|
1590
|
+
— Microsoft Windows User Experience p. 421
|
|
1591
|
+
</footer>
|
|
1592
|
+
</blockquote>
|
|
1593
|
+
|
|
1594
|
+
<blockquote>
|
|
1595
|
+
Status fields use the <em>status field border style</em>. This style
|
|
1596
|
+
uses only the sunken outer basic border style. You use the status
|
|
1597
|
+
field style in status bars and other read-only fields where the
|
|
1598
|
+
content of the file can change dynamically.
|
|
1599
|
+
|
|
1600
|
+
<footer>
|
|
1601
|
+
— Microsoft Windows User Experience p. 422
|
|
1602
|
+
</footer>
|
|
1603
|
+
</blockquote>
|
|
1604
|
+
|
|
1605
|
+
As mentioned in these guidelines, these styles are used in other
|
|
1606
|
+
contexts than just form elements and status fields such as to indicate
|
|
1607
|
+
work areas and dynamic content. For that reason, we provide three
|
|
1608
|
+
classes for these generic usages, <code>field-border</code>,
|
|
1609
|
+
<code>field-border-disabled</code>, and
|
|
1610
|
+
<code>status-field-border</code>. These classes only define the border
|
|
1611
|
+
and background color and minimal padding, so you will typically need to
|
|
1612
|
+
at least provide some extra padding yourself.
|
|
1613
|
+
|
|
1614
|
+
<div class="example">
|
|
1615
|
+
<div class="field-border" style="padding: 8px">
|
|
1616
|
+
Work area
|
|
1617
|
+
</div>
|
|
1618
|
+
<details>
|
|
1619
|
+
<summary>Show code</summary>
|
|
1620
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-border"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 8px"</span>></span>
|
|
1621
|
+
Work area
|
|
1622
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1623
|
+
</details>
|
|
1624
|
+
</div>
|
|
1625
|
+
|
|
1626
|
+
|
|
1627
|
+
<div class="example">
|
|
1628
|
+
<div class="field-border-disabled" style="padding: 8px">
|
|
1629
|
+
Disabled work area
|
|
1630
|
+
</div>
|
|
1631
|
+
<details>
|
|
1632
|
+
<summary>Show code</summary>
|
|
1633
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-border-disabled"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 8px"</span>></span>
|
|
1634
|
+
Disabled work area
|
|
1635
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1636
|
+
</details>
|
|
1637
|
+
</div>
|
|
1638
|
+
|
|
1639
|
+
<div class="example">
|
|
1640
|
+
<div class="status-field-border" style="padding: 8px">
|
|
1641
|
+
Dynamic content
|
|
1642
|
+
</div>
|
|
1643
|
+
<details>
|
|
1644
|
+
<summary>Show code</summary>
|
|
1645
|
+
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"status-field-border"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 8px"</span>></span>
|
|
1646
|
+
Dynamic content
|
|
1647
|
+
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1648
|
+
</details>
|
|
1649
|
+
</div>
|
|
1650
|
+
</div>
|
|
1651
|
+
</section>
|
|
1652
|
+
|
|
1653
|
+
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
|
|
1654
|
+
|
|
1655
|
+
<p>
|
|
1656
|
+
98.css is <a href="https://github.com/jdan/98.css/blob/main/LICENSE">MIT licensed</a>.
|
|
1657
|
+
</p>
|
|
1658
|
+
|
|
1659
|
+
<p>
|
|
1660
|
+
Refer to <a href="https://github.com/jdan/98.css/issues">the GitHub issues page</a> to see bugs
|
|
1661
|
+
in my CSS or report new ones. I'd really like to see your pull requests (especially those new to
|
|
1662
|
+
open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like
|
|
1663
|
+
to make it a fun place to build your open-source muscle.
|
|
1664
|
+
</p>
|
|
1665
|
+
|
|
1666
|
+
<p>
|
|
1667
|
+
Thank you for checking my little project out, I hope it brought you some joy today. Consider
|
|
1668
|
+
<a href="https://github.com/jdan/98.css/stargazers">starring/following along on GitHub</a> and maybe
|
|
1669
|
+
subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
|
|
1670
|
+
</p>
|
|
1671
|
+
</main>
|
|
1672
|
+
</body>
|
|
1673
|
+
</html>
|