創建一組紙張複選框（使用熨斗選擇器？）

我的目標是將一組paper-checkbox組合在一起。創建一組紙張複選框（使用熨斗選擇器？）

對於paper-ratio-button，我做的：

<paper-radio-group selected="foo"> 
    <paper-radio-button name="foo">Foo</paper-radio-button> 
    <paper-radio-button name="bar">Bar</paper-radio-button> 
</paper-radio-group>

爲paper-checkbox，我本來期望使用iron-selector：

<iron-selector attr-for-selected="name" selected="foo"> 
    <paper-checkbox name="foo">Foo</paper-checkbox> 
    <paper-checkbox name="bar">Bar</paper-checkbox> 
</iron-selector>

但是，這並不工作，具有name=foo複選框未選中

來源

2017-04-09 Steren

-1

你必須寫你自己的小元素。這並不難..只是要開始：

父

<my-el selected="foo"> 
    <paper-checkbox name="foo"></paper-checkbox> 
    <paper-checkbox name="bar"></paper-checkbox> 
    <paper-checkbox name="foobar"></paper-checkbox> 
</my-el>

我-EL

<dom-module id="my-el"> 
    <template> 
    <slot></slot> 
    </template> 
<script> 
    Polymer({ 
     is: 'my-el', 

     properties: { 
      selected: { 
       type: String, 
       observer: "_selectCheckboxes" 
      } 
     }, 

     _selectCheckboxes() { 
      var checkboxes = this.$.slotted.getDistributedNodes(); 
      this.reset(checkboxes); 
      for (var i = 0; i = checkboxes.length; i++) { 
       var obj = checkboxes[i]; 

       if(obj.getAttribute("name") == value) { 
        obj.checked = true; 
       } 
      } 
     }, 

     reset: function(obj) { 
      for (var i = 0; i = obj.length; i++) { 
       obj[i].checked = false; 
      } 
      return true; 
     } 
    }); 
</script>  

</dom-module>

我希望這會幫助你。當然，你必須實現更多的邏輯來使其工作。如果您有更多關於它的問題，請詢問，我可以編輯我的答案。

一點解釋：https://www.polymer-project.org/2.0/docs/upgrade

順便說：我假設你正在使用高分子版本> = 1.7.0。對於舊版本，你必須使用<content>元素，而不是<slot>和不同的選擇

來源

2017-04-10 09:30:13

感謝您的回答。我正在使用2.0預覽。 – Steren

在聚合物<1.0上，我使用了核心選擇器，它非常簡單：https://github.com/steren/steren.github.com/blob/master/steren-works.html#L85 – Steren

我得到了正在工作，看到我的答案 – Steren

我得到它的工作，我錯過了selected-attribute="checked"：

<iron-selector attr-for-selected="name" selected="foo" selected-attribute="checked"> 
    <paper-checkbox name="foo">Foo</paper-checkbox> 
    <paper-checkbox name="bar">Bar</paper-checkbox> 
</iron-selector>

要允許多個選擇，使用<iron-selector attr-for-selected="name" multi selected-values='["foo","bar"]' selected-attribute="checked">

來源

2017-04-10 09:54:19 Steren

創建一組紙張複選框（使用熨斗選擇器？）

回答

相關問題