diff options
1 files changed, 0 insertions, 132 deletions
| -rw-r--r-- | docs/src/contents/tabs.pug | 132 |
diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug deleted file mode 100644 index fea99ad..0000000 --- a/docs/src/contents/tabs.pug +++ /dev/null @@ -1,132 +0,0 @@ -p Tabs enable quick switch between different views. - -.docs-demo.columns - .column.col-6.col-sm-12 - ul.tab - li.tab-item.active - a(href="#tabs") - | Music - li.tab-item - a(href="#tabs") - | Playlists - li.tab-item - a(href="#tabs") - | Radio - li.tab-item - a(href="#tabs") - | Store - .column.col-6.col-sm-12 - ul.tab.tab-block - li.tab-item.active - a(href="#tabs") - | Music - li.tab-item - a(href="#tabs") - | Playlists - li.tab-item - a(href="#tabs") - | Radio - -p - | Add a container element with the #[code tab] class. - | And add child elements with the #[code tab-item] class. - | You can add the #[code tab-block] class for a full-width tab. - | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#">Music</a> - </li> - <li class="tab-item"> - <a href="#" class="active">Playlists</a> - </li> - <li class="tab-item"> - <a href="#">Radio</a> - </li> - <li class="tab-item"> - <a href="#">Connect</a> - </li> - </ul> - -.docs-demo.columns - .column.col-sm-12 - ul.tab - li.tab-item.active - a.badge(href="#tabs" data-badge="999") - | Music - li.tab-item - a(href="#tabs") - | Playlists - li.tab-item - a(href="#tabs") - | Radio - .column.col-sm-12 - ul.tab.tab-block - li.tab-item.active - a.badge(href="#tabs" data-badge="9") - | Music - li.tab-item - a.badge(href="#tabs" data-badge="99") - | Playlists - li.tab-item - a(href="#tabs") - | Radio - -p - | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item]. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#" class="badge" data-badge="9"> - Music - </a> - </li> - </ul> - -.docs-demo.columns - .column.col-12 - ul.tab - li.tab-item.active - a(href="#tabs") - | Music - span.btn.btn-clear - li.tab-item - a(href="#tabs") - | Playlists - li.tab-item - a(href="#tabs") - | Radio - li.tab-item - a(href="#tabs") - | Store - li.tab-item.tab-action - .input-group.input-inline - input.form-input.input-sm(type="text" placeholder="search") - button.btn.btn-primary.btn-sm.input-group-btn Search - -p - | You could add a search box or buttons inside a tab. - | Add the #[code tab-action] class to the #[code tab-item]. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <ul class="tab"> - <li class="tab-item active"> - <a href="#"> - Music - </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>
\ No newline at end of file |