纸卡中的纸项只能选择铁图标

Question

我在与可选的 paper-item 对象列表交互时遇到问题。 on-tap（或 on-click）函数仅在我单击项目内的 iron-icon 时触发，但单元格的其余部分没有响应。我目前在 paper-menu 中显示项目，但我尝试使用 iron-selector 产生相同的行为。

<paper-menu selected="{{selected}}">
    <paper-item on-tap="_onItemTap" role="menuitem">
        <iron-icon icon="cloud-done"></iron-icon>
        <paper-item-body two-line>
            <div>file_1.json</div>
            <div secondary class="second-item-line">Complete</div>
            </paper-item-body>
    </paper-item>
    (... other items)
</paper-menu>

paper-menu 嵌套在 neon-animated-pages 元素和 paper-card 元素中。我不知道这是否会影响它的行为。

我错过了什么吗？有没有办法使我尚未实现的整个 paper-item 可点击？还是其他因素会干扰？

更新：

经过进一步挖掘，我发现如果我将 'paper-item' 元素列表从 paper-card 元素的上下文中删除，它就可以完美工作。当我将列表放入卡片中时，它会以某种方式掩盖可选区域（但 iron-icon 仍然暴露）。在这种情况下，有什么方法可以将整个 paper-item 元素公开给选择吗？如果没有，我将不得不重新设计我的 UI 以不使用 paper-card.

Answer 1

我明白了。愚蠢的错误，真的。因为我的列表不在 div 和 class="card-content" 中，所以 paper-item 元素没有显示在卡片的顶层，变得不可用。在我的内容周围添加 div 和 class 解决了我的问题。代码结果如下：

<paper-card>
<div class="card-content">
    <iron-selector selected="{{selected}}">
        <paper-icon-item on-tap="_onItemTap">
            <iron-icon icon="cloud-done" item-icon></iron-icon>
            <paper-item-body two-line>
                <div>file_1.json</div>
                <div secondary>Complete</div>
            </paper-item-body>
        </paper-icon-item>
        <!-- other items -->
    </iron-selector>
</div>
</paper-card>

纸卡中的纸项只能选择铁图标

Only iron-icon is selectable in paper-item within paper-card

polymer

polymer-1.0