代码之家 › 专栏 › 技术社区 › fairlyMinty

如何使角材料芯片保持静态?

angular-material angular css javascript

fairlyMinty · 技术社区 · 2 年前

我正在尝试做类似的事情: https://material.angularjs.org/1.1.9/demo/chips#static-chips 其中芯片是不可选择的、可点击的或可悬停的,只希望它是一个静态芯片。然而,我正在使用 Angular Material 为此。

有可能对“Angular Material”做同样的事情吗?我知道有一个 Static Content 在Angular Material文档中,您可以执行以下操作:

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

然而,我试过了,但没有成功。基本上我想做的是:

将鼠标悬停在垫子芯片上时,去掉灰色
当你点击垫子芯片时,消除波纹效应(我发现你可以这样做 [disableRipple]="true" ?)
点击垫子芯片时去掉灰色

当你悬停或点击芯片时,我根本不想有任何效果。有没有办法用棱角分明的材料来做到这一点?以下是我的代码目前的样子:

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

左边的标签是可点击的,右边的标签是不可点击的:

如果只有一个标签:

1 回复 | 直到 2 年前

Andres2142 2 年前

可以通过定义来移除波纹效果 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>

component.scs样式

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

-1

Will 2 年前

两个选项

使用 <mat-chip>
对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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前