Gauge Svelte Component

Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.

Gauge Components

There are following components included:

• Gauge

Gauge Properties

Examples

1. <Page>
2. <Navbar title="Gauge"></Navbar>
3. <Block strong>
4. <p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
5. </Block>
6. <Block strong class="text-align-center">
7. <Gauge
8. type="circle"
9. value={gaugeValue}
10. size={250}
11. borderColor="#2196f3"
12. borderWidth={10}
13. valueText={`${gaugeValue * 100}%`}
14. valueFontSize={41}
15. valueTextColor="#2196f3"
16. labelText="amount of something"
17. />
18. <Segmented tag="p" raised>
19. <Button onClick={() => gaugeValue = 0 }>0%</Button>
20. <Button onClick={() => gaugeValue = 0.25 }>25%</Button>
21. <Button onClick={() => gaugeValue = 0.5 }>50%</Button>
22. <Button onClick={() => gaugeValue = 0.75 }>75%</Button>
23. <Button onClick={() => gaugeValue = 1 }>100%</Button>
24. </Segmented>
25. </Block>

27. <BlockTitle>Circle Gauges</BlockTitle>
28. <Block strong>
29. <Row>
30. <Col class="text-align-center">
31. <Gauge
32. type="circle"
33. value={0.44}
34. valueText="44%"
35. valueTextColor="#ff9800"
36. borderColor="#ff9800"
37. />
38. </Col>
39. <Col class="text-align-center">
40. <Gauge
41. type="circle"
42. value={0.12}
43. valueText="$120"
44. valueTextColor="#4caf50"
45. borderColor="#4caf50"
46. labelText="of $1000 budget"
47. labelTextColor="#f44336"
48. labelFontWeight={700}
49. />
50. </Col>
51. </Row>
52. </Block>
53. <BlockTitle>Semicircle Gauges</BlockTitle>
54. <Block strong>
55. <Row>
56. <Col class="text-align-center">
57. <Gauge
58. type="semicircle"
59. value={0.3}
60. valueText="30%"
61. valueTextColor="#f44336"
62. borderColor="#f44336"
63. />
64. </Col>
65. <Col class="text-align-center">
66. <Gauge
67. type="semicircle"
68. value={0.5}
69. valueText="30kg"
70. valueTextColor="#e91e63"
71. borderColor="#e91e63"
72. labelText="of 60kg total"
73. labelTextColor="#333"
74. />
75. </Col>
76. </Row>
77. </Block>
78. <BlockTitle>Customization</BlockTitle>
79. <Block strong>
80. <Row>
81. <Col class="text-align-center">
82. <Gauge
83. type="circle"
84. value={0.35}
85. valueText="35%"
86. valueTextColor="#4caf50"
87. valueFontSize={51}
88. valueFontWeight={700}
89. borderWidth={20}
90. borderColor="#4caf50"
91. borderBgColor="#ffeb3b"
92. bgColor="#ffeb3b"
93. />
94. </Col>
95. <Col class="text-align-center">
96. <Gauge
97. type="circle"
98. value={0.67}
99. valueText="$670"
100. valueTextColor="#000"
101. borderColor="#ff9800"
102. labelText="of $1000 spent"
103. labelTextColor="#4caf50"
104. labelFontWeight={800}
105. labelFontSize={12}
106. borderWidth={30}
107. />
108. </Col>
109. </Row>
110. <br />
111. <Row>
112. <Col class="text-align-center">
113. <Gauge
114. type="semicircle"
115. value={0.5}
116. valueText="50%"
117. valueTextColor="#ffeb3b"
118. valueFontSize={41}
119. valueFontWeight={700}
120. borderWidth={10}
121. borderColor="#ffeb3b"
122. borderBgColor="transparent"
123. />
124. </Col>
125. <Col class="text-align-center">
126. <Gauge
127. type="semicircle"
128. value={0.77}
129. borderColor="#ff9800"
130. labelText="$770 spent so far"
131. labelTextColor="#ff9800"
132. labelFontWeight={800}
133. labelFontSize={12}
134. borderWidth={10}
135. />
136. </Col>
137. </Row>
138. </Block>
139. </Page>

143. <script>
144. import {Page, Navbar, Block, Gauge, Segmented, Button, BlockTitle, Row, Col} from 'framework7-svelte';

146. let gaugeValue = 0.5;
147. </script>

← Floating Action Button / FAB

Grid / Layout Grid →