Polymer 1.2: Änderung Papier-Element ausgewählt Hintergrundfarbe

ich für mein Problem gesucht und gefunden this Polymer 1.2: Änderung Papier-Element ausgewählt Hintergrundfarbe

Allerdings ist die akzeptierte Lösung nicht für mich arbeiten, aber ich kann nicht sagen, da ich nur 6 Ruf habe noch - .-

So Situation ist, ich will die paper-item aus dem Polymergerüst im Inneren des Papier listbox verwenden, das funktioniert, aber wenn Sie ein Element auswählen, indem Sie darauf klicken, um der Hintergrund grau ... Docs und die Antwort auf die Frage, die ich verlinkt abvoe vorschlagen zu überschreiben - Papier-Artikel-ausgewählt/- Papier-Artikel-Fokus Mixin, aber das funktioniert nicht für mich

Mein Code:

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

Hauptdokument Code:

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

Quelle

2015-12-28 Basti Skaldendudler

Sie benötigen kein 'is = "custom-style" 'in einem Polymer-Element, dies ist nur notwendig, wenn Sie das style-Tag außerhalb einer Polymer-Elementvorlage, zum Beispiel im Kopf, hinzufügen. –

Danke, dass du das unterstrichen hast! Es hat mein Problem leider nicht behoben:/ –

Das wurde erwartet, ansonsten hätte ich es als Antwort stattdessen als Kommentar hinzugefügt. Ich weiß nicht, warum es nicht wie erwartet funktioniert. –

ich die "Lösung" gefunden! Die Eigenschaft I überschreiben musste ist --paper-item-focused-before genannt

ich auf den Quellcode des <paper-item> gesucht und fanden diese in der Shared-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); 
    }

Man kann sehen, , dass der einzige Mix, der standardmäßig eine Farbe anwendet, --paper-item-focused-before ist, die einen Stil auf das Pseudoelement :before des <paper-item> anwendet.

Quelle

2015-12-28 12:59:35

Ich weiß, das ist ein älterer Thread, aber ich habe das gleiche Problem und der obige Vorschlag funktioniert nicht für mich. Wer weiß, ob es eine Möglichkeit gibt, dies in den Polymer 1.x-Versionen zu beheben? –

Hey @EvanCaldwell, wenn die gelieferte Lösung nicht für dich funktioniert, denke ich, dass es am besten ist, eine neue Frage mit deinem Code zu posten! Veröffentlichen Sie den Link hier im Kommentar! Ich werde das überprüfen –

--paper-item-focused-vorher: {background: transparent; };

Quelle

2018-03-06 10:03:35

Polymer 1.2: Änderung Papier-Element ausgewählt Hintergrundfarbe

Antwort

Verwandte Themen