blob: 31d84186d47d462f19c3d0ee8eb3942081516285 (
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 = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
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
|
