Associating a paper-radio-button (wrapped by a div) with a paper-radio-group?

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

1. Paper-radio-group expects selectable element to be a paper-radio-button. This is a simple problem as radio-group has a property namedselectable` which you can overwrite to change this behavior.
2. Second and more complicated issue is that paper-radio-group toggles checked property on the element that you choose as selectable. One solution i was able to find for this was to ignore the checked that paper-radio-group sets and add a tap listener on all the div's to toggle in radio-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>

Read More

data persistence across elements

suppose I want to have a data provider element for my user, like

<user-data-provider user-data="{{data}}"></user-data-provider> 

which sends an ajax request and gets the logged in user.

Suppose I want to access my user data in different pages, and I add this tag to wherever I need, but the problem is, every time the browser sees this tag, makes an ajax again and I have to wait until data is fetched!

I know I can make a variable in my main page and pass it along child pages, but that seems like overkill to me !

how can I persist user data across different pages and part of my app?

thank you in advance

2 Answers

Answers 1

There are different ways to do this.

1. You can use use a monostate pattern
2. You can have one instance of your user-data-provider element in your root element or index.html and use iron-signals to transmit the data to all other elements that want to consume it
3. You can use iron-meta to have global state
4. Use an external state management framework (i.e. redux). There is a polymer wrapper for it: polymer-redux

I would recommend using an external state mangement framework such as redux.

Some of the solutions are shown here:

Polymer 1.0 Global Variables

Answers 2

I used pouchdb for my data store, and used polymer's predefined elements to work with it

now every time that I need data, I just use that component

Read More

Rendering Polymer 1.0 elements with child content using React

I've been struggling with this for a while and finally I managed to track down the root of the problem, yet I don't know how to solve it!

Consider rendering Polymer's elements in a React render method:

ReactDOM.render(     <paper-button>Ok</paper-button>,     document.getElementById('root') ); 

Previous code works fine since <paper-button> has got no child elements. But the following example does not work:

ReactDOM.render(     <paper-dialog>         <h2>Header</h2>         <paper-dialog-scrollable>             Lorem ipsum...         </paper-dialog-scrollable>         <div class="buttons">             <paper-button dialog-dismiss>Cancel</paper-button>             <paper-button dialog-confirm>Accept</paper-button>         </div>     </paper-dialog>,     document.getElementById('root') ); 

Because <paper-dialog> has several child elements. In the Polymer's library there's a <content> tag which represent the child elements given in the named custom tag and how they should be embedded in the final realization of the custom tag (it acts like a portal). It seems like when React is used to add a Polymer element into the document, the child elements are not passed through the portal!

When the mentioned paper-dialog Polymer element goes through React, this is what comes out:

 <paper-dialog data-reactroot="">     <h2>Header</h2>     <paper-dialog-scrollable         class="x-scope paper-dialog-scrollable-0 no-padding scrolled-to-bottom">         Lorem ipsum...     </paper-dialog-scrollable>     <div>         <paper-button             role="button" tabindex="0"             animated="" aria-disabled="false"             elevation="0" dialog-dismiss="true"             class="x-scope paper-button-0">             Cancel         </paper-button>         <paper-button             role="button" tabindex="0"             animated="" aria-disabled="false"             elevation="0" dialog-confirm="true"             class="x-scope paper-button-0">             Accept         </paper-button>     </div> </paper-dialog> 

It's in the case that if I do it as google has instructed (putting the tags inside the HTML to begin with), here's what dom tree will look like:

 <paper-dialog>     <h2>Header</h2>     <paper-dialog-scrollable         class="x-scope paper-dialog-scrollable-0 no-padding can-scroll">         <div id="scrollable"             class="scrollable style-scope paper-dialog-scrollable fit">             Lorem ipsum...         </div>     </paper-dialog-scrollable>     <div class="buttons">         <paper-button             role="button" tabindex="0"             animated="" aria-disabled="false"             elevation="0" dialog-dismiss=""             class="x-scope paper-button-0">             Cancel         </paper-button>         <paper-button             role="button" tabindex="0"             animated="" aria-disabled="false"             elevation="0" dialog-confirm=""             class="x-scope paper-button-0">             Accept         </paper-button>     </div> </paper-dialog> 

The parts that are in bold are disagreement parts.

Does anyone know how to actually match Polymer with React?

1 Answers

Answers 1

Have you tried wrapping the <paper-dialog> into another react component and then feeding it to the ReactDOM like this

var PaperDialog = React.createClass({     render: function () {         return (             <paper-dialog>                 <h2>Header</h2>                 <paper-dialog-scrollable>                     Lorem ipsum...                 </paper-dialog-scrollable>                 <div class="buttons">                     <paper-button dialog-dismiss>Cancel</paper-button>                     <paper-button dialog-confirm>Accept</paper-button>                 </div>             </paper-dialog>);     } });  ReactDOM.render(<PaperDialog />, document.getElementById('root')); 

Read More

Why is my Polymer iron-icon appearing below my paper-input on navigation?

I have some simple code (Angular2 + Polymer) that creates a paper-input with a iron-icon as a suffix icon:

 <paper-input type="text" [control]="email" label="Email">        <iron-icon suffix icon="mail"></iron-icon>  </paper-input> 

Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:

<div class="section">     <h1 class="paper-font-headline">Admin Registration</h1>      <div class="row">         <div class="col s12 m6 6">             <p class="paper-font-body2">some stuff here</p>         </div>          <div class="col s12 m6 6">             <paper-card class="stretch">                 <div class="sub-section">                     <form>                         <paper-input type="text"                                      [control]="email"                                      label="Email">                             <iron-icon suffix icon="mail"></iron-icon>                         </paper-input>                     </form>                 </div>             </paper-card>         </div>     </div> </div> 

This looks pretty good on page load:

When I navigate away from the page and back, however, the icon falls below the input:

In the html you can clearly see that the icon is placed outside of the paper-input-container on navigation.

Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use webcomponents-lite.js in my index.html file. webcomponents.js has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!

Edit:

This is not an issue in Chrome, but in the other major browsers.

Here are my imports in case they are relevant:

    <!-- 1. Load libraries -->     <!-- IE required polyfills, in this exact order -->     <script src="node_modules/es6-shim/es6-shim.min.js"></script>     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>     <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>      <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>     <script>         window.Polymer = window.Polymer || {};         window.Polymer.dom = 'shadow';     </script>      <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>     <script src="node_modules/systemjs/dist/system.src.js"></script>     <script src="node_modules/rxjs/bundles/Rx.js"></script>     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>     <script src="node_modules/angular2/bundles/http.dev.js"></script>     <script src="node_modules/rxjs/bundles/Rx.js"></script>     <script src="node_modules/angular2/bundles/router.dev.js"></script>      <link rel="import" href="bower_components/paper-styles/classes/global.html">     <link rel="import" href="bower_components/paper-styles/classes/shadow.html">     <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">     <link rel="import" href="bower_components/paper-styles/classes/typography.html">      <link rel="import" href="bower_components/polymer/polymer.html">     <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">     <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">     <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">     <link rel="import" href="bower_components/paper-menu/paper-menu.html">     <link rel="import" href="bower_components/paper-item/paper-item.html">     <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">     <link rel="import" href="bower_components/iron-icon/iron-icon.html">     <link rel="import" href="bower_components/iron-icons/iron-icons.html">     <link rel="import" href="bower_components/paper-ripple/paper-ripple.html">     <link rel="import" href="bower_components/paper-card/paper-card.html">     <link rel="import" href="bower_components/paper-input/paper-input.html"> 

Here are my bower.json dependencies:

"dependencies": {     "webcomponentsjs": "~0.7.21",     "polymer": "Polymer/polymer#~1.3.0",     "paper-elements": "PolymerElements/paper-elements#~1.0.7"   } 

1 Answers

Answers 1

<link rel="import" href="../paper-input/paper-input.html"> <link rel="import" href="../core-icons/core-icons.html"> <link rel="import" href="../core-icon/core-icon.html">  <polymer-element name="my-element">    <template>     <style>           #paper_input {         left: 380px;         top: 380px;         position: absolute;       }       #core_icon {         left: 530px;         top: 390px;         position: absolute;       }     </style>     <paper-input label="Type something..." id="paper_input"></paper-input>     <core-icon icon="mail" id="core_icon"></core-icon>   </template>    <script>      Polymer({      });    </script>  </polymer-element> 

Read More