纸张波纹可防止点击容器元素并且不适合
paper-ripple prevents click on container element and doesn't fit
这是我困扰的部分代码。
<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
布局属性等效于使用 top/right/bottom/left: 0
设置position: absolute
。如文档中所述,这会调整元素的大小,以便它用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>
此示例还演示了通过 <core-icon-button>
上的处理程序处理 tap
事件。
但。。。为什么不直接使用<paper-icon-button>
呢?听起来您正在复制很多该功能,我不确定有什么好处。
相关文章:
- 锚点元素不't使用svg时,请打开EDGE上的href
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- ResolveUrl没有'我似乎不适合当链接到具有动态虚拟目录的外部javascript文件时
- JQuery:使用clone()生成的元素不采用原始的事件属性
- 元素不会添加到Javascript数组中
- Jquery live()绑定没有'I don’我对某些元素不感兴趣
- 为什么表单元素不应命名为submit
- Chrome应用程序在全屏中创建新窗口-html元素不是全高的
- iframe中的jQuery查找元素不起作用
- jQuery选择ajax调用中附加的元素不起作用
- 导航菜单不适合移动浏览器
- 使用jquery添加到表单内部表中的元素不会过帐
- 我的ID获取元素不起作用
- 比较数组中的连续元素不会返回任何结果(javascript)
- 动态添加的输入元素不会在脚本中返回值
- 新的javascript HTML元素不遵循css规则
- 元素不会为 JS 切换功能显示
- 未来元素不会与 on() 绑定
- 当移动方向从横向更改为纵向时,窗口元素不适合窗口
- 纸张波纹可防止点击容器元素并且不适合