gpt4 book ai didi

javascript - 纸波纹阻止点击容器元素并且不适合

转载 作者:行者123 更新时间:2023-12-03 11:17:00 25 4
gpt4 key购买 nike

这是我遇到问题的部分代码。

<core-toolbar id="main-toolbar" horizontal layout>
<core-icon-button icon="menu" class="bottom" core-drawer-toggle>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
</core-icon-button>
<div id="titulo" class="bottom" flex></div>
<paper-fab id="viva-close-button" icon="close" class="bottom" mini></paper-fab>
</core-toolbar>

预期的行为是涟漪传播到核心图标按钮的末尾,并且只有这个元素,另外,它应该切换菜单抽屉。它确实可以在没有纹波的情况下工作,但如果有纹波,它只会崩溃并烧毁。

波纹会贯穿所有工具栏,并且似乎还会阻止菜单图标接收单击事件,并且不会触发任何操作。
这一切也发生在菜单项上,但它们有点复杂(在我的情况至少是因为我扩展了它的功能)所以我决定尝试一下抽屉按钮。



编辑
代码工作:

    <paper-icon-button role="button" icon="menu" relative core-drawer-toggle>
<paper-ripple class="recenteringTouch circle" fit></paper-ripple>
</paper-icon-button>

完全不需要摆弄。 peper-icon-button 的作用就像一个魅力。

最佳答案

fit您使用的布局属性相当于设置 position: absolutetop/right/bottom/left: 0 。如explained in the docs ,这会调整元素的大小,以便它用 position: relative 填充第一个父元素放。既然您希望它填满您的 <core-icon-button> ,你可以设置position: relative如下所示(使用 relative 属性,这是 Polymer 定义的另一个快捷方式):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-icon-button/core-icon-button.html">

<template is="auto-binding">
Positioned:
<core-icon-button relative icon="menu" on-tap="{{alertTap}}">
<paper-ripple fit></paper-ripple>
</core-icon-button>
</template>

<script>
document.querySelector('template').alertTap = function(e) {
console.log('Tapped!', e);
};
</script>
</body>
</html>

此示例还显示了处理 tap通过 <core-icon-button> 上的处理程序进行事件.

但是...为什么不直接使用 <paper-icon-button> 反而?听起来您正在复制很多功能,但我不确定这样做有什么好处。

关于javascript - 纸波纹阻止点击容器元素并且不适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27298365/

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