polymer - 如何设置 paper 下拉菜单的样式(如何使用 mixins？)

Question

我想设置 paper 下拉菜单的样式，特别是例如元素的 paper-input 组件。我想我需要学习/理解 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

我什至不知道从哪里开始。该文档建议将花括号中的某些内容作为 mixin 中的默认值，因此第一步可能类似于:

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

Answer 1

我自己几乎不了解这些东西，但我认为经过多次努力，我可能能够获得足够的洞察力来帮助您入门。

您可以在 ":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() 关键字在 :root 级别中分配的变量的地方:

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>