Angular タイムライン・進捗ステップ | ng-hub-ui-milestones
Angular のタイムライン／進捗ステップコンポーネント。垂直・水平レイアウト、完全にカスタマイズ可能なノード、各ステップの内側と横のコンテンツ、CSS 変数テーマに対応します。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
縦型タイムライン
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.
アクティブパルス付きの横型
Ordered
Payment received.
Packed
Ready to ship.
In transit
Out for delivery now.
Delivered
Arriving soon.
ノードの状態
Complete
A finished step.
Active
The current step, highlighted with a ring.
Error
Something needs attention here.
Pending
Not started yet.
カスタムノード & ノードごとの色
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.