Question

我正在开发一个Polymer应用程序，它使用iron-form将表单提交给后端Web服务。表单中的一个元素是一个框，用户可以在其中选择多个元素。使用带有多组设置的纸张列表框的纸张下拉菜单，但是用户体验非常糟糕，因为如果不打开下拉列表（并阻止其他元素），用户无法看到选择了哪些元素。此外 - 它需要更多的点击才能运作。理想情况下，我们只使用没有纸张下拉菜单的纸质列表框，因为这正是我们需要的UI - 类似于HTML的经典＆lt; select multiple＆gt;但是具有材料设计的光泽。但是如果没有纸张下拉菜单包装器，则铁形式不会选择纸质列表框中的选定值，也不会提交这些值。我注意到铁形支持经典HTML＆lt; select＆gt; （甚至支持多重行为），但是与其他表单形成对比的是用户界面。是否有其他东西可以包装在纸张列表框中以使表单在不修改原始纸张列表框UI的情况下表现，或者让纸张下拉菜单具有“始终打开”模式？如果这些都不起作用（我无法工作，BTW），我们还能做些什么呢？

Answer 1

您可以将<dom-module id="multi-listbox"> <template> <paper-listbox multi selected-values="{{value}}"> <content></content> </paper-listbox> </template> <script> Polymer({ is: 'multi-listbox', behaviors: [Polymer.IronFormElementBehavior] }); </script> </dom-module>包装在实现<iron-form-element-behavior>的自定义元素中。该行为公开了value属性，该属性可以绑定到<paper-listbox>.selectedValues，允许HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', _onResponse: function(e) { this._response = JSON.stringify(e.detail.response, null, 2); }, _submit: function() { this._response = null; this.$.form.submit(); } }); Polymer({ is: 'multi-listbox', behaviors: [ Polymer.IronFormElementBehavior ], properties: { value: { type: Array, value: () => [], notify: true }, invalid: { type: Boolean, reflectToAttribute: true } }, validate: function() { const isValid = !this.required || !!(this.value && this.value.length > 0); this.invalid = !isValid; console.log('invalid', this.invalid); return isValid; }, _clearError: function() { this.invalid = false; } }); });提交多个列表框值：

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-form/iron-form.html">
    <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-checkbox/paper-checkbox.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="iron-form-element-behavior/iron-form-element-behavior.html">
  <link rel="import" href="iron-validatable-behavior/iron-validatable-behavior.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        multi-listbox,
        paper-checkbox,
        paper-button {
          margin: 0.5em;
        }
      </style>
      <paper-checkbox active="{{_required}}">Required</paper-checkbox>
      <form is="iron-form"
            id="form"
            action="//httpbin.org/get"
            on-iron-form-response="_onResponse">
        <multi-listbox name="listbox-values" required="[[_required]]">
          <paper-item>Item 1</paper-item>
          <paper-item>Item 2</paper-item>
          <paper-item>Item 3</paper-item>
          <paper-item>Item 4</paper-item>
        </multi-listbox>
        <paper-button raised
                      on-tap="_submit">Submit</paper-button>
      </form>

      <pre>[[_response]]</pre>
    </template>
  </dom-module>
  
  <dom-module id="multi-listbox">
    <template>
      <style>
        :host {
          display: block;
        }

        paper-listbox {
          border: solid 2px lightgray;
        }

        :host([invalid]) paper-listbox {
          border: solid 2px var(--error-color, red);
        }
      </style>
      <paper-listbox multi
                     selected-values="{{value}}"
                     on-iron-activate="_clearError">
        <content></content>
      </paper-listbox>
    </template>
  </dom-module>
</body>

＆＃13;

DROP TABLE yourtablename;

＆＃13;

php bin/console generate:doctrine:entities YourBundleNameBundle

＆＃13;

codepen

如何使用Polymer实现纸质样式的“<select multiple =”“>”框，而不使用“纸张下拉菜单”？

1 个答案: