Angular 階梯式進度條

Question

我最近開始研究 angular，我正在嘗試將進度條添加到我的 angular 代碼中，但我不知道如何執行此操作。 我想要的進度條如附圖所示 ::

如何在使用angular的頁面的header中添加如圖所示的進度條？

Answer 1

您可以通過多種方式做到這一點。 1. 您可以通過使用https://bennettfeely.com/clippy/制作類似的形狀並使用不同的兩個不同的類作為狀態來使用 CSS 來實現。

2. 您可以使用相同形狀的兩種不同顏色的圖像，一種用於默認，另一種用於更改進度后。 並在每個成功步驟中啟用第二個圖像。

我只是告訴你這個邏輯。

Answer 2

使用CSS隱藏默認步進器header

.mat-horizontal-stepper-header-container {
    display: none !important;
}

使用EventEmitter<StepperSelectionEvent>監聽步進器變化並實現您自己的進度條 UI/組件。