<ahref="input_control#forms-input"class="sublink-1">Forms & input</a><ahref="input_control#checkbox-radio"class="sublink-1">Checkboxes & radio buttons</a><ahref="input_control#switches"class="sublink-1">Switches</a>
<ahref="input_control#buttons"class="sublink-1">Buttons & button groups</a><ahref="input_control#file-upload"class="sublink-1">File upload buttons</a>
<ahref="navigation#footer"class="sublink-1">Footer</a><ahref="navigation#sticky"class="sublink-1">Sticky headers & footers</a>
<br/><ahref="table#table-title">Table</a>
<ahref="table#syntax-responsiveness"class="sublink-1">Basic syntax & responsiveness</a><ahref="table#scrollable-tables"class="sublink-1">Scrollable tables</a>
<ahref="table#horizontal-tables"class="sublink-1">Horizontal tables</a><ahref="table#variants-matrices"class="sublink-1">Table variants & matrices</a>
<br/><ahref="card#card-title">Card</a>
<ahref="card#basic-syntax"class="sublink-1">Basic syntax</a><ahref="card#sections-media"class="sublink-1">Sections & media</a>
<ahref="card#sizing-fluidity"class="sublink-1">Card sizing & fluidity</a><ahref="card#color-variants"class="sublink-1">Card color variants</a>
<ahref="progress#basic-progress-bar"class="sublink-1">Basic progress bar</a><ahref="progress#progress-variants"class="sublink-1">Progress bar variants</a>
<ahref="utility#visibility-helpers"class="sublink-1">Visibility helpers</a><ahref="utility#borders-shadows"class="sublink-1">Generic borders & shadows</a>
<ahref="utility#responsive-sizing"class="sublink-1">Responsive sizing & spacing classes</a>
<pstyle="text-align:justify">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
<pstyle="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
<pstyle="text-align:justify">Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the <strong>tab</strong> module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.</p><br>
<pstyle="text-align:justify">To use the <strong>tab</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
<pstyle="text-align:justify">The tab container's basic syntax is composed of two components, presented below in the order they should be added to the DOM tree:</p>
<li>At the outermost level of the tab container is a <code><div></code> element implementing the <code>.tabs</code> class. This serves as the wrapper of the tab container.</li>
<li>Inside the <code>.tabs</code> container, add a set of the following three elements for each tab:
<ol>
<li>First, add an <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"radio"</span>></code> element. Give it a <code><spanclass="fore-secondary">name</span></code> and an <code><spanclass="fore-secondary">id</span></code> in order to be able to link to it and group it with the rest of the radio buttons in the container.</li>
<li>Follow the <code><input></code> element with a <code><label></code> element linking to it. Inside this element, add the text you want to be shown as the title of your tab.</li>
<li>Finally, add a <code><div></code> immediately after the <code><label></code>'s closing tag. This will be the panel that contains the tab's content. Inside this element, you can add all the content you want in your tab (headings, images, text).</li>
<pstyle="text-align:justify">Tabs are responsive and will collapse into a stacked display on smaller screens, allowing the user to view the actual content more easily. The tab container's syntax is accessible, but parts of it might confuse screen readers, so we suggest adding the <code><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> attribute to all the <code><input></code> and <code><label></code> elements inside the <code>.tabs</code> container.</p>
<li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li>
<li>Remember to add the <code><spanclass="fore-secondary">checked</span></code> attribute to one of your <code><input></code>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.</li>
<li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <ahref="customization">customization</a> page.</li>
<pclass="dont"style="text-align:justify"><markclass="secondary">Don't:</mark> Do not use checkboxes inside the default <code>.tabs</code> container, otherwise you might notice unexpected behavior. If you want to use an <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"checkbox"</span>></code>, check out the next section.</p>
<pclass="dont"style="text-align:justify"><markclass="secondary">Don't:</mark> You can add a single tab in a <code>.tabs</code> container, but what use would that be? You should probably read the next section to see what you can do with a stacked tab container instead.</p>
<pclass="dont"style="text-align:justify"><markclass="secondary">Don't:</mark> The syntax and structure of the tab container is very strict. Try to follow it exactly as described in this section.</p>
<pclass="dont"style="text-align:justify"><markclass="secondary">Don't:</mark> Remember to use the <code><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> attribute to make your tabs fully accessible.</p>
<pstyle="text-align:justify">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 versatile, 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><spanclass="fore-secondary">aria-hidden</span>=<spanclass="fore-primary">"true"</span></code> attribute to make your tabs fully accessible, as before.</p>
<pclass="do"style="text-align:justify"><markclass="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>
<pclass="dont"style="text-align:justify"><markclass="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>
<pstyle="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <ahref="modules">modules page</a> and choose another module to see its documentation.</p>
<footerstyle="text-align:justify"><strong>mini.css</strong> was designed and built with <iclass="fa fa-heart-o"aria-hidden="true"></i> by <ahref="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <ahref="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <ahref="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
