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.