如何在Angular Material步进器中将下一个按钮替换为垫片？

Question

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

这就是我想要的：

Answer 1

我只希望按钮看起来像一个材料芯片（而不是实际上是一个材料芯片），您可以从下一个按钮中删除“ mat-button”并添加您自己的类，例如'next_btn'：

<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。

Answer 2

如何将按钮插入芯片内部？并管理外观...在这里查看demo

HTML ：

mat-chip{padding:0;}

CSS ：

size()