如何在Angular Material步進器中將下一個按鈕替換為片狀芯片？

Question

我使用的是角材步進機，在步進機中，我想用mat-chip替換下一個按鈕，並充當與下一個按鈕相同的功能。 這是有角步進器堆疊閃擊示例

這就是我想要的 ：

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;
}

這里的例子。

Answer 2

將按鈕插入芯片內部如何？ 並管理外觀...在此處查看演示

HTML ：

<mat-chip-list>
  <mat-chip><button mat-button matStepperPrevious>Back</button></mat-chip>
  <mat-chip><button mat-button matStepperNext>Next</button></mat-chip>
</mat-chip-list>

CSS ：

mat-chip{padding:0;}