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

【问题标题】：Angular material stepper header horizontal line and bottom border css角材料步进标题水平线和底部边框css
【发布时间】：2020-07-08 08:37:33
【问题描述】：

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

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

【问题讨论】：

标签： angular-material angular6 angular-material-stepper

【解决方案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');
        }
    }
}

【讨论】：