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.