Polymer 1.2: Modifica della carta elemento di sfondo colore selezionato

Ho cercato il mio problema e ha trovato this Polymer 1.2: Modifica della carta elemento di sfondo colore selezionato

Tuttavia, la soluzione accettata non funziona per me, ma non posso commentare, dal momento che ho solo il 6 Reputazione ancora - .-

Così situazione è, io voglio usare il paper-item dal quadro Polymer all'interno della carta-casella di riepilogo che funziona, ma quando si seleziona un elemento facendo clic su di esso, lo sfondo cambia al grigio ... Documenti e la risposta alla domanda che ho linkato suggerirebbe di sovrascrivere - paper-item-selected/--paper-item-focus mixin, ma questo non funziona per me

Il mio codice:

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

principale Codice documento:

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

fonte

2015-12-28 Basti Skaldendudler

Non è necessario 'is =" custom-style "' in un elemento Polymer, questo è necessario solo se si aggiunge il tag di stile al di fuori di un modello di elementi Polymer, ad esempio in testa. –

Grazie per avermelo fatto notare! Sfortunatamente non ha risolto il mio problema:/ –

Era previsto, altrimenti l'ho aggiunto come risposta invece come commento. Non so perché non funziona come previsto. –

ho trovato la "soluzione"! La proprietà ho dovuto sovrascrivere è chiamato --paper-item-focused-before

ho guardato il codice sorgente del <paper-item> e trovato questo nella shared-styles.html

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

si può vedere , che l'unica combinazione di un colore per impostazione predefinita è --paper-item-focused-before, che applica uno stile allo pseudoelemento :before dello <paper-item>.

fonte

2015-12-28 12:59:35

So che questo è un thread più vecchio ma sto avendo lo stesso problema e il suggerimento sopra non funziona per me. Qualcuno sa se c'è un modo per risolvere questo problema nelle versioni 1.x di Polymer? –

Hey @EvanCaldwell, se la soluzione fornita non funziona per te, penso che sia il migliore per pubblicare una nuova domanda incluso il tuo codice! Pubblica il link qui nel commento! Lo guarderò –

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

fonte

2018-03-06 10:03:35

Polymer 1.2: Modifica della carta elemento di sfondo colore selezionato

risposta

Problemi correlati