Wie verwende ich Styling für Polymerelemente?

Ich habe versucht, die Dokumentation zu lesen, aber ich verstehe es nicht. Es scheint auch keine Stackoverflow-Fragen zu geben. Jetzt mit Polymer v1.0 mit MVC 5.Wie verwende ich Styling für Polymerelemente?

Nehmen wir zum Beispiel die Papier-Symbolleiste. Ich habe diesen Beispielcode:

<paper-toolbar> 
    <paper-icon-button icon="menu"></paper-icon-button> 
    <span class="title">My Title</span> 
    <paper-icon-button icon="refresh"></paper-icon-button> 
    <paper-icon-button icon="add">+</paper-icon-button> 
</paper-toolbar>

Wie kann ich einen weißen Hintergrund darauf anwenden?

In the polymer website:

Ich habe gesehen, dass es benutzerdefinierte Eigenschaften und Mixins ... aber wie kann ich sie nutzen?

Zum Beispiel, wie würde ich den "--paper-toolbar-background" überschreiben? um den Hintergrund weiß zu machen?

Danke!

Quelle

2016-05-01 Jose A

In diesem Fall können Sie einfach reines CSS verwenden. So etwas wie 'Papier-Werkzeugleiste {Hintergrund: #fff; } ' – winhowes

Ist das nicht in der [demo] (https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html&active=paper-toolbar) behandelt? –

Ich frage, weil ich eine Bootstrap-Mentalität habe, in der wir einfach das Element mit Klassen dekorieren, anstatt es mit unserem eigenen Code zu überschreiben (es sei denn, wir modifizieren es stark). –

Der Ansatz, den ich empfehle, ist ein Element für Styling-Zwecke, zum Beispiel ein app-theme.html. Legen Sie es in Ihr Elementverzeichnis und importieren Sie es.

Wenn Ihr app-theme.html wie folgt aussieht, sollte es Ihre Papier-Symbolleiste richtig stylen:

<style is="custom-style"> 
    paper-toolbar { 
     --paper-toolbar-background: var(--paper-blue-900); 
    } 
</style>

Ich benutze diesen Ansatz für die Papierelemente. Für benutzerdefinierte Elemente verwende ich das Styling in jedem Element.

Obwohl theoretisch können Sie einfach meinen obigen Code nehmen und einfügen, bevor Sie das Element verwenden, aber dieser Ansatz hat das Problem, dass das Standardstyling zuvor angewendet wird, was zu Pausen führt.

Natürlich könnten Sie auch eine normale app.css-Datei verwenden, um die Papierelemente zu stylen, aber dann müssten Sie das !important-Attribut verwenden, um das Standard-Styling des Elements zu überschreiben. Empfehle es aber nicht.

Ich hoffe, es hilft.

George

Quelle

2016-05-01 18:09:54 LoveAndHappiness

Wie verwende ich Styling für Polymerelemente?

Antwort

Verwandte Themen