You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
4.2 KiB
Plaintext
148 lines
4.2 KiB
Plaintext
extends ../_layout/_docs-layout.pug
|
|
|
|
block variables
|
|
- var slug = 'tabs'
|
|
- var parent = 'components'
|
|
- var title = 'Tabs - Components - Spectre.css CSS Framework'
|
|
- var description = 'Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
|
|
|
|
block docs-content
|
|
+docs-heading('tabs', 'Tabs')
|
|
include ../_layout/_ad-g.pug
|
|
|
|
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")
|
|
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">
|
|
<button class="btn btn-primary btn-sm input-group-btn">Search</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
include ../_layout/_ad-c.pug
|
|
|
|
include ../_layout/_footer.pug |