mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-23 14:02:49 +02:00
Code Issues Releases Wiki Activity

Tab module documentation complete

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/v2/tab.html
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>