html - 如何在 Angular Material 步进器中用 mat-chip 替换下一个按钮？

Question

我正在使用 Angular 形 Material 步进器，在步进器中我想用 mat-chip 替换下一个按钮并充当与下一个按钮相同的功能。 Here is angular stepper stackblitz example

这就是我想要的:

Answer 1

如果您只是想让按钮看起来像一个 Material 芯片(而不是实际上是一个 Material 芯片)，您可以从下一个按钮中删除“mat-button”并添加您自己的类，例如'下一个按钮':

<button class="next_btn" matStepperNext>Next</button>

然后您可以只设置按钮的样式，使其看起来像一个筹码:

button.next_btn {
    padding: 7px 12px;
    border-radius: 16px;
    min-height: 32px;
    background-color: #e0e0e0;
    color: rgba(0,0,0,.87);
    box-shadow:none;
    border:none;
    cursor: pointer;
    outline:none;
}

button.next_btn:focus 
{
    outline:none;
}

示例 here .