Gauge - 图1

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

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. <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 →