mirror of
https://github.com/jdan/98.css.git
synced 2025-08-30 17:19:56 +02:00
add textbox examples
This commit is contained in:
Jordan Scales
@@ -70,6 +70,10 @@ h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.5px solid #222222;
|
||||
|
||||
@@ -52,7 +52,8 @@ h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3,
|
||||
h4 {
|
||||
/* Swap the margin for a top-padding so linking to this section
|
||||
results in a better scroll position */
|
||||
padding-top: 20px;
|
||||
@@ -130,7 +131,8 @@ button.active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3,
|
||||
h4 {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
|
||||
185
docs/index.html
185
docs/index.html
@@ -19,17 +19,16 @@
|
||||
<li><a href="#option-button">OptionButton</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>
|
||||
<a href="#window">Window</a>
|
||||
<ul>
|
||||
<li><a href="#menubar">Menubar</a></li>
|
||||
<li><a href="#controls">Controls</a></li>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
||||
<li><a href="#all-together">All together</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#treeview">TreeView</a></li>
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extras">Extras</a></li>
|
||||
@@ -46,21 +45,21 @@
|
||||
98.css is a CSS library for building interfaces that look like Windows 98.
|
||||
</p>
|
||||
|
||||
<div class="dialog" style="margin: 32px; width: 250px">
|
||||
<div class="menubar">
|
||||
<div class="menubar-title">
|
||||
<div class="window" style="margin: 32px; width: 250px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-title">
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
<div class="menubar-controls">
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div class="window-body">
|
||||
<p>Hello, world!</p>
|
||||
<section class="field-row align-right">
|
||||
<section class="field-row" style="justify-content: flex-end">
|
||||
<button>OK</button>
|
||||
<button>Cancel</button>
|
||||
</section>
|
||||
@@ -410,6 +409,170 @@
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="text-box">TextBox</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>text box</em> (also referred to as an edit control) is a
|
||||
rectangular control where the user enters or edits text. It can
|
||||
be defined to support a single line or multiple lines of text.
|
||||
|
||||
<footer>— Microsoft Windows User Experience p. 181</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Text boxes can rendered by specifying a <code>text</code> type on an
|
||||
<code>input</code> element. As with checkboxes and radio buttons, you
|
||||
should provide a corresponding label with a properly set <code>for</code>
|
||||
attribute, and wrap both in a container with the <code>field-row</code> class.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="field-row">
|
||||
<label for="text17">Occuptation</label>
|
||||
<input id="text17" type="text" />
|
||||
</div>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<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>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text17"</span>></span>Occuptation<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<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>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Additionally, you can make use of the <code>field-row-stacked</code> class
|
||||
to position your label above the input instead of beside it.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text18">Address (Line 1)</label>
|
||||
<input id="text18" type="text" />
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text19">Address (Line 2)</label>
|
||||
<input id="text19" type="text" />
|
||||
</div>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To support multiple lines in the user's input, use the <code>textarea</code>
|
||||
element instead.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text20">Additional notes</label>
|
||||
<textarea id="text20" rows="8"></textarea>
|
||||
</div>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="dropdown">Dropdown</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>drop-down list box</em> allows the selection of only a
|
||||
single item from a list. In its closed state, the control displays
|
||||
the current value for the control. The user opens the list to change
|
||||
the value.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 175
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h3 id="window">Window</h3>
|
||||
<p>
|
||||
The following components illustrate how to build complete windows using
|
||||
98.css.
|
||||
</p>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar">Title Bar</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
At the top edge of the window, inside its border, is the title bar
|
||||
(also reffered to as the caption or caption bar), which extends across
|
||||
the width of the window. The title bar identifies the contents of the
|
||||
window.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
window commands.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="window-contents">Window contents</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
window commands.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="tree-view">TreeView</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>tree view control</em> is a special list box control
|
||||
that displays a set of objects as an indented outline based
|
||||
on their logical hierarchical relationship.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 178
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -19,17 +19,16 @@
|
||||
<li><a href="#option-button">OptionButton</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>
|
||||
<a href="#window">Window</a>
|
||||
<ul>
|
||||
<li><a href="#menubar">Menubar</a></li>
|
||||
<li><a href="#controls">Controls</a></li>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
||||
<li><a href="#all-together">All together</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#treeview">TreeView</a></li>
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#extras">Extras</a></li>
|
||||
@@ -46,21 +45,21 @@
|
||||
98.css is a CSS library for building interfaces that look like Windows 98.
|
||||
</p>
|
||||
|
||||
<div class="dialog" style="margin: 32px; width: 250px">
|
||||
<div class="menubar">
|
||||
<div class="menubar-title">
|
||||
<div class="window" style="margin: 32px; width: 250px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-title">
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
<div class="menubar-controls">
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div class="window-body">
|
||||
<p>Hello, world!</p>
|
||||
<section class="field-row align-right">
|
||||
<section class="field-row" style="justify-content: flex-end">
|
||||
<button>OK</button>
|
||||
<button>Cancel</button>
|
||||
</section>
|
||||
@@ -302,6 +301,145 @@
|
||||
</fieldset>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="text-box">TextBox</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>text box</em> (also referred to as an edit control) is a
|
||||
rectangular control where the user enters or edits text. It can
|
||||
be defined to support a single line or multiple lines of text.
|
||||
|
||||
<footer>— Microsoft Windows User Experience p. 181</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Text boxes can rendered by specifying a <code>text</code> type on an
|
||||
<code>input</code> element. As with checkboxes and radio buttons, you
|
||||
should provide a corresponding label with a properly set <code>for</code>
|
||||
attribute, and wrap both in a container with the <code>field-row</code> class.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row">
|
||||
<label for="text${getNewId()}">Occuptation</label>
|
||||
<input id="text${getCurrentId()}" type="text" />
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
Additionally, you can make use of the <code>field-row-stacked</code> class
|
||||
to position your label above the input instead of beside it.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Address (Line 1)</label>
|
||||
<input id="text${getCurrentId()}" type="text" />
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Address (Line 2)</label>
|
||||
<input id="text${getCurrentId()}" type="text" />
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
To support multiple lines in the user's input, use the <code>textarea</code>
|
||||
element instead.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Additional notes</label>
|
||||
<textarea id="text${getCurrentId()}" rows="8"></textarea>
|
||||
</div>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="dropdown">Dropdown</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>drop-down list box</em> allows the selection of only a
|
||||
single item from a list. In its closed state, the control displays
|
||||
the current value for the control. The user opens the list to change
|
||||
the value.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 175
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h3 id="window">Window</h3>
|
||||
<p>
|
||||
The following components illustrate how to build complete windows using
|
||||
98.css.
|
||||
</p>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar">Title Bar</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
At the top edge of the window, inside its border, is the title bar
|
||||
(also reffered to as the caption or caption bar), which extends across
|
||||
the width of the window. The title bar identifies the contents of the
|
||||
window.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
window commands.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="window-contents">Window contents</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
window commands.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="tree-view">TreeView</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
A <em>tree view control</em> is a special list box control
|
||||
that displays a set of objects as an indented outline based
|
||||
on their logical hierarchical relationship.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 178
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user