Блог

Главная - Вопросы по программированию - Область стилей по умолчанию добавляется в polymer 1.0

Область стилей по умолчанию добавляется в polymer 1.0

#css-selectors #polymer #polymer-1.0 #shadow-dom #paper-elements

#css-селекторы #polymer #polymer-1.0 #shadow-dom #paper-элементы

Вопрос:

Область по умолчанию добавлена вместо требуемого класса. Пытаюсь изменить цвет в выпадающем меню в разделе «Использование условного css в Polymer 1».

        <paper-item>
          <span class$ = {{setClass(item.no)}}> Polymer </span>
       </paper-item>

Комментарии:

1. Не могли бы вы, пожалуйста, поделиться своей setClass функцией и зависящим от нее классом в <style></style> . Или вы можете использовать style="color:{{setColor(item.no)}}" и в скрипте setColor(c){ return // conditional color }

2. да, я отредактировал ее, добавив функцию setClass

Ответ №1:

Ваш пример кажется нормальным, просто заключите его в двойные кавычки. Кроме того, вы можете попробовать следующее: 

 <span style$ = "color:{{setClass(item.no)}};"> Polymer </span>


setClass(n) {
   if(n) return n <100 ? "blue":"red";
}

Редактировать

Также необходимо удалить: <template item-template> inside oe-combo .

ДЕМОНСТРАЦИЯ

Комментарии:

1. о, спасибо, поскольку есть некоторые другие свойства, такие как font-weight. Вот почему приходится передавать имя класса, а не только цвет. Я попробую использовать двойные кавычки и дам вам знать к завтрашнему утру.

2. могу ли я узнать концепцию того, как поможет заключение в двойные кавычки. Я имею в виду, какое значение здесь имеют двойные кавычки…

3. это только синтаксис. Поскольку вы используете class=»имя_класса». Как и в моем примере выше.

4. Ops Я снова забыл вас разогреть. в теге <style> вам нужно объявить: paper-item > span {…} Вот почему я хотел поделиться вашим кодом стиля.

5. Спасибо @Halank , это работает. Синтаксис был правильным. Мне просто пришлось немного поработать, основываясь на существующем коде. Большое спасибо за эту отличную помощь.