I can associate multiple paper-radio-buttons within a group by having the buttons be direct children of a 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> However, if I wrap one of the paper-radio-buttons with a div like this, it loses association with the group (so one could select both that wrapped button and one of the others). This is a problem because I want to give that button a tooltip.
<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> I tried using the for attribute of paper-tooltip, but that doesn't make the tooltip only appear when that specific button is hovered over.
How could I associate a paper-radio-button with a paper-radio-group without having the button be a direct child?
2 Answers
Answers 1
To add tooltips create an id for each radiobutton that needs a tooltip. You can then use for and refer to the id. There is no need for a wrapper 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> You can find a working demo in this plunk.
Answers 2
There are two problems with using div inside paper-radio-group
Paper-radio-groupexpects selectable element to be apaper-radio-button. This is a simple problem asradio-group has a property namedselectable` which you can overwrite to change this behavior.- Second and more complicated issue is that
paper-radio-grouptoggles checked property on the element that you choose as selectable. One solution i was able to find for this was to ignore the checked thatpaper-radio-groupsets and add a tap listener on all the div's to toggle inradio-buttons manually.
Having said that this solution will still work with all the direct child of radio-group being different instances of same HTML element.
<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>
0 comments:
Post a Comment