Question

我试图根据我的设计来设计纸张输入。我使用了here 描述的一些自定义属性，但并非所有这些都有用。

我使用 - paper-input-container-label 和 - paper-input-container-input-focus 时遇到问题。

也许我尝试以错误的方式使用它们，或者需要一些额外的步骤。

这是我的代码

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<dom-module id="first-element">
  <template>
    <style>
      paper-input {
        --paper-input-container-color: rgb(64, 64, 64);
        --paper-input-container-focus-color: rgb(64, 64, 64);

        --paper-input-container: {
          border: none;
          padding: 0px;
        }


        --paper-font-subhead: {
          font-size: 100%;
        }

        --paper-input-container-underline-focus: {
          display: none;
        }

        --paper-input-container-underline: {
          display: none;
        }

        --paper-input-container-input: {
          height: 24px;
          line-height: 20px;
          padding: 0 4px;
          border: 1px solid rgb(194, 198, 199);
        }

        --paper-input-container-input-focus: {
          border-color:red;
        }

        --paper-input-container-label {
          font-weight: bold;
        }      

        --paper-input-container-invalid-color: red;
      }

       :host {
        display: block;
      }
    </style>

    <paper-input always-float-label label="Floating label"></paper-input>
    <paper-input label="username">
      <iron-icon icon="icons:accessible" slot="prefix"></iron-icon>
      <div slot="suffix">@email.com</div>
    </paper-input>


  </template>

  <script>
    class FirstElement extends Polymer.Element {
      static get is() { return 'first-element'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'first-element'
          }
        };
      }
    }

    window.customElements.define(FirstElement.is, FirstElement);
  </script>
</dom-module>

Answer 1

我不确定你期待什么结果所以很难帮助你，但有一点我确定你的风格标签太乱了。你需要在mixins之后写一个分号，因为它们就像css属性，每个css属性都是分号分开的。
尝试你的代码：

<style>
  :host {
    display: block;
  }

  paper-input {
    --paper-input-container-color: rgb(64, 64, 64);
    --paper-input-container-focus-color: rgb(64, 64, 64);

    --paper-input-container: {
      border: none;
      padding: 0px;
    };

    --paper-font-subhead: {
      font-size: 100%;
    };

    --paper-input-container-underline-focus: {
      display: none;
    };

    --paper-input-container-underline: {
      display: none;
    };

    --paper-input-container-input: {
      height: 24px;
      line-height: 20px;
      padding: 0 4px;
      border: 1px solid rgb(194, 198, 199);
    };

    --paper-input-container-input-focus: {
      border-color: red;
    };

    --paper-input-container-label: {
      font-weight: bold;
    };

    --paper-input-container-invalid-color: red;
  }
</style>

另一件事，您正在尝试设置焦点上输入的边框颜色，但您也将display设置为none，这是没有意义的。如果要设置颜色样式，则必须删除display: none并将border-color: red;添加到--paper-input-container-underline-focus。

如何使用某些混合物（聚合物2）来调整纸张输入的样式？

1 个答案: