Tab module documentation complete

This commit is contained in:
Angelos Chalaris 2016-12-10 12:59:10 +02:00
parent bff5ea569c
commit 624ab29059
3 changed files with 49 additions and 56 deletions

View file

@ -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.

View file

@ -75,54 +75,7 @@
</div>
<!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;">
<h2>Tabs &amp; 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>&lt;div&gt;</code> with the <code>.tabs</code> class. Populate it with <code>&lt;input type=&quot;radio&quot;&gt;</code>s, each followed by a linked <code>&lt;label&gt;</code> and another <code>&lt;div&gt;</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>&lt;input type=&quot;checkbox&quot;&gt;</code>s instead. Carousels can be created similarly, remember to add images to the inner content <code>&lt;div&gt;</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>&lt;input type=&quot;radio&quot;&gt;</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> &amp; <span class="bordered circular">&nbsp;2 </span>.</p>

View file

@ -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">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;div class=&quot;tabs stacked&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a1&quot; checked aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 1&lt;/label&gt;
&lt;div&gt;
&lt;h3&gt;Section 1&lt;/h3&gt;
&lt;p&gt;This is the first accordion section's content.&lt;/p&gt;
&lt;/div&gt;
&lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt;
&lt;div&gt;
&lt;h3&gt;Section 2&lt;/h3&gt;
&lt;p&gt;This is the second accordion section's content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;tabs stacked&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 1&lt;/label&gt;
&lt;div&gt;
&lt;p&gt;This is the first collapse section's content.&lt;/p&gt;
&lt;/div&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 2&lt;/label&gt;
&lt;div&gt;
&lt;p&gt;This is the second collapse section's content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</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>&nbsp;</p>
<pre>&lt;div class=&quot;tabs stacked&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;Single collapse&lt;/label&gt;
&lt;div&gt;
&lt;p&gt;This is a singular collapse.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;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>&nbsp;</p>
<pre>&lt;div class=&quot;tabs stacked&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a1&quot; checked aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Single accordion section&lt;/label&gt;
&lt;div&gt;
&lt;p&gt;This accordion section cannot close once opened&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;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>