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

Prepared some placeholder documentation for tabs

Browse Source
This commit is contained in:
CaptainFalcon92
2020-10-24 00:32:16 +02:00
committed by Juan Garay
parent cba0cfa425
commit c360e656c6
1 changed files with 79 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
docs/index.html.ejs
View File

@@ -720,6 +720,83 @@
</div>
</section>
<section class="component">
<h3 id="tabs">Tabs</h3>
<div>
<blockquote>
...
<footer>
&mdash; Microsoft Windows User Experience p. #
</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="#">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>
</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="#">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>
</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>
</menu>
<div class="window" role="tabpanel">
<div class="window-body">
<p>the tab content</p>
</div>
</div>
</div>
`) %>
</div>
</section>
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p>