Angular タイムライン・進捗ステップ | ng-hub-ui-milestones
Angular のタイムライン／進捗ステップコンポーネント。垂直・水平レイアウト、完全にカスタマイズ可能なノード、各ステップの内側と横のコンテンツ、CSS 変数テーマに対応します。
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> |
CSS 変数
20 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
ノード
円形ノード：そのサイズ、色、状態ごとの表面。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-milestone-node-size | 2.75rem | length | ノード円の直径。 |
--hub-milestone-node-font-size | 1.05rem | length | ノードコンテンツ（数値/ラベル）のフォントサイズ。 |
--hub-milestone-node-color | var(--hub-sys-color-primary, #0d6efd) | color | 完了/アクティブ状態のノード背景。ノードごとの `color` がこれを上書きします。 |
--hub-milestone-node-text | var(--hub-ref-color-white, #ffffff) | color | 色付きノード上のノードコンテンツの色。 |
--hub-milestone-pending-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | 保留中ノードの背景。 |
--hub-milestone-pending-color | var(--hub-sys-text-muted, #6c757d) | color | 保留中ノードのコンテンツの色。 |
--hub-milestone-pending-border | var(--hub-sys-border-color-default, #dee2e6) | color | 保留中ノードの境界線の色。 |
--hub-milestone-error-bg | var(--hub-sys-color-danger, #dc3545) | color | エラーノードの背景。 |
コネクタとレイアウト
ノード間に描画されるレールとタイムラインの間隔。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-milestone-connector-thickness | 3px | length | 接続レールの太さ。 |
--hub-milestone-connector-bg | var(--hub-milestone-node-color) | string | 完了/アクティブなノード間のコネクタの塗りつぶし。 |
--hub-milestone-connector-pending-bg | var(--hub-sys-border-color-default, #dee2e6) | color | 保留中ノードへ続くコネクタの塗りつぶし。 |
--hub-milestone-gap | 1rem | length | ノードレールと本文コンテンツの間隔。 |
--hub-milestone-spacing | 1.75rem | length | 連続するステップ間の間隔。 |
本文
各ノードの隣に投影されるテキストコンテンツ。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-milestone-body-color | var(--hub-sys-text-primary, #212529) | color | 本文の主要テキスト色。 |
--hub-milestone-body-muted | var(--hub-sys-text-muted, #6c757d) | color | 控えめな/二次的な本文テキスト色。 |
アニメーション
オプションのアクティブノードのパルスと、ビューポート進入時のリビール線を調整します。
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--hub-milestone-pulse-color | var(--hub-milestone-node-color) | color | アクティブノードのパルス波の色。デフォルトはノードのアクセント色で、ノードごとの `color` オーバーライドに従います。 |
--hub-milestone-pulse-duration | 1.6s | string | パルス1サイクルの長さ。 |
--hub-milestone-pulse-spread | 0.75rem | length | パルス波がノードからどれだけ外側へ広がるか。 |
--hub-milestone-reveal-duration | 0.5s | string | リビール時に各コネクタが満たされる長さ。 |
--hub-milestone-reveal-stagger | 0.14s | string | 連続するコネクタが満たされる間の遅延。カスケード状のリビールを作ります。 |
スタイリングとテーマ設定
スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。