创建一组纸张复选框（使用熨斗选择器？）

我的目标是将一组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

创建一组纸张复选框（使用熨斗选择器？）

回答

相关问题