blob: 29bc2c8256910c509d0183f2f6824e09ead40c13 (
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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'bars'
- var parent = 'components'
- var title = 'Bars - Components - Spectre.css CSS Framework'
- var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('bars', 'Bars')
include ../_layout/_ad-g.pug
p
| Bars represent the progress of a task or the value within the known range.
| Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.
.docs-demo.columns
.column.col-8.col-xs-12
.bar.bar-sm
.bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
.column.col-8.col-xs-12
.bar
.bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
.column.col-8.col-xs-12
.bar
.bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
.bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
.bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
.bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
p
| Add a container element with the #[code bar] class.
| And add child elements with the #[code bar-item] class.
| The width percentage value is needed for every #[code bar-item].
p
| There is the #[code bar-sm] class for thinner Bars.
| Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- normal bars -->
<div class="bar bar-sm">
<div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- multi-bars -->
<div class="bar">
<div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
<div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
</div>
+docs-subheading('bars-slider', 'Slider bars')
.docs-demo.columns
.column.col-8.col-xs-12
.bar.bar-slider
.bar-item(role="progressbar" style="width:50%;")
button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
.column.col-8.col-xs-12
.bar.bar-slider
.bar-item(role="progressbar" style="width:15%;")
button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
.bar-item(role="progressbar" style="width:65%;")
button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
p
| You can add the #[code bar-slider] class to the Bars container.
| And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
| You need to set the #[code bar-item] width manually to have the slider point.
p
| If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- normal slider -->
<div class="bar bar-slider">
<div class="bar-item" role="progressbar" style="width:25%;">
<button class="bar-slider-btn btn" role="slider"></button>
</div>
</div>
<!-- range slider -->
<div class="bar bar-slider">
<div class="bar-item" role="progressbar" style="width:15%;">
<button class="bar-slider-btn btn" role="slider"></button>
</div>
<div class="bar-item" role="progressbar" style="width:65%;">
<button class="bar-slider-btn btn" role="slider"></button>
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
