ゲージ Svelte コンポーネント

Framework7 にはゲージコンポーネントが含まれています。見栄えの良い、完全にレスポンシブな SVG ゲージを作成します。

ゲージコンポーネント

以下のコンポーネントが含まれています。

ゲージ

ゲージプロパティ

プロパティ	型	デフォルト	説明
id	文字列		ゲージ要素の ID 属性
type	文字列	circle	ゲージの種類。`circle` または `semicircle` を指定できます。
value	数値	0	ゲージの値/パーセンテージ。`0` から `1` の間の数値でなければなりません。
size	数値	200	生成された SVG 画像のサイズ (px)
bgColor	文字列	transparent	ゲージの背景色。任意の有効なカラー文字列を指定できます (例: `#ff00ff`、`rgb(0,0,255)` など)。
borderBgColor	文字列	#eeeeee	メインボーダー/ストロークの背景色
borderColor	文字列	#000000	メインボーダー/ストロークの色
borderWidth	文字列	10	メインボーダー/ストロークの幅
valueText	文字列	null	ゲージの値テキスト (ゲージの中央にある大きなテキスト)
valueTextColor	文字列	#000000	値テキストの色
valueFontSize	文字列	31	値テキストのフォントサイズ
valueFontWeight	文字列	500	値テキストのフォントウェイト
labelText	文字列	null	ゲージに追加するラベルテキスト
labelTextColor	文字列	#888888	ラベルテキストの色
labelFontSize	文字列	14	ラベルテキストのフォントサイズ
labelFontWeight	文字列	400	ラベルテキストのフォントウェイト

例

gauge.svelte

<script>
  import { Navbar, Page, BlockTitle, Block, Segmented, Button, Gauge } from 'framework7-svelte';

  let gaugeValue = 0.5;
</script>

<Page>
  <Navbar title="Gauge" />
  <Block strongIos outlineIos>
    <p>
      Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.
    </p>
  </Block>
  <Block strongIos outlineIos class="text-align-center">
    <Gauge
      type="circle"
      value={gaugeValue}
      size={250}
      borderColor="#2196f3"
      borderWidth={10}
      valueText={`${gaugeValue * 100}%`}
      valueFontSize={41}
      valueTextColor="#2196f3"
      labelText="amount of something"
    />
    <Segmented tag="p" raised>
      <Button active={gaugeValue === 0} onClick={() => (gaugeValue = 0)}>0%</Button>
      <Button active={gaugeValue === 0.25} onClick={() => (gaugeValue = 0.25)}>25%</Button>
      <Button active={gaugeValue === 0.5} onClick={() => (gaugeValue = 0.5)}>50%</Button>
      <Button active={gaugeValue === 0.75} onClick={() => (gaugeValue = 0.75)}>75%</Button>
      <Button active={gaugeValue === 1} onClick={() => (gaugeValue = 1)}>100%</Button>
    </Segmented>
  </Block>

  <BlockTitle>Circle Gauges</BlockTitle>
  <Block strongIos outlineIos>
    <div class="grid grid-cols-2 grid-gap">
      <div class="text-align-center">
        <Gauge
          type="circle"
          value={0.44}
          valueText="44%"
          valueTextColor="#ff9800"
          borderColor="#ff9800"
        />
      </div>
      <div class="text-align-center">
        <Gauge
          type="circle"
          value={0.12}
          valueText="$120"
          valueTextColor="#4caf50"
          borderColor="#4caf50"
          labelText="of $1000 budget"
          labelTextColor="#f44336"
          labelFontWeight={700}
        />
      </div>
    </div>
  </Block>
  <BlockTitle>Semicircle Gauges</BlockTitle>
  <Block strongIos outlineIos>
    <div class="grid grid-cols-2 grid-gap">
      <div class="text-align-center">
        <Gauge
          type="semicircle"
          value={0.3}
          valueText="30%"
          valueTextColor="#f44336"
          borderColor="#f44336"
        />
      </div>
      <div class="text-align-center">
        <Gauge
          type="semicircle"
          value={0.5}
          valueText="30kg"
          valueTextColor="#e91e63"
          borderColor="#e91e63"
          labelText="of 60kg total"
          labelTextColor="#333"
        />
      </div>
    </div>
  </Block>
  <BlockTitle>Customization</BlockTitle>
  <Block strongIos outlineIos>
    <div class="grid grid-cols-2 grid-gap">
      <div class="text-align-center">
        <Gauge
          type="circle"
          value={0.35}
          valueText="35%"
          valueTextColor="#4caf50"
          valueFontSize={51}
          valueFontWeight={700}
          borderWidth={20}
          borderColor="#4caf50"
          borderBgColor="#ffeb3b"
          bgColor="#ffeb3b"
        />
      </div>
      <div class="text-align-center">
        <Gauge
          type="circle"
          value={0.67}
          valueText="$670"
          valueTextColor="#000"
          borderColor="#ff9800"
          labelText="of $1000 spent"
          labelTextColor="#4caf50"
          labelFontWeight={800}
          labelFontSize={12}
          borderWidth={30}
        />
      </div>
    </div>
    <br />
    <div class="grid grid-cols-2 grid-gap">
      <div class="text-align-center">
        <Gauge
          type="semicircle"
          value={0.5}
          valueText="50%"
          valueTextColor="#ffeb3b"
          valueFontSize={41}
          valueFontWeight={700}
          borderWidth={10}
          borderColor="#ffeb3b"
          borderBgColor="transparent"
        />
      </div>
      <div class="text-align-center">
        <Gauge
          type="semicircle"
          value={0.77}
          borderColor="#ff9800"
          labelText="$770 spent so far"
          labelTextColor="#ff9800"
          labelFontWeight={800}
          labelFontSize={12}
          borderWidth={10}
        />
      </div>
    </div>
  </Block>
</Page>

このドキュメントを改善する

このページ

ゲージコンポーネント
ゲージプロパティ
例