如何將造型應用於聚合物元素？

我一直在嘗試閱讀文檔，但我不明白。似乎也沒有任何stackoverflow問題。現在使用MVC 5中的聚合物v1.0。如何將造型應用於聚合物元素？

例如，讓我們拿走紙張工具欄。我有這個示例代碼：

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

我該如何應用白色背景？

In the polymer website:

我見過，有自定義屬性和混入......但我要如何使用呢？

例如，我將如何覆蓋「--paper-toolbar-background」？使背景變白？

謝謝！

來源

2016-05-01 Jose A

在這種情況下，您可以使用純CSS。像'paper-toolbar {background：#fff; }' – winhowes

[demo]（https://elements.polymer-project.org/elements/paper-toolbar?view=demo:demo/index.html&active=paper-toolbar）中沒有包含這些內容嗎？ –

我在問，因爲我有一種引導思維，我們只是用類來裝飾元素，而不是用我們自己的代碼重寫它（除非我們正在大量修改它）。 –

我推薦的方法是有一個用於造型目的的元素，例如app-theme.html。把它放在元素目錄中並導入它。

如果您app-theme.html看起來像以下時，應適當風格你的紙質工具欄：

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

我用這種方法進行紙張的元素。對於自定義元素，我將樣式放置在每個元素中。

雖然從理論上講，您可以只使用我的上述代碼並在使用該元素之前將其粘貼，但這種方法存在的問題是之前應用了默認樣式，導致中斷。

當然，您也可以使用普通的app.css文件來設置紙張元素的樣式，但是您必須使用!important屬性來覆蓋元素的默認樣式。不要推薦它。

希望它有幫助。

George

來源

2016-05-01 18:09:54 LoveAndHappiness

如何將造型應用於聚合物元素？

回答

相關問題