Polymer 1.2: Zmiana koloru papieru wybrany element tła

Szukałem mojego problemu i znaleźć this Polymer 1.2: Zmiana koloru papieru wybrany element tła

Jednak przyjęte rozwiązanie nie działa dla mnie, ale ja nie mogę się wypowiedzieć, ponieważ mam jeszcze tylko 6 reputacji - .-

Więc sytuacja jest, chcę użyć paper-item z ram Polymer wewnątrz papier listbox to działa, ale po wybraniu elementu klikając na niego, zmiany tła na szary ... Docs a odpowiedź na pytanie, które łączyłem abvoe sugeruje zastąpić - mix-item-selected/--paper-item-focus mixin, ale to mi nie pasuje

Mój kod:

<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>

główny kod dokumentu:

... 
<!-- 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>

Źródło

2015-12-28 Basti Skaldendudler

Nie potrzebujesz 'is =" niestandardowego stylu "' w elemencie Polymer, jest to konieczne tylko, jeśli dodasz tag stylu poza szablonem elementów polimerowych, na przykład w głowie. –

Dzięki za wskazanie tego! Nie rozwiązało to mojego problemu, niestety:/ –

To było oczekiwane, w przeciwnym razie dodałem je jako odpowiedź zamiast komentarza. Nie wiem, dlaczego nie działa zgodnie z oczekiwaniami. –

znalazłem "rozwiązanie"! Nieruchomość musiałem zastąpić nazywa --paper-item-focused-before

Spojrzałem na kodzie źródłowym <paper-item> i znalazłem to w udostępnionym-styles.html

shared-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); 
    }

Można zobaczyć , że jedynym mixinem stosującym domyślnie kolor jest --paper-item-focused-before, który stosuje styl do pseudoelementu :before z <paper-item>.

Źródło

2015-12-28 12:59:35

Wiem, że jest to starszy wątek, ale mam ten sam problem, a powyższa sugestia nie działa dla mnie. Ktoś wie, czy istnieje sposób, aby to naprawić w wersji Polymer 1.x? –

Hej @EvanCaldwell, jeśli dostarczone rozwiązanie nie działa, myślę, że najlepiej jest opublikować nowe pytanie, w tym swój kod! Opublikuj link tutaj w komentarzu! sprawdzę to –

--paper-item-focused-before: {tło: przezroczyste; };

Źródło

2018-03-06 10:03:35

Polymer 1.2: Zmiana koloru papieru wybrany element tła

Odpowiedz

Powiązane problemy