Basic syntax for tab module
This commit is contained in:
Angelos Chalaris
parent
f764d9e857
commit
bff5ea569c
|
|
@ -625,3 +625,4 @@
|
|||
## 20161210
|
||||
|
||||
- Added `tab.html` for `tab` module documentation.
|
||||
- Basic documentation and syntax explanation of `tab` module.
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly on older browsers.</li>
|
||||
<li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li>
|
||||
<li>If you want to further customize your <code>.section</code>s, check the section below.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The <code>.media</code> class might not be well supported on older browsers, especially legacy versions of Internet Explorer.</li>
|
||||
<li>The <code>.media</code> class might not be well supported in older browsers, especially legacy versions of Internet Explorer.</li>
|
||||
<li>Due to the <code>.media</code> class using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend <a href="https://github.com/bfred-it/object-fit-images">this one</a> for images and <a href="https://github.com/jonathantneal/fitie">this one</a> for videos.</li>
|
||||
<li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
|
||||
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization.html">customization page</a> for instructions.</li>
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@
|
|||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li><strong>mini.css</strong> uses a mobile-first approach in its grid system. This means that specifying a layout for smaller device sizes will apply the same layout on medium-sized and larger screens, so you do not have to rewrite the same layout for all three screen sizes. However, if you want to change the layout on different screen sizes, check the section below.</li>
|
||||
<li>The <strong>grid</strong> module is compatible with modern browsers, but might not display properly on older browsers.</li>
|
||||
<li>The <strong>grid</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li>
|
||||
<li>The specific breakpoints for small, medium and large screen sizes are as follows:
|
||||
<ul>
|
||||
<li><strong>small</strong>: less than <code>768px</code> wide</li>
|
||||
|
|
|
|||
|
|
@ -436,7 +436,7 @@
|
|||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li>
|
||||
<li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly on older browsers.</li>
|
||||
<li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li>
|
||||
<li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -105,24 +105,6 @@
|
|||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab2">
|
||||
<label for="tab2">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab3">
|
||||
<label for="tab3">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab4">
|
||||
<label for="tab4">Tab 4</label>
|
||||
<div>
|
||||
<h3>Tab 4</h3>
|
||||
<p>This is the fourth tab's content.</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="tabs">
|
||||
<input type="radio" name="carousel" id="car1" checked>
|
||||
|
|
|
|||
146
docs/v2/tab.html
146
docs/v2/tab.html
|
|
@ -123,29 +123,122 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="tabs" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<input type="radio" name="tabdemo" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab2" aria-hidden="true">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab3" aria-hidden="true">
|
||||
<label for="tab3" aria-hidden="true">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tabdemo" id="tab4" aria-hidden="true">
|
||||
<label for="tab4" aria-hidden="true">Tab 4</label>
|
||||
<div>
|
||||
<h3>Tab 4</h3>
|
||||
<p>This is the fourth tab's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>The tab container's basic sytanx is composed of two components, presented below in the order they should be added to the DOM tree:</p>
|
||||
<ul>
|
||||
<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 <span class="fore-secondary">type</span>=<span class="fore-primary">"radio"</span>></code> element. Give it a <code><span class="fore-secondary">name</span></code> and an <code><span class="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>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
<p>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><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">"true"</span></code> to all the <code><input></code> and <code><label></code> elements inside the <code>.tabs</code> container.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab3" aria-hidden="true">
|
||||
<label for="tab3" aria-hidden="true">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li>
|
||||
<li>Remember to add the <code><span class="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 <a href="customization.html">customization</a> page.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="tabs">
|
||||
<input type="checkbox" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Bad Tab</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="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 <span class="fore-secondary">type</span>=<span class="fore-primary">"checkbox"</span>></code>, check out the next section.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Lonely Tab</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="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>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Bad Tab</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Bad Tab</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="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>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked>
|
||||
<label for="tab1">Tab</label>
|
||||
<div>
|
||||
<h3>Not fully accessible tab</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> 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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,7 +253,32 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<input type="radio" name="accordion" id="a1" autocomplete="off" 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" autocomplete="off" 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" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<input type="checkbox" id="c1" autocomplete="off" 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" autocomplete="off" 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>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
|
|
@ -176,11 +294,11 @@
|
|||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue