如何在 Angular Material 中向 mat-basic-chip 添加关闭图标按钮？

Question

我mat-basic-chip根据官方文档创建了一个自定义样式的筹码列表（无样式筹码）

我的筹码看起来像

现在，我想在buttons我的筹码附近添加默认mat-chips设置

这里是模板 mat-basic-chip

<mat-basic-chip *ngFor="let signal of signals">
                    <div matLine class="text-center">{{signal .name}}</div>
                    <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
</mat-basic-chip>

根据官方文档，除了 mat-chip 类之外，还接收 mat-basic-chip CSS 类。所以，这里是 .mat-basic-chip 的 CSS 来设计我的自定义芯片：

.mat-basic-chip {
  display: inline-block;
  clear: right;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 1vh;
  padding: .7vh 0vh .7vh .7vh;
  margin-right: 2vh;
  margin-top:1vh;
  min-width: 15vh;
 }

Answer 1

如何向 mat-basic 芯片添加删除按钮

您可以使用普通芯片mat-chip进行所有自定义设置，如图所示，而无需更改任何 css。

我以水果为例mat-chip。已将其更改为以下内容：

<mat-chip
  *ngFor="let fruit of fruits"
  [selectable]="selectable"
  [removable]="removable"
  (removed)="remove(fruit)">
  <div>
    <div matLine>{{fruit}}</div>
    <div matLine><small>(Default)</small></div>
  </div>
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

修改后的示例：https ://stackblitz.com/angular/mjygopomxvq

定制您的垫片

此方法是官方支持和推荐的。欲了解更多信息，请查看

• https://material.angular.io/guide/theming和
• https://material.angular.io/guide/theming-your-components

使用它，您可以添加color属性以针对不同状态进行自定义。为此修改.mat-chip.mat-custom类，而mat-custom可以是任何东西。只是mat-...必须是相同的。

社会保障体系

.mat-chip.mat-primary {
    background-color: blue;
    color: white;
}

.mat-chip.mat-accent {
    background-color: yellow;
    color: black;
}

/* Your implementation from the description */

.mat-chip.mat-anything {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
}

超文本标记语言

<mat-chip-list>
  <mat-chip color="primary" selected>Primary</mat-chip>
  <mat-chip color="accent" selected>Accent</mat-chip>
  <mat-chip color="anything" selected>
    <div>
      <div matLine>Anything</div>
      <div matLine><small>(Default)</small></div>
    </div>
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

DEMO供您参考：https://stackblitz.com/edit/angular-v5xq8y

请随意留下一些反馈。