我试着做一些类似的事情: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;
}
左侧的标签可单击,而右侧的标签不可单击:
如果只有一个标签:
2条答案
按热度按时间3b6akqbq1#
您可以通过将
disableRipple
定义为true
来移除涟漪效果。对于悬停效果,您可以自定义mat-chip
元素,如下所示,仅供参考,我使用Angular Material v15测试了此效果,其中包含mat-chip-listbox
而非mat-chip-list
:组件模板HTML
组件.scss样式
或.css:
qvtsj1bj2#
两个选项
1.使用
<mat-chip>
1.使用css禁用
Here is the code example