Question

我正在尝试使用Polymer 1.0制作菜单我的菜单是这样的：

<paper-menu>
 <template is="dom-repeat" items="{{menu}}" as="item">
  <paper-item>
  <div>{{item.title}}</div>
  </paper-item>
 </template>
</paper-menu>

我搜索了每个纸张菜单和纸张项目属性，尝试了一些组合，但我没有找到任何可以为每个项目应用特定颜色的东西（即第一个项目在选择时将具有蓝色背景，第二个将是绿色的，...）

有没有解决办法呢？

感谢

修改

以下是HTML的呈现方式

<paper-menu class="style-scope widget-store x-scope paper-menu-0" role="menu" tabindex="0">
  <div class="selectable-content style-scope paper-menu">
    <paper-item class="style-scope widget-store x-scope paper-item-0" role="option" tabindex="0" aria-disabled="false">
      <span class="style-scope widget-store">1</span>
    </paper-item>
    <paper-item class="style-scope widget-store x-scope paper-item-0" role="option" tabindex="0" aria-disabled="false">
      <span class="style-scope widget-store">2</span>
    </paper-item>
  </div>
</paper-menu>

Answer 1

我想说，如果您有特殊需求，只需在元素中添加一个特定的class，然后在CSS中编写相应的规则。您可以看看我在以下组件中的表现：https://github.com/MeTaNoV/gold-password-input/blob/master/gold-password-input-strength-meter.html 我像这样定义了CSS：

  .None {
    color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important;
  }
  .VeryWeak {
    color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700) !important;
  }
  .Weak {
    color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700) !important;
  }
  .Medium {
    color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700) !important;
  }
  .Strong {
    color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700) !important;
  }
  .VeryStrong {
    color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important;
  }

这里有约束力：

<span id="strengthLabel">
  [[strengthMeterLabels.Label]]:
  <span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span>
  <paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button>
</span>

最后是逻辑：

// update the zxcvbn score property
switch(result.score) {
  case 0:
    this._strengthMeterScore = 'VeryWeak';
    break;
  case 1:
    this._strengthMeterScore = 'Weak';
    break;
  case 2:
    this._strengthMeterScore = 'Medium';
    break;
  case 3:
    this._strengthMeterScore = 'Strong';
    break;
  case 4:
    this._strengthMeterScore = 'VeryStrong';
    break;
  default:
    this._strengthMeterScore = 'None';
}

我希望你的用例有这个帮助！

在纸张菜单Polymer 1.0中使用不同的颜色

1 个答案: