如何使角材料芯片静态？

Question

我正在尝试做类似的事情：https://material.angularjs.org/1.1.9/demo/chips#static-chips其中芯片不可选择、可点击或可悬停，只是想要它成为静态芯片。但是，我为此使用Angular Material。

是否可以使用 Angular Material 做同样的事情？我知道 Angular Material 文档中有一个 Static Content 部分，您可以在其中执行以下操作：

<mat-chip-set role="list">
  <mat-chip role="listitem"> Sugar </mat-chip>
  <mat-chip role="listitem"> Spice </mat-chip>
  <mat-chip role="listitem"> Everything Nice </mat-chip>
</mat-chip-set>

但是，我尝试过，但没有成功。基本上我想做的是：

1. 将鼠标悬停在垫片上时去除灰色
2. 消除点击垫片时的涟漪效果（我发现你可以这样做

   [disableRipple]="true"

   ？）
3. 点击垫片时去除灰色

当您将鼠标悬停或单击芯片时，我根本不希望有任何效果。有没有办法用有角度的材料做到这一点？这是我的代码目前的样子：

<mat-chip-list class="privacy-tags">
  <mat-chip>Public</mat-chip>
  <mat-chip>Private</mat-chip>
  <mat-chip>Confidential</mat-chip>
</mat-chip-list>

编辑：这就是我这样做时发生的事情：

.mat-chip {
    color: magenta !important;
    background-color: white !important;
    border: 1px magenta solid !important;
    pointer-events: none !important;
}

.mat-chip:hover {
    background-color: unset !important;
}

左侧标签可点击，右侧选项卡不可点击：

如果只有一个标签：

Answer 1

您可以通过将

disableRipple

定义为

true

来消除涟漪效应。对于悬停效果，您可以自定义

mat-chip

元素，如下所示，仅供参考，我使用 Angular Material v15 进行了测试，它具有

mat-chip-listbox

而不是

mat-chip-list

：

组件模板 HTML

<mat-chip-listbox>
  <mat-chip [disableRipple]="true">Public</mat-chip>
  <mat-chip [disableRipple]="true">Private</mat-chip>
  <mat-chip [disableRipple]="true">Confidential</mat-chip>
</mat-chip-listbox>

组件.scss样式

mat-chip {
  pointer-events: none; // maybe use it along with !important

  &:hover {
    background-color: unset; // maybe use it along with !important
  }
}

或.css:

mat-chip {
  pointer-events: none;
}

mat-chip:hover {
  background-color: unset;
}

Answer 2

使用 mat-basic-chip-option 而不是 mat-chip ，这将允许您自定义 css :

:host ::ng-deep .mat-mdc-basic-chip {
          border: 1px solid #cccccc;
          border-radius: 16px;
          width: 124px;
          height: 32px;
          text-align: center;
          cursor: pointer;
          &.mat-mdc-chip-selected {
            border: 2px solid purple;
            ;
            width: 114px;
            font-weight: bold;
            cursor: default;
          }
          &:hover {
            background-color: white !important;
          }
        }

Answer 3

两种选择

1. 使用

   <mat-chip>

2. 在 css 中使用禁用

<mat-chip-set aria-label="Fish selection">
  <mat-chip>Two fish</mat-chip>
  <mat-chip-option disabled class='chip'>Warn fish</mat-chip-option>
</mat-chip-set>

这是代码示例