Gauge - 图1

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

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)
bg-colorstringtransparentGauge background color. Can be any valid color string, e.g. #ff00ff, rgb(0,0,255), etc.
border-bg-colorstring#eeeeeeMain border/stroke background color
border-colorstring#000000Main border/stroke color
border-widthstring10Main border/stroke width
value-textstringnullGauge value text (large text in the center of gauge)
value-text-colorstring#000000Value text color
value-font-sizestring31Value text font size
value-font-weightstring500Value text font weight
label-textstringnullGauge additional label text
label-text-colorstring#888888Label text color
label-font-sizestring14Label text font size
label-font-weightstring400Label 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 →