API リファレンス

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

インプット

19 個のインプットで 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`	`'primary'`	インジケーターの色を決めるセマンティックアクセントで、--hub-sys-color-* トークンファミリーにマッピングされます。
`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-ring · value`	`number`	`0`	スコア値。0..1 の比率または 0..max の数値で表されます。
`hub-ring · max`	`number`	`1`	値を正規化する基準となる上限。
`hub-ring · size`	`number \| string`	`'4rem'`	リングの外径（数値は px として扱われるか、任意の CSS 長さ文字列）。
`hub-ring · thickness`	`number \| string`	`'0.5rem'`	リングのストローク幅（数値は px として扱われるか、任意の CSS 長さ文字列）。
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	インジケーターをバンド（low/high）ごとに色付けし直す任意のカラーしきい値。
`hub-ring · showValue`	`boolean`	`true`	丸めたパーセンテージを中央に描画するかどうか。

アウトプット

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

テンプレート

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

名前	説明	サンプル
`hub-ring · <ng-content>`	リング中央にキャプションとして投影されるコンテンツで、組み込みのパーセンテージと並べて（またはその代わりに）描画されます。	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring>`