diff options
New Docs experience
1 files changed, 471 insertions, 321 deletions
| -rw-r--r-- | docs/components.html | 792 |
diff --git a/docs/components.html b/docs/components.html index c8e7392..e303146 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,80 +27,233 @@ </section> </section> - <section class="container grid-960"> + <section class="docs-container container grid-960"> <section class="columns"> - <div id="sidebar" class="docs-sidebar column col-3 col-sm-12"> - <ul class="docs-nav nav"> - <li class="nav-item"> - <a href="index.html#introduction">Getting started</a> - </li> - <li class="nav-item"> - <a href="elements.html">Elements</a> - </li> - <li class="nav-item"> - <a href="layout.html">Layout</a> - </li> - <li class="nav-item active"> - <a href="components.html">Components</a> - <ul class="nav"> - <li class="nav-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="nav-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="nav-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="nav-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="nav-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="nav-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="nav-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="nav-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="nav-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="nav-item"> - <a href="components.html#navigation">Navigation</a> - </li> - <li class="nav-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="nav-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="nav-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="nav-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="nav-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="utilities.html">Utilities</a> - </li> - <li class="nav-item"> - <a href="experimentals.html">Experimentals</a> - </li> - </ul> + <div id="sidebar" class="docs-sidebar column col-sm-12"> + <div class="docs-nav"> + <div class="accordion"> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="index.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="index.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="index.html#compiling">Custom version</a> + </li> + <li class="menu-item"> + <a href="index.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="index.html#whatsnew">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + <li class="menu-item"> + <a href="layout.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="layout.html#empty">Empty states</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked /> + <label class="accordion-header hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="docs-content column col-9 col-sm-12"> + <div class="docs-content column col-sm-12"> <section id="accordions" class="container"> <header class="text-center"><h3><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3></header> <section class="notes"> @@ -631,6 +784,70 @@ </section> + <section id="breadcrumbs" class="container"> + <header class="text-center"><h3><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3></header> + <div class="columns"> + <div class="column col-6 col-md-12"> + <ul class="breadcrumb" role="navigation"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Profile"> + Profile + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs"> + Change avatar + </a> + </li> + </ul> + </div> + <div class="column col-6 col-md-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs"> + Home + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs"> + Spectre + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> + </section> + +<!-- breadcrumbs example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Home + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Profile + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Change avatar + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + </section> + <section id="cards" class="container"> <header class="text-center"><h3><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3></header> <section class="notes"> @@ -1155,253 +1372,8 @@ </section> - <section id="navigation" class="container"> - <header class="text-center"><h3><a href="#navigation" class="anchor" aria-hidden="true">#</a>Navigation</h3></header> - <section class="notes"> - <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and navs.</p> - </section> - <header id="breadcrumbs" class="text-center"> - <h4><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h4> - </header> - <div class="columns"> - <div class="column col-6 col-md-12"> - <ul class="breadcrumb" role="navigation"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Profile"> - Profile - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Change avatar - </a> - </li> - </ul> - </div> - <div class="column col-6 col-md-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Home - </a> - </li> - <li class="breadcrumb-item"> - Search result: - <a href="#breadcrumbs"> - Spectre - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> - </section> - -<!-- breadcrumbs example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Home - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Profile - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Change avatar - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - <header id="tabs" class="text-center"> - <h4><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h4> - </header> - <div class="columns"> - <div class="column col-6 col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - </ul> - </div> - <div class="column col-6 col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> - </section> - -<!-- tabs example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"active"</span>>Playlists<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Radio<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Connect<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - <div class="columns"> - <div class="column col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="999"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - <div class="column col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> - </section> - -<!-- tabs with badges example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - <div class="columns"> - <div class="column col-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - <button class="btn btn-clear"></button> - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - <li class="tab-item tab-action"> - <div class="input-group input-inline"> - <input class="form-input input-sm" type="text" placeholder="search" /> - <button class="btn btn-primary btn-sm input-group-btn">Search</button> - </div> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> - </section> - -<!-- tabs with badges example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - <header id="pagination" class="text-center"> - <h4><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h4> - </header> + <section id="pagination" class="container"> + <header class="text-center"><h3><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3></header> <div class="columns"> <div class="column col-xs-12"> <ul class="pagination"> @@ -1529,9 +1501,10 @@ <<span class="tag">/ul</span>> </code></pre> - <header id="navs" class="text-center"> - <h4><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h4> - </header> + </section> + + <section id="navs" class="container"> + <header class="text-center"><h3><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3></header> <div class="columns"> <div class="column col-6 col-xs-12"> <ul class="nav"> @@ -1780,6 +1753,183 @@ </section> + <section id="tabs" class="container"> + <header class="text-center"><h3><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3></header> + <div class="columns"> + <div class="column col-6 col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> + </section> + +<!-- tabs example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"active"</span>>Playlists<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Radio<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Connect<<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + <div class="columns"> + <div class="column col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="999"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> + </div> + <div class="column col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="9"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs" class="badge" data-badge="99"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + </section> + +<!-- tabs with badges example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + <div class="columns"> + <div class="column col-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + <button class="btn btn-clear"></button> + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search" /> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> + </section> + +<!-- tabs with badges example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + </section> + <section id="tiles" class="container"> <header class="text-center"><h3><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3></header> <section class="notes"> @@ -1999,7 +2149,7 @@ </section> </section> - <footer class="bg-gray"> + <footer class="section section-footer bg-gray"> <section id="copyright" class="grid-footer container grid-960"> <p> <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> |