Gauge Vue Component

Gauge Vue Component

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

Gauge Components

There are following components included:

f7-gauge

Gauge Properties

Prop	Type	Default	Description
id	string		Gauge element ID attribute
type	string	circle	Gauge type. Can be `circle` or `semicircle`
value	number	0	Gauge value/percentage. Must be a number between `0` and `1`
size	number	200	Generated SVG image size (in px)
bg-color	string	transparent	Gauge background color. Can be any valid color string, e.g. `#ff00ff`, `rgb(0,0,255)`, etc.
border-bg-color	string	#eeeeee	Main border/stroke background color
border-color	string	#000000	Main border/stroke color
border-width	string	10	Main border/stroke width
value-text	string	null	Gauge value text (large text in the center of gauge)
value-text-color	string	#000000	Value text color
value-font-size	string	31	Value text font size
value-font-weight	string	500	Value text font weight
label-text	string	null	Gauge additional label text
label-text-color	string	#888888	Label text color
label-font-size	string	14	Label text font size
label-font-weight	string	400	Label text font weight

Examples

1. <template>
2. <f7-page>
3. <f7-navbar title="Gauge"></f7-navbar>

5. <f7-block strong class="text-align-center">
6. <f7-gauge
7. type="circle"
8. :value="gaugeValue"
9. :size="250"
10. border-color="#2196f3"
11. :border-width="10"
12. :value-text="`${gaugeValue * 100}%`"
13. :value-font-size="41"
14. value-text-color="#2196f3"
15. label-text="amount of something"
16. ></f7-gauge>
17. <f7-segmented tag="p" raised>
18. <f7-button @click="() => gaugeValue = 0">0%</f7-button>
19. <f7-button @click="() => gaugeValue = 0.25">25%</f7-button>
20. <f7-button @click="() => gaugeValue = 0.5">50%</f7-button>
21. <f7-button @click="() => gaugeValue = 0.75">75%</f7-button>
22. <f7-button @click="() => gaugeValue = 1">100%</f7-button>
23. </f7-segmented>
24. </f7-block>

26. <f7-block-title>Circle Gauges</f7-block-title>
27. <f7-block strong>
28. <f7-row>
29. <f7-col class="text-align-center">
30. <f7-gauge
31. type="circle"
32. :value="0.44"
33. value-text="44%"
34. value-text-color="#ff9800"
35. border-color="#ff9800"
36. ></f7-gauge>
37. </f7-col>
38. <f7-col class="text-align-center">
39. <f7-gauge
40. type="circle"
41. :value="0.12"
42. value-text="$120"
43. value-text-color="#4caf50"
44. border-color="#4caf50"
45. label-text="of $1000 budget"
46. label-text-color="#f44336"
47. :label-font-weight="700"
48. ></f7-gauge>
49. </f7-col>
50. </f7-row>
51. </f7-block>

53. <f7-block-title>Semicircle Gauges</f7-block-title>
54. <f7-block strong>
55. <f7-row>
56. <f7-col class="text-align-center">
57. <f7-gauge
58. type="semicircle"
59. :value="0.3"
60. value-text="30%"
61. value-text-color="#f44336"
62. border-color="#f44336"
63. ></f7-gauge>
64. </f7-col>
65. <f7-col class="text-align-center">
66. <f7-gauge
67. type="semicircle"
68. :value="0.5"
69. value-text="30kg"
70. value-text-color="#e91e63"
71. border-color="#e91e63"
72. label-text="of 60kg total"
73. label-text-color="#333"
74. ></f7-gauge>
75. </f7-col>
76. </f7-row>
77. </f7-block>

79. <f7-block-title>Customization</f7-block-title>
80. <f7-block strong>
81. <f7-row>
82. <f7-col class="text-align-center">
83. <f7-gauge
84. type="circle"
85. :value="0.35"
86. value-text="35%"
87. value-text-color="#4caf50"
88. :valueFontSize="51"
89. :valueFontWeight="700"
90. :border-width="20"
91. border-color="#4caf50"
92. border-bg-color="#ffeb3b"
93. bg-color="#ffeb3b"
94. ></f7-gauge>
95. </f7-col>
96. <f7-col class="text-align-center">
97. <f7-gauge
98. type="circle"
99. :value="0.67"
100. value-text="$670"
101. value-text-color="#000"
102. border-color="#ff9800"
103. label-text="of $1000 spent"
104. label-text-color="#4caf50"
105. :label-font-weight="800"
106. :label-font-size="12"
107. :border-width="30"
108. ></f7-gauge>
109. </f7-col>
110. </f7-row>
111. <br />
112. <f7-row>
113. <f7-col class="text-align-center">
114. <f7-gauge
115. type="semicircle"
116. :value="0.5"
117. value-text="50%"
118. value-text-color="#ffeb3b"
119. :valueFontSize="41"
120. :valueFontWeight="700"
121. :border-width="10"
122. border-color="#ffeb3b"
123. border-bg-color="transparent"
124. ></f7-gauge>
125. </f7-col>
126. <f7-col class="text-align-center">
127. <f7-gauge
128. type="semicircle"
129. :value="0.77"
130. border-color="#ff9800"
131. label-text="$770 spent so far"
132. label-text-color="#ff9800"
133. :label-font-weight="800"
134. :label-font-size="12"
135. :border-width="10"
136. ></f7-gauge>
137. </f7-col>
138. </f7-row>
139. </f7-block>
140. </f7-page>
141. </template>

143. <script>
144. export default {
145. data() {
146. return {
147. gaugeValue: 0.5,
148. };
149. },
150. };
151. </script>

← Floating Action Button / FAB

Grid / Layout Grid →