AngularMat-Chip在焦点时背景色被更改
创始人
2024-10-28 06:31:11
0

这个问题可能是因为使用了:focus伪类来应用样式,而它也被应用到了Mat-Chip组件上。解决这个问题的方法是使用Angular CDK提供的:focusable属性。

示例代码:

HTML: {{chipLabel}} cancel

TS: import { FocusableOption } from '@angular/cdk/a11y';

@Component({ ... }) export class ChipComponent implements OnInit, FocusableOption { readOnly = false;

constructor(private elementRef: ElementRef) {}

ngOnInit() {}

focus() { this.elementRef.nativeElement.focus(); } }

样式: .mat-chip-focus { background-color: #e0e0e0; }

这里我们使用了FocusableOption接口来让组件变成可获取焦点,同时使用:focusable属性来实现Mat-Chip组件的选中效果。也可以使用:focus-within来替代:focus来避免子元素受到影响。

相关内容

热门资讯

透视神器!We poker辅助... 透视神器!We poker辅助器下载,wepoker高级辅助(详细可以透视码)1、We poker辅...
透视中牌率!wepoker免费... 透视中牌率!wepoker免费透视脚本,wejoker辅助器怎么卖(详细私人局透视)1、起透看视 w...
透视玄学!wepoker辅助器... 透视玄学!wepoker辅助器怎么弄,wepoker网页版透视方法(详细辅助器)所有人都在同一条线上...
透视免费!wepoker买钻石... 透视免费!wepoker买钻石有用吗,wepoker开辅助能查到吗(详细透视脚本)所有人都在同一条线...
透视黑科技!wepoker免费... 透视黑科技!wepoker免费透视脚本,wepoker私人局辅助(详细辅助是真的假的)1、每一步都需...
透视系统!wepoker透视脚... 透视系统!wepoker透视脚本苹果版,wepokerplus透视脚本免费(详细透视挂底牌);1、w...
透视辅助!wepokerh5破... 透视辅助!wepokerh5破解,wejoker透视方法(详细可以发冤家牌)1、wejoker透视方...
透视ai代打!wejoker辅... 透视ai代打!wejoker辅助软件,wepoker有插件吗(详细可以获得好牌)wepoker有插件...
透视辅助!wepokerplu... 透视辅助!wepokerplus开挂,wepoker模拟器哪个好用(详细免费钻石)1)wepoker...
透视辅助!wepoker透视脚... 透视辅助!wepoker透视脚本视频,黑侠破解wepoker(详细辅助软件)wepoker透视脚本视...