I'm currently attempting to achieve a similar look and functionality as demonstrated here: https://material.angularjs.org/1.1.9/demo/chips#static-chips where the chips are static and not selectable, clickable, or hoverable. However, I am utilizing Angular Material for this particular task.
Is it feasible to replicate this behavior using Angular Material? I am aware of the "Static Content" section in the Angular Material documentation that suggests:
<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>
Nevertheless, my attempt at implementing this resulted in undesirable outcomes. Specifically, I aim to:
- Eliminate the gray color when hovering over the mat-chip
- Remove the ripple effect upon clicking on the mat-chip (I discovered the possibility of achieving this using
[disableRipple]="true"?) - Get rid of the gray color upon clicking on the mat-chip
I prefer zero effects when interacting with the chip by either hovering or clicking. Is there a solution within Angular Material to accomplish this? The current state of my code is as follows:
<mat-chip-list class="privacy-tags">
<mat-chip>Public</mat-chip>
<mat-chip>Private</mat-chip>
<mat-chip>Confidential</mat-chip>
</mat-chip-list>
UPDATE: Employing the following styling has led to these results:
.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;
}
The left tag remains clickable while the right one does not:
https://i.sstatic.net/SSF3Q.png
In case of having only a single tag: