Polymer 1.0 app-theme betrifft nur index.html und nicht benutzerdefinierte Elemente

8

Ich benutze das Polymer Starter Kit und wollte das Gerüst in sein eigenes Element <main-scaffold> bringen. Es gibt Stile in app-theme.html , die darauf angewendet wurden, bevor ich sie aus index.html in ihr eigenes Element verschoben habe, aber jetzt gilt keiner der Stile. Dies ist der Fall für alle Elemente, die ich in meine eigenen benutzerdefinierten Elemente eingefügt habe. Die benutzerdefinierten Stile, die auf <paper-material> von app-theme.html angewendet wurden, werden nicht in meinem <home-page> -Element angewendet. Ich möchte, dass bestimmte Elemente global auf Themen angewendet werden. Der einzige Stil in app-theme.html , der irgendwo anders angewendet werden kann, sind die benutzerdefinierten CSS-Eigenschaften wie --dark-primary-color .

Gibt es eine Möglichkeit, Themen zu erstellen, die für das gesamte Projekt gelten? Ich habe versucht, spezifisch app-theme.html in meine Elemente zu importieren, und es macht keinen Unterschied. Vielen Dank im Voraus.

    
Nick Ewer 17.06.2015, 19:23
quelle

3 Antworten

2

Die Themen von polymerthemes.com sollten für Ihr gesamtes Projekt gelten.

Laden Sie einfach eines der vorgefertigten Designs herunter (oder erstellen Sie Ihr eigenes mit dem Builder für Polymerthemen ) und verknüpfen Sie es gefällt das in deinem <head> :

%Vor%

Sehen Sie sich alternativ an, wie Stile auf dieser Site angewendet werden.

Disclaimer: Ich bin einer der Schöpfer von polymerthemes.com.

    
daskalou 18.06.2015, 23:42
quelle
0

Ich hatte das gleiche Problem und das Folgende funktionierte für mich. Fügen Sie in Ihrem dom-Modul Folgendes hinzu:

%Vor%

Zum Beispiel:

%Vor%

Dies scheint jedoch nur für bestimmte Papierelemente erforderlich zu sein. Die Papier-Checkbox funktioniert ohne sie. Aber keine ideale Lösung.

    
Richard Hundt 20.06.2015 12:52
quelle
0

Es wurde festgestellt, dass das Folgen in meinem benutzerdefinierten Element dazu führte, dass die Vulkanisieraufgabe in gulpfile.js zum Absturz kam (die verbleibenden Aufgaben wurden nicht ausgeführt).

%Vor%

Durch Verwendung des relativen Pfads wurde dieses Problem gelöst

%Vor%

Arbeitete irgendwie, aber ich denke, das ist nicht das Richtige. app-theme.html enthält viele CSS-Codes, die mein benutzerdefiniertes Element nicht benötigt. Die Verwendung von Mixins (@apply (- mixin-name);) sieht nach einem guten Weg aus, hat es aber noch nicht ausprobiert. Ich denke Modifikation zu app-theme.html wäre sowieso notwendig.

Ich wünsche Polymer Starter Kit führt eine Best Practice für die Anwendung Standard-Ränder / Polsterungen / etc für Papier-Material / etc.

Bearbeiten Jul 2

Folgendes wurde nicht angewendet.

app-theme.html

%Vor%

my-customelement-using-papermaterial.html

%Vor%

Meine Recherchen waren in diesen wenigen Stunden durcheinander und hatten falsche Ergebnisse, also habe ich beschlossen, die Portionen zu löschen. Entschuldigung für diejenigen, die sie gesehen haben und etwas unternommen haben.

    
Kenji 02.07.2015 02:56
quelle

Tags und Links