использования Differents цветов в бумажном меню Polymer 1,0

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'; 
} 

Надеюсь, эта помощь поможет вам в использовании!