360 lines
22 KiB
HTML
360 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Tab</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, tab, tabs">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
|
<meta property="og:type" content="website"/>
|
|
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:image" content="page_thumb.PNG">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
/* Classes and ids used in multiple pages - page top and utilities */
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
|
padding: 4px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-heading {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #b71c1c; }
|
|
.box-centered > .card.fluid {
|
|
-webkit-box-pack: start;
|
|
-webkit-box-align: start;
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-webkit-align-self: auto;
|
|
align-self: auto;
|
|
}
|
|
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
/* Local classes and ids for this page */
|
|
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
|
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
|
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #bdbdbd;
|
|
}
|
|
@media (max-width: 767px){
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
border: 0;
|
|
border-top: 1px solid #bdbdbd;
|
|
}
|
|
}
|
|
.box-colored.green { background: #1b5e20; }
|
|
.do {
|
|
border-top: 15px solid #558b2f;
|
|
padding-top: 10px;
|
|
}
|
|
.dont {
|
|
border-top: 15px solid #f44336;
|
|
padding-top: 10px;
|
|
}
|
|
.box-colored {
|
|
color: #f5f5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
|
|
<a href="index.html" class="button">Introduction</a>
|
|
<a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a>
|
|
<a href="customization.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="box-centered">
|
|
<img src="mini-logo.svg" id="top-logo">
|
|
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<h1>Tab</h1>
|
|
<p>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>
|
|
<p><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>
|
|
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Tab</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>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>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p>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><br>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Basic syntax</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<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>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><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>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-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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Stacked tabs</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<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>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><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><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><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><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><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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html> |