Angular タイムライン・進捗ステップ | ng-hub-ui-milestones
Angular のタイムライン／進捗ステップコンポーネント。垂直・水平レイアウト、完全にカスタマイズ可能なノード、各ステップの内側と横のコンテンツ、CSS 変数テーマに対応します。
最終更新 2026/08/08
概要
チームがこのライブラリを探す理由
オンボーディングフロー、注文追跡、ロードマップなど、カスタムノードと垂直・水平両方のレイアウトを備えた表示用の進捗トラッカーが必要なとき、この 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 22.3.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.3.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.2.1 - 7/28/26, 12:00 AM
fixed: Each milestone exposes role=listitem and the active node announces aria-current=step, completing the list semantics the container already declared.
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.