API リファレンス

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

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

名前	型	デフォルト	説明
`orientation (hub-milestones)`	`'vertical' \| 'horizontal'`	`'vertical'`	タイムラインのレイアウト方向。
`state (hub-milestone)`	`'complete' \| 'active' \| 'pending' \| 'error'`	`'pending'`	ノードの視覚的な state。ノードとコネクタの色を制御します。
`color (hub-milestone)`	`string`	`''`	ノードごとの色の上書き（任意の CSS 色）。state の色より優先されます。
`label (hub-milestone)`	`string`	`''`	`hubMilestoneNode` テンプレートが指定されていない場合に、ノード内に表示されるフォールバックテキスト。
`pulse (hub-milestones)`	`boolean`	`false`	`<hub-milestones>` に設定すると、アクティブノードが柔らかく広がる波を放ち、現在のステップを強調します。オプトイン。`prefers-reduced-motion` を尊重します。
`reveal (hub-milestones)`	`boolean`	`true`	タイムラインがビューポートに入ると、アクセントの線がアクティブノードまで満たされるアニメーションを再生します。デフォルトで有効 — `provideHubMilestones({ reveal: false })` でグローバルに、または `[reveal]` でインスタンスごとに設定できます。`prefers-reduced-motion` を尊重します。

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

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

名前	説明	サンプル
`hubMilestoneNode`	コンテンツがマイルストーンの円の内側にレンダリングされる `<ng-template>` を指定します（数字、アイコン、絵文字、アバター）。`label` および自動採番より優先されます。	`<hub-milestone> <ng-template hubMilestoneNode>★</ng-template> <h4>Shipped</h4> </hub-milestone>`
`hub-milestone body (ng-content)`	`hub-milestone` に直接投影されたコンテンツ（ノードテンプレートの外側）は、円の隣に本文としてレンダリングされます。	`<hub-milestone state="active"> <h4>Payment</h4> <p>Enter your payment method.</p> </hub-milestone>`