API リファレンス

metrics の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

21 個のインプットで metrics を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`hub-progress · value`	`number`	`0`	現在の進捗値。[0, max] のスケールで表されます。
`hub-progress · max`	`number`	`100`	プログレススケールの上限。
`hub-progress · indeterminate`	`boolean`	`false`	所要時間が不明な作業のためにループするバーを描画します。aria-valuenow を外します。
`hub-progress · color`	`HubMetricsColor \| undefined`	`undefined`	インジケーターの色を決める任意のアクセント。単語（セマンティック名、登録済みアクセント、CSS 名前付き色）は単語自体をフォールバックとして --hub-sys-color-<name> にマッピングされ、リテラル（#hex、rgb()、oklch()、var()…）はそのまま使われます。指定するとインラインで適用され、省略すると --hub-progress-accent トークンがアクセントを決めます。
`hub-progress · size`	`HubProgressSize`	`'md'`	バーの太さを制御するサイズトークン（sm、md、または lg）。
`hub-progress · showValue`	`boolean`	`false`	丸めたパーセンテージをバーの隣に描画するかどうか。
`hub-progress · label`	`string`	`''`	プログレスバーが何を測定しているかを説明するアクセシブルなラベル。
`hub-meter · value`	`number`	`0`	現在の測定値。[min, max] のスケールで表されます。
`hub-meter · min`	`number`	`0`	スケールの下限。
`hub-meter · max`	`number`	`1`	スケールの上限。
`hub-meter · low`	`number \| undefined`	`undefined`	「low」領域の上限。省略された場合は min がデフォルトになります。
`hub-meter · high`	`number \| undefined`	`undefined`	「high」領域の下限。省略された場合は max がデフォルトになります。
`hub-meter · optimum`	`number \| undefined`	`undefined`	範囲内の推奨点。省略された場合は中間点がデフォルトになります。
`hub-meter · label`	`string`	`''`	ゲージが何を測定しているかを示すアクセシブルなラベル。role=meter の名前は作者だけが与えられるため、これがないと名前のないゲージになります。
`hub-ring · value`	`number`	`0`	スコア値。0..1 の比率または 0..max の数値で表されます。
`hub-ring · max`	`number`	`1`	値を正規化する基準となる上限。
`hub-ring · size`	`number \| string \| undefined`	`undefined`	リングの外径（数値は px として扱われるか、任意の CSS 長さ文字列）。指定するとインラインで適用されます。省略すると --hub-ring-size トークンが外径を決めます。
`hub-ring · thickness`	`number \| string \| undefined`	`undefined`	リングのストローク幅（数値は px として扱われるか、任意の CSS 長さ文字列）。指定するとインラインで適用されます。省略すると --hub-ring-thickness トークンが幅を決めます。
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	インジケーターをバンド（low/high）ごとに色付けし直す任意のカラーしきい値。
`hub-ring · showValue`	`boolean`	`true`	丸めたパーセンテージを中央に描画するかどうか。
`hub-ring · label`	`string`	`''`	リングが何を評価しているかを示すアクセシブルなラベル。投影されたキャプションも中央のパーセンテージも role=meter の名前にはなりません。

アウトプット

アウトプットはまだドキュメント化されていません。

テンプレート

自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hub-ring · <ng-content>`	リングの中央にキャプションとして投影されるコンテンツ。組み込みのパーセンテージと並べて（またはその代わりに）表示されます。これは装飾であって名前ではありません。role="meter" の要素に名前を与えられるのは作者だけなので、`label` 入力を渡してください。	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring>`