Tab module documentation complete
This commit is contained in:
Angelos Chalaris
parent
bff5ea569c
commit
624ab29059
3 changed files with 49 additions and 56 deletions
|
|
@ -626,3 +626,5 @@
|
|||
|
||||
- Added `tab.html` for `tab` module documentation.
|
||||
- Basic documentation and syntax explanation of `tab` module.
|
||||
- Added documentation for `stacked` `tab`s in `tab` module doc page. Module documentation complete.
|
||||
- `playground` cleanup, only `utility` module remains there now.
|
||||
|
|
|
|||
|
|
@ -75,54 +75,7 @@
|
|||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container" style="padding-top: 20px;">
|
||||
<h2>Tabs & accordions<small>Present content any way you like</small></h2>
|
||||
<p><strong>mini.css</strong> provides you with a very modern tab component, that can easily be used for multiple things, like tabbed navigation, single collapses, accordion collapses and even image carousels. This might sound like a lot to do with one component, but the design behind it allows it to be truly versatile and replace all those components. To use the tab component, simply create a container using a <code><div></code> with the <code>.tabs</code> class. Populate it with <code><input type="radio"></code>s, each followed by a linked <code><label></code> and another <code><div></code> which includes the tab's contents. If you want to create an accordion add the <code>.stacked</code> class to the container. The same thing works for collapses as well. Accordions and collapses can also use <code><input type="checkbox"></code>s instead. Carousels can be created similarly, remember to add images to the inner content <code><div></code> and you're good to go. You can see some examples below:</p><br>
|
||||
<div class="tabs stacked">
|
||||
<input type="checkbox" id="collapse" autocomplete="off">
|
||||
<label for="collapse">Single collapse</label>
|
||||
<div>
|
||||
<p>This is some content you can hide and show at will using the above label. Isn't that useful?</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="tabs stacked">
|
||||
<input type="radio" name="accordion" id="a1" autocomplete="off" checked>
|
||||
<label for="a1">Accordion section 1</label>
|
||||
<div>
|
||||
<h3>Section 1 - The amazing versatility of tabs</h3>
|
||||
<p>Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?</p>
|
||||
</div>
|
||||
<input type="radio" name="accordion" id="a2" autocomplete="off">
|
||||
<label for="a2">Accordion section 2</label>
|
||||
<div>
|
||||
<h3>Section 2 - How accordions work</h3>
|
||||
<p>Accordions are very similar to collapses. Just add multiple <code><input type="radio"></code>s, along with their content and you are ready to go.</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="tabs">
|
||||
<input type="radio" name="tabdemo" id="tab1" checked>
|
||||
<label for="tab1">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="tabs">
|
||||
<input type="radio" name="carousel" id="car1" checked>
|
||||
<label for="car1">Image 1</label>
|
||||
<div>
|
||||
<img src="catdemo.jpg" style="height: 240px; width: auto;">
|
||||
</div>
|
||||
<input type="radio" name="carousel" id="car2">
|
||||
<label for="car2">Image 2</label>
|
||||
<div>
|
||||
<img src="catdemo.jpg" style="height: 480px; width: auto">
|
||||
</div>
|
||||
<input type="radio" name="carousel" id="car3">
|
||||
<label for="car3">Image 3</label>
|
||||
<div>
|
||||
<img src="catdemo.jpg" style="height: 720px; width: auto">
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<h2>Utilities and Helpers <small>Useful classes for common problems</small></h2>
|
||||
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
|
||||
<p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> & <span class="bordered circular"> 2 </span>.</p>
|
||||
|
|
|
|||
|
|
@ -281,26 +281,64 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> container element. Stacked tabs are more vesatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">"true"</span></code> attribute to make your tabs fully accessible, as before.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="tabs stacked">
|
||||
<input type="radio" name="accordion" id="a1" checked aria-hidden="true">
|
||||
<label for="a1" aria-hidden="true">Accordion section 1</label>
|
||||
<div>
|
||||
<h3>Section 1</h3>
|
||||
<p>This is the first accordion section's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="accordion" id="a2"aria-hidden="true">
|
||||
<label for="a2" aria-hidden="true">Accordion section 2</label>
|
||||
<div>
|
||||
<h3>Section 2</h3>
|
||||
<p>This is the second accordion section's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs stacked">
|
||||
<input type="checkbox" id="c1" aria-hidden="true">
|
||||
<label for="c1" aria-hidden="true">Collapse section 1</label>
|
||||
<div>
|
||||
<p>This is the first collapse section's content.</p>
|
||||
</div>
|
||||
<input type="checkbox" id="c2" aria-hidden="true">
|
||||
<label for="c2" aria-hidden="true">Collapse section 2</label>
|
||||
<div>
|
||||
<p>This is the second collapse section's content.</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li><code>.stacked</code> tabs can be used with either checkboxes or radio buttons.</li>
|
||||
<li>You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<pre><div class="tabs stacked">
|
||||
<input type="checkbox" id="c1" aria-hidden="true">
|
||||
<label for="c1" aria-hidden="true">Single collapse</label>
|
||||
<div>
|
||||
<p>This is a singular collapse.</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can implement single collapses (otherwise known as spoilers), using a <code>.tabs</code><code>.stacked</code> container with only one checkbox-based tab.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<pre><div class="tabs stacked">
|
||||
<input type="radio" name="accordion" id="a1" checked aria-hidden="true">
|
||||
<label for="a1" aria-hidden="true">Single accordion section</label>
|
||||
<div>
|
||||
<p>This accordion section cannot close once opened</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid having a single radio-based tab in a <code>.tabs</code><code>.stacked</code> container, as this might result in unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue