liquid-fill-gauge-wc

使用 Lit 建構 web component 的水位儀表 參考 D3 Liquid Fill Gauge

Installation

Node 環境

  npm i liquid-fill-gauge-wc

瀏覽器

  <script src="https://cdn.jsdelivr.net/npm/liquid-fill-gauge-wc@latest/dist/liquidFillGauge.min.js"></script>

Examples

  <liquid-fill-gauge
    width="200"
    height="200"
    min="0"
    max="100"
    value="55"
    amplitude="2"
  ></liquid-fill-gauge>

DEMO

Properties

| Name | Description | Type | | ---------- | ----------- | ------ | | width | SVG 寬度 | number | | height | SVG 高度 | number | | amplitude | 振幅 | number | | frequency | 频率 | number | | value | 目前值 | number | | min | 最小值 | number | | max | 最大值 | number | | unit | 單位 | string | | fps | 動畫速度 | number |

CSS Variable

  /* Default */
  --liguid-fill-color: #38bdf8;
  --liguid-fill-backward-color: white;
  --liguid-fill-forward-color: white;
  --liguid-fill-text-size: 2rem;
  --liguid-fill-text-color: black;
  --liguid-fill-overlay-text-color: white;
  --liguid-fill-unit-text-size: .85rem;

Event

• change
  目前值改變後觸發。