Angular タイムライン・進捗ステップ | ng-hub-ui-milestones
Angular のタイムライン／進捗ステップコンポーネント。垂直・水平レイアウト、完全にカスタマイズ可能なノード、各ステップの内側と横のコンテンツ、CSS 変数テーマに対応します。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
向き
タイムラインを縦方向（デフォルトで、ウィザードやアクティビティフィードに最適）または横方向（ページ上部に進捗ステップを並べる）にレイアウトします。ノードは DOM の順序で自動的に採番されます。
縦型タイムライン
Information
Account details captured and verified.
Shipping
Delivery address confirmed.
Payment
Enter your payment method to continue.
Review
Place the order once everything looks right.
横型進行ステップ
Information
Account verified.
Shipping
Address confirmed.
Payment
In progress.
Review
Last step.
ノードの状態
各 `hub-milestone` は `state`（complete、active、pending、error）を持ち、これがノードとコネクターの色を駆動します。`label` 入力は円の内側にフォールバックテキストをレンダリングします。
ノードの状態
Complete
A finished step. Announced as “Completed”.
Active
The current step, highlighted with a ring and carrying aria-current="step".
Error
Something needs attention here. The mark on the circle says so without colour, and the step is announced as “Error”.
Pending
Not started yet — and announced as “Sin empezar”, because this node sets stateLabel.
カスタムノード＆テーマ設定
`<ng-template hubMilestoneNode>` で任意のコンテンツ（数字、アイコン、絵文字、アバター）を円内に投影したり、`color` で単一のノードをオーバーライドしたり、`--hub-milestone-*` CSS 変数でタイムライン全体のテーマを変更したりできます。
カスタムノード & ノードごとの色
Drafted
Article written and saved.
Reviewed
Approved by the editor.
Publishing
Going live across channels.
Promotion
Scheduled for next week.
CSS 変数によるテーマ設定
Kickoff
Project scoped and approved.
Build
Core features shipped.
Launch
Rolling out to production.
アニメーション
タイムラインがビューポートに入ると、アクセントの線がアクティブノードまで完成します（デフォルトで有効、`provideHubMilestones` でグローバルに設定可能）。`[pulse]` を追加すると、アクティブノードが柔らかな波を放ちます。どちらのアニメーションも `prefers-reduced-motion` を尊重します。
アクティブパルス付きの横型
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.