Question

我正在尝试突出iron-list中的所选项目。但是，我似乎无法在CSS中找到任何要跟踪的属性，以专门为所选项目应用突出显示。我的模板代码如下所示：

<iron-list items="[[fileCells]]" as="item" selection-enabled>
  <template>
    <paper-icon-item on-tap="_onItemTap">
      <iron-icon icon="[[item.iconName]]" item-icon></iron-icon>
      <paper-item-body two-line>
        <div>[[item.fileName]]</div>
        <div secondary>[[item.progressValue]]</div>
      </paper-item-body>
    </paper-icon-item>
  </template>
</iron-list>
<array-selector id="selector" items="{{fileCells}}" selected="{{selected}}" toggle></array-selector>

细胞正确显示，我可以捕捉物品上的水龙头。在我开始实现iron-list之前，我在paper-icon-item元素中有一些静态iron-selector元素。我可以轻松地为所选元素设置样式：

paper-icon-item.iron-selected {
  background: #B2EBF2;
}

但是这不再适用于动态iron-list实现，因为class的{{1}}属性似乎在被选中时没有更新。是否有其他属性我可以追踪到仅选定所选项目的样式？重新实施paper-icon-item某处可以帮助我吗？

Answer 1

有一个selected属性，但它没有反映到一个类中。您可以通过侦听selected属性的更改并在计算绑定中更新类来手动执行此操作。

<paper-icon-item class$="[[_computeClass(selected)]]">

在原型中实现该功能，例如像这样。

_computeClass : function(selected) {
     return selected? "selected": "";
}

然后您可以在CSS中使用selected类。

Polymer 1.0：在CSS

1 个答案: