将纸质单选按钮(由 div 包装)与纸质单选按钮组相关联

Question

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

<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，它就会失去与组的关联(因此可以选择该包装按钮和其他按钮之一(。这是一个问题，因为我想给那个按钮一个工具提示。

<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>

我尝试使用纸质工具提示的 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

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

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

话虽如此，此解决方案仍将适用于radio-group的所有直接子级，它们是同一 HTML 元素的不同实例。

<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>