Question

我想设置纸张下拉菜单的样式，特别是例如元素的纸张输入组件。我想我需要学习/理解mixins是如何工作的。

我可能需要将paper-dropdown-menu的mixins与paper-input-container的mixins / custom属性结合起来，我对吗？

https://elements.polymer-project.org/elements/paper-dropdown-menu https://elements.polymer-project.org/elements/paper-input?active=paper-input-container

我甚至不知道从哪里开始。 doc在mixin中将大括号中的内容作为默认值，因此第一步可能是：

paper-dropdown-menu {
    --paper-dropdown-menu: {
        something here?
    } 
}

Answer 1

我自己几乎不了解这些东西，但我认为经过多次努力，我可能会有足够的洞察力让你开始。

您可以在＆＃34;：root＆＃34;中定义变量。您想要反复使用的级别。（是的，你实际输入＆＃34;：root＆＃34;。）考虑：

<style is="custom-style">
    :root{
        --main-color: rgb(244,67,54);
        --dark-color: rgba(0, 0, 0, 0.258824);
        --light-color: rgb(153, 153, 153);   
        --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
        --app-header-background-front-layer-height: 400px;         
    }
</style>

也许您正在使用Polymer appheader元素，并且您在文档中看到可以设置背景：

app-header {     
      --app-header-background-front-layer: {
          /*something or other*/              
      };
      --app-header-background-rear-layer: {
        /*something or other*/
      };
    }

您可以使用var（）关键字在以下位置使用您在根目录中指定的变量：

app-header {     
      --app-header-background-front-layer: {
          background-image: var(--app-header-background-front-layer-background-image);              
      };
      --app-header-background-rear-layer: {
        /* The header is blue when condensed */
        background-color: var(--main-color);
      };
    }

以下是一些示例代码：

<style is="custom-style">
    :root{
        --main-color: rgb(244,67,54);
        --dark-color: rgba(0, 0, 0, 0.258824);
        --light-color: rgb(153, 153, 153);   
        --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
        --app-header-background-front-layer-height: 400px;         
    }

    app-header {     
      --app-header-background-front-layer: {
          background-image: var(--app-header-background-front-layer-background-image);

      };
      --app-header-background-rear-layer: {
        /* The header is blue when condensed */
        background-color: var(--main-color);
      };
    }

    paper-icon-button {
      --paper-icon-button-ink-color: white;
    }

    paper-dropdown-menu {
        --paper-input-container-focus:{
            color: var(--main-color);
        }; 
        --paper-input-container: {
            color: var(--dark-color);
        };
        --paper-input-container-input: {
            color: var(--light-color);
        };
        --paper-input-container-label: {
            color: var(--main-color);
        };
    }
</style>

Answer 2

你可以在这里找到一些例子：

https://www.polymer-project.org/1.0/docs/devguide/styling.html

如何设置纸张下拉菜单（如何使用mixins？）

2 个答案: