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

← Floating Action Button / FAB

Grid / Layout Grid →