稼働メーターOccupancyMeterExperimental

A labeled occupancy and capacity gauge with a neutral fill, formatted readout, and optional target marker.

プレビュー

満席率2 / 7卓

状態とバリエーション

満席率(中立)

既定 direction=neutral。低い値でも赤にならず、target はマーカー。

満席率2 / 7卓

プロパティ

表は横にスクロールできます
プロパティ初期値説明
labelReactNode-キャプションのラベル(満席率 / 稼働率 など)。文字列なら meter のアクセシブル名にもなります。
value / maxnumber-現在値と上限。
unitstring-readout の単位(卓・% など)。
captionReactNode-右側の readout を差し替え。既定は value / max。
targetnumber-目標マーカー。
directionMeterProps['direction']"neutral"Meter に転送。既定は neutral(低い値を赤にしない)。
tone / formatValue / size-Meter にそのまま転送。

使い方

import { OccupancyMeter } from "@gunjo/ui";

// A caption row (label + "2 / 7卓") above a neutral Meter bar.
<OccupancyMeter label="満席率" value={2} max={7} unit="卓" target={6} />

使用コンポーネント