聚合物纸输入错误图标

Question

聚合物0.x具有组件纸张输入装饰器，其中，如果纸张输入有错误，则会显示带有图标的错误消息。以下是纸张输入装饰器中的代码。

<div class="footer" layout horizontal end-justified>
      <div class="error" flex layout horizontal center hidden?="{{!isInvalid}}">
        <div class="error-text" flex auto role="alert" aria-hidden="{{!isInvalid}}">{{error}}</div>
        <core-icon id="errorIcon" class="error-icon" icon="warning"></core-icon>
      </div>
      <div aria-hidden="true">
        <content select=".counter"></content>
      </div>
    </div>

Polymer 1.x具有一个元素paper-input-error，可用于显示错误消息。但是，是否有必要在此添加图标？

Answer 1

您可以使用<paper-input-container>重新创建<paper-input>，并在其<paper-input-error>中带有图标。当输入非数字时，以下聚合物元素模板在<paper-input-error>内显示错误图标：

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

    /* In 1.x, the <input> is distributed to paper-input-container, which styles it.
    In 2.x the <iron-input> is distributed to paper-input-container, which styles
    it, but in order for this to work correctly, we need to reset some
    of the native input's properties to inherit (from the iron-input) */
    iron-input > input {
      @apply --paper-input-container-shared-input-style;
      font-family: inherit;
      font-weight: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      word-spacing: inherit;
      line-height: inherit;
      text-shadow: inherit;
      color: inherit;
      cursor: inherit;
    }
  </style>

  <paper-input-container>
    <iron-input slot="input" auto-validate>
      <input is="iron-input" pattern="\d+">
    </iron-input>
    <paper-input-error slot="add-on">
      <iron-icon icon="icons:error"></iron-icon>
      <span>Only numbers are allowed!</span>
    </paper-input-error>
  </paper-input-container>
<template>

屏幕截图：