如何设置纸张下拉菜单(如何使用mixins?)

时间:2015-08-18 16:11:27

标签: polymer mixins web-component paper-elements

我想设置纸张下拉菜单的样式,特别是例如元素的纸张输入组件。我想我需要学习/理解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?
    } 
}

2 个答案:

答案 0 :(得分:0)

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

您可以在":root"中定义变量。您想要反复使用的级别。 (是的,你实际输入":root"。)考虑:

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

答案 1 :(得分:-3)

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

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