Polymer 1.2: Изменение бумаги элемент, выбранный цвет фона

Я искал свою проблему и нашел this Polymer 1.2: Изменение бумаги элемент, выбранный цвет фона

Однако принятое решение не работает для меня, но я не могу комментировать, так как у меня только 6 Репутация пока - .-

Так Ситуация, я хочу использовать paper-item из каркаса полимера внутри бумажной ListBox Это работает, но когда вы выбираете пункт, нажав на нее, меняется фон в серый ... Docs и ответ на вопрос, который я связал с abvoe, предлагает переписать - mix-item-selected/-paper-item-focus mixin, но это не работает для меня

Мой код:

<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html"> 


<dom-module id="cit-literal-item"> 

<template> 
    <!-- scoped CSS for this element --> 
    <style is="custom-style"> 
     .spacer { 
      @apply(--layout-flex); 
     } 
     paper-item { 
      --paper-item-selected: { 
       background-color: #FFFFFF; 
      }; 

      --paper-item-focused: { 
       background-color: #FFFFFF; 
      }; 
     } 
    </style> 
    <paper-item>Test</paper-item> 
</template> 
</dom-module>

Главная Код документа:

... 
<!-- Polymer custom elements --> 
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html"> 
... 
<body> 
    <paper-listbox> 
     <cit-literal-item></cit-literal-item> 
     <cit-literal-item></cit-literal-item> 
    </paper-listbox> 
</body>

источник

2015-12-28 Basti Skaldendudler

В элементе Polymer вам не нужно 'is =" custom-style "', это необходимо, только если вы добавляете тег стиля вне шаблона элементов Polymer, например, в голове. –

Спасибо, что указали это! К сожалению, это не исправить мою проблему:/ –

Это ожидалось, иначе я добавил его как ответ вместо этого в качестве комментария. Я не знаю, почему он работает не так, как ожидалось. –

Я нашел "решение"! Свойства я должен был переписать называется --paper-item-focused-before

Я смотрел на исходном коде <paper-item> и нашел, что это в общем-styles.html

разделяемого styles.html

:host(.iron-selected) { 
    font-weight: var(--paper-item-selected-weight, bold); 
    @apply(--paper-item-selected); 
    } 
    :host([disabled]) { 
    color: var(--paper-item-disabled-color, --disabled-text-color); 
    @apply(--paper-item-disabled); 
    } 
    :host(:focus) { 
    position: relative; 
    outline: 0; 
    @apply(--paper-item-focused); 
    } 
    :host(:focus):before { 
    @apply(--layout-fit); 
    background: currentColor; 
    content: ''; 
    opacity: var(--dark-divider-opacity); 
    pointer-events: none; 
    @apply(--paper-item-focused-before); 
    }

можно увидеть , что только mixin применяет цвет по умолчанию: --paper-item-focused-before, который применяет стиль к псевдоэлементу :before<paper-item>.

источник

2015-12-28 12:59:35

Я знаю, что это более старая тема, но у меня такая же проблема, и приведенное выше предложение не работает для меня. Кто-нибудь знает, есть ли способ исправить это в версиях Polymer 1.x? –

Эй @ EvanCaldwell, если предоставленное решение не работает для вас, я думаю, что лучше всего разместить новый вопрос, включая ваш код! Отправьте ссылку здесь, в комментарии! Я проверю это –

- paper-item-focus-before: {background: transparent; };

источник

2018-03-06 10:03:35

Polymer 1.2: Изменение бумаги элемент, выбранный цвет фона

ответ

Смежные вопросы