davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Merge pull request #160 from jdan/add-tabs

Browse Source 
Add tabs
This commit is contained in:
Juani Garay
2023-03-09 22:25:00 -03:00
committed by GitHub
parent d39788c788 735b3c6006
commit a5f4ddfdbb
2 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
docs/index.html.ejs
View File

@@ -41,6 +41,7 @@
</ul> </ul>
</li> </li>
<li><a href="#tree-view">TreeView</a></li> <li><a href="#tree-view">TreeView</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#table-view">TableView</a></li> <li><a href="#table-view">TableView</a></li>
</ul> </ul>
</li> </li>
@@ -800,6 +801,84 @@
</section> </section>
<section class="component"> <section class="component">
<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>
&mdash; Microsoft Windows User Experience p. 193
</footer>
</blockquote>
<p>
To render a tab list, use a <code>menu</code> element with the
<code>[role=tablist]</code> attribute. The children of this menu (<code>li</code>
elements), should get a <code>[role=tab]</code> attribute.
</p>
<p>
Tabs should be managed by adding custom javascript code.
All you need is to add the <code>[aria-selected=true]</code> attribute to the active tab.
</p>
<%- example(`
<div class="window-body">
<p>Hello, world!</p>
<menu role="tablist">
<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">
<p>the tab content</p>
</div>
</div>
</div>
`) %>
<p>
To create multirows tabs, add a <code>multirows</code>
class to the <code>menu</code> tag.
</p>
<%- example(`
<div class="window-body">
<p>Hello, world!</p>
<menu role="tablist" class="multirows">
<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="#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">
<p>the tab content</p>
</div>
</div>
</div>
`) %>
</div>
</section>
<section class="component">
<h3 id="table-view">TableView</h3> <h3 id="table-view">TableView</h3>
<div> <div>
<p> <p>

53
style.css
View File

@@ -69,6 +69,12 @@
--border-field: inset -1px -1px var(--button-highlight), --border-field: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
inset 2px 2px var(--window-frame); inset 2px 2px var(--window-frame);
/* Tabs */
--border-tab: inset -1px 0 var(--window-frame),
inset 1px 1px var(--button-face),
inset -2px 0 var(--button-shadow),
inset 2px 2px var(--button-highlight)
} }
@font-face { @font-face {
@@ -792,6 +798,53 @@ summary:focus {
background-image: svg-load("./icon/button-right.svg"); background-image: svg-load("./icon/button-right.svg");
} }
.window[role=tabpanel] {
position: relative;
z-index: 2;
}
menu[role=tablist] {
position: relative;
margin: 0 0 -2px 0;
text-indent: 0;
list-style-type: none;
display: flex;
padding-left: 3px;
}
menu[role=tablist] > li {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: var(--border-tab);
z-index: 1;
}
menu[role=tablist] > li[aria-selected=true] {
padding-bottom: 2px;
margin-top: -2px;
background-color: var(--surface);
position: relative;
z-index: 8;
margin-left: -3px;
}
menu[role=tablist] > li > a {
display: block;
color: #222;
margin: 6px;
text-decoration: none;
}
menu[role=tablist] > li[aria-selected=true] > a:focus {
outline: none;
}
menu[role=tablist] > li > a:focus {
outline: 1px dotted #222;
}
menu[role=tablist].multirows > li {
flex-grow: 1;
text-align: center;
}
.sunken-panel { .sunken-panel {
box-sizing: border-box; box-sizing: border-box;
border: 2px groove transparent; border: 2px groove transparent;