You've already forked 98.css
mirror of
https://github.com/jdan/98.css.git
synced 2026-05-05 06:01:22 +09:00
feature: add tabs
This commit is contained in:
Juan Garay
@@ -102,10 +102,6 @@ summary {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -37,9 +37,12 @@
|
||||
<ul>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#window-contents">Window contents</a></li>
|
||||
<li><a href="#status-bar">Status Bar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
<li><a href="#tabs">Tabs</a></li>
|
||||
<li><a href="#table-view">TableView</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
|
||||
@@ -137,7 +140,9 @@
|
||||
They are given 12px of horizontal padding by default.
|
||||
</p>
|
||||
|
||||
<%- example(`<button>Click me</button>`) %>
|
||||
<%- example(`<button>Click me</button>
|
||||
<input type="submit" />
|
||||
<input type="reset" /> `)%>
|
||||
|
||||
<p>
|
||||
When buttons are clicked, the raised borders become sunken.
|
||||
@@ -388,7 +393,40 @@
|
||||
<textarea id="text${getCurrentId()}" rows="8"></textarea>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
Text boxes can also be disabled and have value with their corresponding HTML attributes.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row">
|
||||
<label for="text${getNewId()}">Favorite color</label>
|
||||
<input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
Other types of HTML5 text inputs are also supported.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Email</label>
|
||||
<input id="text${getCurrentId()}" type="email" value="admin@contoso.com"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Password</label>
|
||||
<input id="text${getCurrentId()}" type="password" value="hunter2"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Favorite Number</label>
|
||||
<input id="text${getCurrentId()}" type="number" value="98"/>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
@@ -635,6 +673,48 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="status-bar">Status Bar</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
A status bar is a special area within a window, typically the bottom, that displays information
|
||||
about the current state of what is being viewed in the window or any other contextual information, such as keyboard
|
||||
state.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 146
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
You can render a status bar with the <code>status-bar</code> class,
|
||||
and <code>status-bar-field</code> for every child text element.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="window" style="width: 320px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">A Window With A Status Bar</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<p> There are just so many possibilities:</p>
|
||||
<ul>
|
||||
<li>A Task Manager</li>
|
||||
<li>A Notepad</li>
|
||||
<li>Or even a File Explorer!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="status-bar">
|
||||
<p class="status-bar-field">Press F1 for help</p>
|
||||
<p class="status-bar-field">Slide 1</p>
|
||||
<p class="status-bar-field">CPU Usage: 14%</p>
|
||||
</div>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="tree-view">TreeView</h3>
|
||||
<div>
|
||||
@@ -724,10 +804,11 @@
|
||||
<h3 id="tabs">Tabs</h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
...
|
||||
A <em>tab control</em> is analogous to a divider in a file cabinet or notebook.
|
||||
You can use this control to define multiple logical pages or sections of information within the same window.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. #
|
||||
— Microsoft Windows User Experience p. 193
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
@@ -747,12 +828,12 @@
|
||||
<p>Hello, world!</p>
|
||||
|
||||
<menu role="tablist">
|
||||
<li role="tab" aria-selected="true"><a href="#">Desktop</a></li>
|
||||
<li role="tab"><a href="#">My computer</a></li>
|
||||
<li role="tab"><a href="#">Control panel</a></li>
|
||||
<li role="tab"><a href="#">Devices manager</a></li>
|
||||
<li role="tab"><a href="#">Hardware profiles</a></li>
|
||||
<li role="tab"><a href="#">Performance</a></li>
|
||||
<li role="tab" aria-selected="true"><a href="#tabs">Desktop</a></li>
|
||||
<li role="tab"><a href="#tabs">My computer</a></li>
|
||||
<li role="tab"><a href="#tabs">Control panel</a></li>
|
||||
<li role="tab"><a href="#tabs">Devices manager</a></li>
|
||||
<li role="tab"><a href="#tabs">Hardware profiles</a></li>
|
||||
<li role="tab"><a href="#tabs">Performance</a></li>
|
||||
</menu>
|
||||
<div class="window" role="tabpanel">
|
||||
<div class="window-body">
|
||||
@@ -772,20 +853,20 @@
|
||||
<p>Hello, world!</p>
|
||||
|
||||
<menu role="tablist" class="multirows">
|
||||
<li role="tab"><a href="#">Desktop</a></li>
|
||||
<li role="tab"><a href="#">My computer</a></li>
|
||||
<li role="tab"><a href="#">Control panel</a></li>
|
||||
<li role="tab"><a href="#">Devices manager</a></li>
|
||||
<li role="tab"><a href="#">Hardware profiles</a></li>
|
||||
<li role="tab"><a href="#">Performance</a></li>
|
||||
<li role="tab"><a href="#tabs">Desktop</a></li>
|
||||
<li role="tab"><a href="#tabs">My computer</a></li>
|
||||
<li role="tab"><a href="#tabs">Control panel</a></li>
|
||||
<li role="tab"><a href="#tabs">Devices manager</a></li>
|
||||
<li role="tab"><a href="#tabs">Hardware profiles</a></li>
|
||||
<li role="tab"><a href="#tabs">Performance</a></li>
|
||||
</menu>
|
||||
<menu role="tablist" class="multirows">
|
||||
<li role="tab"><a href="#">Users</a></li>
|
||||
<li role="tab"><a href="#">Network</a></li>
|
||||
<li role="tab"><a href="#">Programs</a></li>
|
||||
<li role="tab"><a href="#">Services</a></li>
|
||||
<li role="tab"><a href="#">Resources</a></li>
|
||||
<li role="tab"><a href="#">Advanced</a></li>
|
||||
<li role="tab"><a href="#tabs">Users</a></li>
|
||||
<li role="tab"><a href="#tabs">Network</a></li>
|
||||
<li role="tab"><a href="#tabs">Programs</a></li>
|
||||
<li role="tab"><a href="#tabs">Services</a></li>
|
||||
<li role="tab"><a href="#tabs">Resources</a></li>
|
||||
<li role="tab"><a href="#tabs">Advanced</a></li>
|
||||
</menu>
|
||||
<div class="window" role="tabpanel">
|
||||
<div class="window-body">
|
||||
@@ -794,6 +875,96 @@
|
||||
</div>
|
||||
</div>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
<section class="component">
|
||||
|
||||
<h3 id="table-view">TableView</h3>
|
||||
<div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
With a bit of extra scripting you can make table view interactive. Give <code>interactive</code> class to
|
||||
table element to show pointer cursor when hovering over body rows. Table rows can be given
|
||||
<code>highlighted</code> class to appear selected.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="sunken-panel" style="height: 120px; width: 240px;">
|
||||
<table class="interactive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Version</th>
|
||||
<th>Company</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>MySQL ODBC 3.51 Driver</td>
|
||||
<td>3.51.11.00</td>
|
||||
<td>MySQL AB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SQL Server</td>
|
||||
<td>3.70.06.23</td>
|
||||
<td>Microsoft Corporation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelectorAll('table.interactive').forEach(element => {
|
||||
element.addEventListener('click', (event) => {
|
||||
const row = event.path.find(element => element.tagName === 'TR' && element.parentElement.tagName === 'TBODY');
|
||||
if (row) {
|
||||
row.classList.toggle('highlighted');
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user