稼働メーターOccupancyMeterExperimental
A labeled occupancy and capacity gauge with a neutral fill, formatted readout, and optional target marker.
プレビュー
満席率2 / 7卓
状態とバリエーション
満席率(中立)
既定 direction=neutral。低い値でも赤にならず、target はマーカー。
満席率2 / 7卓
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | キャプションのラベル(満席率 / 稼働率 など)。文字列なら meter のアクセシブル名にもなります。 |
| value / max | number | - | 現在値と上限。 |
| unit | string | - | readout の単位(卓・% など)。 |
| caption | ReactNode | - | 右側の readout を差し替え。既定は value / max。 |
| target | number | - | 目標マーカー。 |
| direction | MeterProps['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} />