gpt4 book ai didi

dart - 如何使用 material-ripple 来创建类似按钮的组件?

转载 作者:行者123 更新时间:2023-12-03 02:47:56 28 4
gpt4 key购买 nike

我想创建一个带有波纹动画的类似按钮的组件,它看起来像这样:

<div>Button</div> 
<material-ripple></material-ripple>

在过去,这工作正常,因为当我点击这个自定义元素时,我实际上点击了 material-ripple 并且点击事件冒泡到宿主元素。

从 angular_components 0.5.1 开始,material-ripple 在按键时显示居中的波纹。这与点击不同,因为事件目标是宿主元素本身而不是波纹组件。

有没有一种方法可以将按键事件传递给 material-ripple,以便播放涟漪动画?或者有没有办法以编程方式播放动画?

最佳答案

经过一些研究,我想出了一个使用 dart:html 的解决方案。

@ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;

@HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
(materialRipple.nativeElement as HtmlElement).dispatchEvent(
new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
.wrapped);
}

虽然由于 KeyEvent 和 KeyboardEvent 的一些错误,这在 Dartium 中不起作用,但它在 Chrome 中工作正常。

关于dart - 如何使用 material-ripple 来创建类似按钮的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43847031/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com