angular-material - 角度材料步进标题水平线和底部边框css

Question

我想根据附加的屏幕截图实现角度材料步进器，其中水平线在编辑状态下有一些不同的 css，当它完成时它就不同了。

在编辑状态下，我需要显示底线。

Answer 1

我们可以得到 stepper 的事件表单 selectionChange 方法：

selectionChange(event) {
    if (event.selectedIndex > 0) {
        const stepper = document.getElementsByClassName('mat-stepper-horizontal-line');
        stepper[event.selectedIndex - 1].classList.add('editState');
        for (let i = 0; i < event.previouslySelectedIndex; i++) {
            stepper[i].classList.add('completedState');
            stepper[i].classList.remove('editState');
        }
    }
}