blob: b2d0c77a7337889f6c3362762f7f3612f21a5932 (
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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'meters'
- var parent = 'experimentals'
- var title = 'Meters - Experimentals - Spectre.css CSS Framework'
- var description = 'Meters represent 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('meters', 'Meters')
include ../_layout/_ad-g.pug
p Meters represent the value within the known range.
.docs-demo.columns
.column.col-3.col-xs-12
meter.meter(value="20" min="0" max="100")
.column.col-3.col-xs-12
meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
.column.col-3.col-xs-12
meter.meter(value="85" min="0" low="30" high="80" max="100")
.column.col-3.col-xs-12
meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- Meter is green when low < value < high -->
<meter class="meter" value="20" min="0" max="100"></meter>
<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
<!-- Meter is yellow when value < low or high < value -->
<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
