Angular タイムライン・進捗ステップ | ng-hub-ui-milestones
Angular のタイムライン／進捗ステップコンポーネント。垂直・水平レイアウト、完全にカスタマイズ可能なノード、各ステップの内側と横のコンテンツ、CSS 変数テーマに対応します。
概要
チームがこのライブラリを探す理由
オンボーディングフロー、注文追跡、ロードマップなど、カスタムノードと垂直・水平両方のレイアウトを備えた表示用の進捗トラッカーが必要なとき、この Angular タイムラインコンポーネントを選んでください。
インストール
npm install ng-hub-ui-milestonesジャンプ
最適な用途
- オンボーディングフロー
- 注文追跡
- ロードマップ
- プロセスのステップ
について milestones
ng-hub-ui-milestones は、レールでつながれた一連のステップを垂直または水平に配置します。各ノードは完全にカスタマイズ可能で、円の中に番号・アイコン・アバターや任意のマークアップを配置でき、横にはリッチなコンテンツを置けます。すべての色・サイズ・コネクターは CSS 変数なので、ランタイムでテーマを再設定できます。
機能ガイド
向き
タイムラインを縦方向（デフォルトで、ウィザードやアクティビティフィードに最適）または横方向（ページ上部に進捗ステップを並べる）にレイアウトします。ノードは 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.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
カスタムノード＆テーマ設定
`<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 変数によるテーマ設定
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.
主な機能
最近の変更
Version 21.0.0 - 6/14/26, 12:00 AM
added: Initial release: hub-milestones container (vertical / horizontal orientation, auto-numbered nodes) and hub-milestone node with complete/active/pending/error states.
added: Per-node color override, label fallback and custom in-circle content via the hubMilestoneNode template directive.
added: Full --hub-milestone-* CSS-variable theming for node, connector, states and spacing.