Question

我已经查看了一些初学者项目以及查看itshackademic.com的一些代码，并开始通过采取点点滴滴来开发我自己的项目，但我的背景不是html所以不同的元素和如何他们排队有时会变得有点困难。我试图获得一个纸质阴影，以显示鼠标悬停发生时，通过绑定我可以看到值已经改变，但阴影永远不会显示。

主页面正在使用以下

执行模板

<div id="side">
       <core-selector id="waypointSelector" on-core-activate="{{coreSelect}}">
        <template repeat="{{waypoint in response.waypoints}}">
        <waypoint-card  waypoint={{waypoint}} ></waypoint-card>
     </template>
   </core-selector>
 </div>

然后我的卡片如下所示

<polymer-element name="waypoint-card" attributes="waypoint z" on-tap="{{togglePanel}}" on-mouseover="{{onMouseOver}}" on-mouseout="{{onMouseOut}}" >
<template>
 <template if="{{open}}">
  <core-icon class="red" icon="maps:place" ></core-icon>
 </template>
 <span>Name: {{waypoint.name}} Title: {{waypoint.title}}</span>
 <template if="{{open}}">
 <div vertical layout>
 <div horizontal layout center><h2>Latitude:</h2><span class="location"> {{waypoint.lat}}</span>
</div>
<div horizontal layout center><h2>Longitude:</h2><span class="location"> {{waypoint.lng}}</span>
 </div>
<paper-button raised class="colored" on-tap={{onTap}}>Delete</paper-button>
</div>
</template>
<paper-shadow id="shadow" class="waypoint-shadow"  z={{z}} ></paper-shadow>

</template>

我的问题是当我将鼠标悬停在元素上时，纸影的一面似乎没有改变，也没有显示出来。

Answer 1

我想在bower.json文件中，依赖关系看起来像这样：

"dependencies": {
    "polymer": "Polymer/polymer#master",
    "core-elements": "Polymer/core-elements#master",
    "paper-elements": "Polymer/paper-elements#master"
  }

如果是这样，您使用的paper-shadow版本是v0.5。*（截至今天），从0.5.0开始，该元素现在是一个容器，而不是针对另一个元素（official release notes）

因此，要修复代码，您需要将内容放在paper-shadow

中

<polymer-element name="waypoint-card" attributes="waypoint z" on-tap="{{togglePanel}}" on-mouseover="{{onMouseOver}}" on-mouseout="{{onMouseOut}}" >
<template>
  <paper-shadow id="shadow" class="waypoint-shadow"  z={{z}} >
    <template if="{{open}}">
      <core-icon class="red" icon="maps:place" ></core-icon>
    </template>
    <span>Name: {{waypoint.name}} Title: {{waypoint.title}}</span>
    <template if="{{open}}">
      <div vertical layout>
        <div horizontal layout center><h2>Latitude:</h2><span class="location"> {{waypoint.lat}}</span>
        </div>
        <div horizontal layout center><h2>Longitude:</h2><span class="location"> {{waypoint.lng}}</span>
        </div>
        <paper-button raised class="colored" on-tap={{onTap}}>Delete</paper-button>
      </div>
    </template>
  </paper-shadow>
</template>
</polymer-element>

除此之外一切都应该正常。

聚合物纸阴影没有显示

1 个答案: