Question

我可以通过让按钮成为paper-radio-button的直接子项来关联组中的多个paper-radio-group。

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <paper-radio-button name="baz">Baz</paper-radio-button>
</paper-radio-group>

但是，如果我用这样的div包装其中一个paper-radio-button s，它会丢失与该组的关联（因此可以选择该包装按钮和其他一个按钮）。这是一个问题，因为我想给该按钮一个工具提示。

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <div>
    <paper-radio-button name="baz">Baz</paper-radio-button>
    <paper-tooltip>Tooltip text for baz.</paper-tooltip>
  </div>
</paper-radio-group>

我尝试使用paper-tooltip的for属性，但这并不会使该工具提示仅在该特定按钮悬停时显示。

如果没有按钮成为直接孩子，我怎样才能将paper-radio-button与paper-radio-group相关联？

Answer 1

要添加工具提示，请为需要工具提示的每个单选按钮创建id。然后，您可以使用for并参考id。不需要包装器div。

<paper-radio-group>
    <paper-radio-button id="foo" name="foo">Foo</paper-radio-button>
    <paper-tooltip for="foo">Tooltip text for foo.</paper-tooltip>
    <paper-radio-button id="bar" name="bar">Bar</paper-radio-button>
    <paper-tooltip for="bar">Tooltip text for bar.</paper-tooltip>
    <paper-radio-button id="baz" name="baz">Baz</paper-radio-button>
    <paper-tooltip for="baz">Tooltip text for baz.</paper-tooltip>
</paper-radio-group>

您可以在此plunk找到有效的演示。

Answer 2

在div

中使用paper-radio-group有两个问题

Paper-radio-group期望可选元素为paper-radio-button。这是一个简单的问题radio-group has a property named selectable`，你可以覆盖它来改变这种行为。
第二个也是更复杂的问题是paper-radio-group在您选择的元素上切换checked属性。我能够找到的一个解决方案是忽略已检查的paper-radio-group设置并在所有div上添加一个点击监听器以手动切换radio-button。

说过这个解决方案仍然适用于radio-group的所有直接子节点，它们是同一HTML元素的不同实例。

＆＃13;

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="https://polygit.org/components/paper-radio-button/paper-radio-button.html">
<dom-module id="group-with-div">
  <template>
        <style></style>
        <paper-radio-group selectable="div">
            <div name="one" data-selected="1" on-tap="changeSelection">
                <paper-radio-button id="1">one</paper-radio-button>
            </div>
               <div name="two" data-selected="2" on-tap="changeSelection">
                <paper-radio-button id="2">two</paper-radio-button>
            </div>
               <div name="three" data-selected="3" on-tap="changeSelection">
                <paper-radio-button id="3">three</paper-radio-button>
            </div>
            
        </paper-radio-group>
    </template>
</dom-module>
<script>
  Polymer({
    is: 'group-with-div',
    properties: {

    },
    changeSelection: function(e) {
      for (var i = 1; i <= 3; i++) { //i should be less than number of radio buttons (this code is mainly added to handle dynamically created buttons)
        if (e.currentTarget.attributes['data-selected'].value == i) {
          this.$[i].set('checked', true);
        } else {
          this.$[i].set('checked', false);
        }
      }
    }
  })
</script>


<group-with-div></group-with-div>

＆＃13;

将纸质收音机按钮（由div包裹）与纸质无线电组相关联？

2 个答案: