css 如何使角形材料芯片静止？

6jjcrrmo 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(179)

我试着做一些类似的事情：www.example.com，这里的芯片是不可选的，不可点击的，也不可悬停的，我只希望它是一个静态芯片。https://material.angularjs.org/1.1.9/demo/chips#static-chips where the chips aren't selectable, clickable or hoverable and just want it to be a static chip. However, I am using Angular Material for this.
有没有可能对角形材料做同样的事情？我知道角形材料文档中有一个静态内容部分，您可以：

<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.当您悬停在垫芯片上时，删除灰色
1.当你点击垫子芯片时，消除涟漪效应（我发现你可以这样做[disableRipple]="true"？）
1.当你点击垫子芯片时，去除灰色
我不希望你在芯片上悬停或点击时有任何效果。有没有办法用角材质做到这一点？下面是我的代码现在的样子：

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

左侧的标签可单击，而右侧的标签不可单击：

如果只有一个标签：

css

来源：https://stackoverflow.com/questions/75228907/how-to-make-angular-material-chips-static

2条答案

按热度按时间

3b6akqbq1#

您可以通过将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;
}

赞(0）回复(0）举报 2023-01-27

qvtsj1bj2#

两个选项
1.使用<mat-chip>
1.使用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>

Here is the code example

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何使角形材料芯片静止？

2条答案

相关问题

热门标签

最新问答