jde*_*ere 6 polymer paper-elements
我正在使用Polymer来建立一个网站.我目前在纸张波纹方面遇到了一些问题.现在我遇到的问题是,单击h2或时h3,即使删除<div class='description'>-tag和它的关闭选项卡时也不会出现波纹.看paper-ripple它的大小,它涵盖了整体<div class='album-header'>,所以这不应该是问题.
此外,<div class='description'>在填充区域中点击,也会发生波纹.
<div class="album-header" vertical layout on-tap="{{albumTapped}}">
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2"></content>
<content select="h3"></content>
</div>
</div>
编辑:
我已经做了一些进一步的测试,我已经缩小了问题范围.看看这个例子.除非您还指定了不透明度,否则将样式应用于子元素不会产生任何问题.在链接中给出的示例中,绿色文本已被赋予不透明度.单击此文本不会为我生成涟漪(在Chrome 36中运行).(绿色的分配与它无关,只是为了更容易发现).单击该<h3>标记周围的任何位置都会发生纹波.
你必须只增加z-index外部容器，所以所有的东西<content>都会在它下面。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
<script>console.clear()</script>
</head>
<body>
<style>
album-small {
width: 200px;
margin: 10px;
}
</style>
<div layout horizontal>
<album-small>
<h2>The Shatner</h2>
<h3>An interminable rambling spoken word piece.</h3>
</album-small>
<album-small>
<h2>What</h2>
<h3>What wat what wat what what wat</h3>
</album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
<style>
.album-header {
/* Note: relative positioning seems necessary
for paper-ripple. */
position: relative;
padding: 10px;
height: 200px;
z-index: 100;
}
</style>
<div class="album-header" vertical layout>
<paper-ripple class='recenteringTouch' fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2">hi</content>
<content select="h3">hi</content>
</div>
</div>
</template>
</polymer-element>
</body>
</html>