errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

81
docs/index.html.ejs
View file

@ -534,7 +534,7 @@
assistive technologies know the intent of this button. You may also use assistive technologies know the intent of this button. You may also use
"Minimize", "Maximize", "Restore" and "Help" like so: "Minimize", "Maximize", "Restore" and "Help" like so:
</p> </p>
<%- example(` <%- example(`
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Title Bar</div> <div class="title-bar-text">A Title Bar</div>
@ -564,7 +564,7 @@
<button aria-label="Help"></button> <button aria-label="Help"></button>
<button aria-label="Close"></button> <button aria-label="Close"></button>
</div> </div>
</div> </div>
`) %> `) %>
<p> <p>
You can make a title bar "inactive" by adding <code>inactive</code> class, You can make a title bar "inactive" by adding <code>inactive</code> class,
@ -720,6 +720,83 @@
</div> </div>
</section> </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> <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p> <p>