mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-31 01:29:58 +02:00
Code Issues Releases Wiki Activity

add groupbox documentation

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 16:24:46 -04:00
parent 04e9e7e9c9
commit c1007709a6
2 changed files with 184 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
docs/index.html
View File

@@ -17,9 +17,10 @@
<li><a href="#button">Button</a></li>
<li><a href="#checkbox">Checkbox</a></li>
<li><a href="#option-button">OptionButton</a></li>
<li><a href="#fieldset">Fieldset</a></li>
<li><a href="#group-box">GroupBox</a></li>
<li><a href="#text-box">TextBox</a></li>
<li><a href="#multiline-text-box">Multiline TextBox</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li>
<a href="#dialog">Dialog</a>
<ul>
@@ -96,7 +97,7 @@
A <em>command button</em>, also referred to as a push button, is a control
that causes the application to perform some action when the user clicks it.
<footer>&mdash; Microsoft Windows User Experience, 8.1</footer>
<footer>&mdash; Microsoft Windows User Experience p. 160</footer>
</blockquote>
<p>
@@ -159,7 +160,7 @@
<div>
<blockquote>
A <em>check box</em> represents an independent or non-exclusive choice.
<footer>&mdash; Microsoft Windows User Experience, 8.3</footer>
<footer>&mdash; Microsoft Windows User Experience p. 167</footer>
</blockquote>
<p>
@@ -235,9 +236,13 @@
choice within a limited set of mutually exclusive choices. That is, the user can choose only
one set of options.
<footer>&mdash; Microsoft Windows User Experience, 8.2</footer>
<footer>&mdash; Microsoft Windows User Experience p. 164</footer>
</blockquote>
<p>
Option buttons can be used via the <code>radio</code> type on an input element.
</p>
<p>
Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
input. Just as before: when grouping inputs, wrap each input in a container with the
@@ -302,6 +307,109 @@
</div>
</div>
</section>
<section class="component">
<h3 id="group-box">GroupBox</h3>
<div>
<blockquote>
A <em>group box</em> is a special control you can use to organize a set of
controls. A group box is a rectangular frame with an optional label that surrounds
a set of controls.
<footer>&mdash; Microsoft Windows User Experience p. 189</footer>
</blockquote>
<p>
A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
It contains a sunken outer border and a raised inner border, resembling an engraved box
around your controls.
</p>
<div class="example">
<fieldset>
<div class="field-row">Select one:</div>
<div class="field-row">
<input id="radio10" type="radio" name="fieldset-example">
<label for="radio10">Diners</label>
</div>
<div class="field-row">
<input id="radio11" type="radio" name="fieldset-example">
<label for="radio11">Drive-Ins</label>
</div>
<div class="field-row">
<input id="radio12" type="radio" name="fieldset-example">
<label for="radio12">Dives</label>
</div>
</fieldset>
<details>
<summary>Show code</summary>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>Select one:<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio10"</span>&gt;</span>Diners<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio11"</span>&gt;</span>Drive-Ins<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio12"</span>&gt;</span>Dives<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span></code></pre>
</details>
</div>
<p>
You can provide your group with a label by placing a <code>legend</code> element
within the <code>fieldset</code>.
</p>
<div class="example">
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio13" type="radio" name="fieldset-example2">
<label for="radio13">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio14" type="radio" name="fieldset-example2">
<label for="radio14">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio15" type="radio" name="fieldset-example2">
<label for="radio15">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio16" type="radio" name="fieldset-example2">
<label for="radio16">Carla Lalli Music</label>
</div>
</fieldset>
<details>
<summary>Show code</summary>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">legend</span>&gt;</span>Today's mood<span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio13"</span>&gt;</span>Claire Saffitz<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio14"</span>&gt;</span>Brad Leone<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio15"</span>&gt;</span>Chris Morocco<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio16"</span>&gt;</span>Carla Lalli Music<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span></code></pre>
</details>
</div>
</div>
</main>
</body>
</html>

76
docs/index.html.ejs
View File

@@ -17,9 +17,10 @@
<li><a href="#button">Button</a></li>
<li><a href="#checkbox">Checkbox</a></li>
<li><a href="#option-button">OptionButton</a></li>
<li><a href="#fieldset">Fieldset</a></li>
<li><a href="#group-box">GroupBox</a></li>
<li><a href="#text-box">TextBox</a></li>
<li><a href="#multiline-text-box">Multiline TextBox</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li>
<a href="#dialog">Dialog</a>
<ul>
@@ -96,7 +97,7 @@
A <em>command button</em>, also referred to as a push button, is a control
that causes the application to perform some action when the user clicks it.
<footer>&mdash; Microsoft Windows User Experience, 8.1</footer>
<footer>&mdash; Microsoft Windows User Experience p. 160</footer>
</blockquote>
<p>
@@ -137,7 +138,7 @@
<div>
<blockquote>
A <em>check box</em> represents an independent or non-exclusive choice.
<footer>&mdash; Microsoft Windows User Experience, 8.3</footer>
<footer>&mdash; Microsoft Windows User Experience p. 167</footer>
</blockquote>
<p>
@@ -193,9 +194,13 @@
choice within a limited set of mutually exclusive choices. That is, the user can choose only
one set of options.
<footer>&mdash; Microsoft Windows User Experience, 8.2</footer>
<footer>&mdash; Microsoft Windows User Experience p. 164</footer>
</blockquote>
<p>
Option buttons can be used via the <code>radio</code> type on an input element.
</p>
<p>
Option buttons can be grouped by specifying a shared <code>name</code> attribute on each
input. Just as before: when grouping inputs, wrap each input in a container with the
@@ -234,6 +239,69 @@
`) %>
</div>
</section>
<section class="component">
<h3 id="group-box">GroupBox</h3>
<div>
<blockquote>
A <em>group box</em> is a special control you can use to organize a set of
controls. A group box is a rectangular frame with an optional label that surrounds
a set of controls.
<footer>&mdash; Microsoft Windows User Experience p. 189</footer>
</blockquote>
<p>
A group box can be used by wrapping your elements with the <code>fieldset</code> tag.
It contains a sunken outer border and a raised inner border, resembling an engraved box
around your controls.
</p>
<%- example(`
<fieldset>
<div class="field-row">Select one:</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Diners</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Drive-Ins</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example">
<label for="radio${getCurrentId()}">Dives</label>
</div>
</fieldset>
`) %>
<p>
You can provide your group with a label by placing a <code>legend</code> element
within the <code>fieldset</code>.
</p>
<%- example(`
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="fieldset-example2">
<label for="radio${getCurrentId()}">Carla Lalli Music</label>
</div>
</fieldset>
`) %>
</div>
</main>
</body>
</html>