blob: a9e46a2a4f65d15e7bf7e4b63882fa4234125eb9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
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
|
