Gauge - 图1

Gauge React Component

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

Gauge Components

There are following components included:

  • Gauge / F7Gauge

Gauge Properties

PropTypeDefaultDescription
idstringGauge element ID attribute
typestringcircleGauge type. Can be circle or semicircle
valuenumber0Gauge value/percentage. Must be a number between 0 and 1
sizenumber200Generated SVG image size (in px)
bgColorstringtransparentGauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
borderBgColorstring#eeeeeeMain border/stroke background color
borderColorstring#000000Main border/stroke color
borderWidthstring10Main border/stroke width
valueTextstringnullGauge value text (large text in the center of gauge)
valueTextColorstring#000000Value text color
valueFontSizestring31Value text font size
valueFontWeightstring500Value text font weight
labelTextstringnullGauge additional label text
labelTextColorstring#888888Label text color
labelFontSizestring14Label text font size
labelFontWeightstring400Label text font weight

Examples

  1. export default class extends React.Component {
  2. constructor() {
  3. super();
  4. this.state = {
  5. gaugeValue: 0.5,
  6. };
  7. }
  8. render() {
  9. return (
  10. <Page>
  11. <Navbar title="Gauge"></Navbar>
  12. <Block strong>
  13. <p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
  14. </Block>
  15. <Block strong className="text-align-center">
  16. <Gauge
  17. type="circle"
  18. value={this.state.gaugeValue}
  19. size={250}
  20. borderColor="#2196f3"
  21. borderWidth={10}
  22. valueText={`${this.state.gaugeValue * 100}%`}
  23. valueFontSize={41}
  24. valueTextColor="#2196f3"
  25. labelText="amount of something"
  26. />
  27. <Segmented tag="p" raised>
  28. <Button onClick={() => this.setState({ gaugeValue: 0 })}>0%</Button>
  29. <Button onClick={() => this.setState({ gaugeValue: 0.25 })}>25%</Button>
  30. <Button onClick={() => this.setState({ gaugeValue: 0.5 })}>50%</Button>
  31. <Button onClick={() => this.setState({ gaugeValue: 0.75 })}>75%</Button>
  32. <Button onClick={() => this.setState({ gaugeValue: 1 })}>100%</Button>
  33. </Segmented>
  34. </Block>
  35. <BlockTitle>Circle Gauges</BlockTitle>
  36. <Block strong>
  37. <Row>
  38. <Col className="text-align-center">
  39. <Gauge
  40. type="circle"
  41. value={0.44}
  42. valueText="44%"
  43. valueTextColor="#ff9800"
  44. borderColor="#ff9800"
  45. />
  46. </Col>
  47. <Col className="text-align-center">
  48. <Gauge
  49. type="circle"
  50. value={0.12}
  51. valueText="$120"
  52. valueTextColor="#4caf50"
  53. borderColor="#4caf50"
  54. labelText="of $1000 budget"
  55. labelTextColor="#f44336"
  56. labelFontWeight={700}
  57. />
  58. </Col>
  59. </Row>
  60. </Block>
  61. <BlockTitle>Semicircle Gauges</BlockTitle>
  62. <Block strong>
  63. <Row>
  64. <Col className="text-align-center">
  65. <Gauge
  66. type="semicircle"
  67. value={0.3}
  68. valueText="30%"
  69. valueTextColor="#f44336"
  70. borderColor="#f44336"
  71. />
  72. </Col>
  73. <Col className="text-align-center">
  74. <Gauge
  75. type="semicircle"
  76. value={0.5}
  77. valueText="30kg"
  78. valueTextColor="#e91e63"
  79. borderColor="#e91e63"
  80. labelText="of 60kg total"
  81. labelTextColor="#333"
  82. />
  83. </Col>
  84. </Row>
  85. </Block>
  86. <BlockTitle>Customization</BlockTitle>
  87. <Block strong>
  88. <Row>
  89. <Col className="text-align-center">
  90. <Gauge
  91. type="circle"
  92. value={0.35}
  93. valueText="35%"
  94. valueTextColor="#4caf50"
  95. valueFontSize={51}
  96. valueFontWeight={700}
  97. borderWidth={20}
  98. borderColor="#4caf50"
  99. borderBgColor="#ffeb3b"
  100. bgColor="#ffeb3b"
  101. />
  102. </Col>
  103. <Col className="text-align-center">
  104. <Gauge
  105. type="circle"
  106. value={0.67}
  107. valueText="$670"
  108. valueTextColor="#000"
  109. borderColor="#ff9800"
  110. labelText="of $1000 spent"
  111. labelTextColor="#4caf50"
  112. labelFontWeight={800}
  113. labelFontSize={12}
  114. borderWidth={30}
  115. />
  116. </Col>
  117. </Row>
  118. <br />
  119. <Row>
  120. <Col className="text-align-center">
  121. <Gauge
  122. type="semicircle"
  123. value={0.5}
  124. valueText="50%"
  125. valueTextColor="#ffeb3b"
  126. valueFontSize={41}
  127. valueFontWeight={700}
  128. borderWidth={10}
  129. borderColor="#ffeb3b"
  130. borderBgColor="transparent"
  131. />
  132. </Col>
  133. <Col className="text-align-center">
  134. <Gauge
  135. type="semicircle"
  136. value={0.77}
  137. borderColor="#ff9800"
  138. labelText="$770 spent so far"
  139. labelTextColor="#ff9800"
  140. labelFontWeight={800}
  141. labelFontSize={12}
  142. borderWidth={10}
  143. />
  144. </Col>
  145. </Row>
  146. </Block>
  147. </Page>
  148. )
  149. }
  150. }

← Floating Action Button / FAB

Grid / Layout Grid →