Preselect the default page in iron sheets when used with paper tabs

Question

I am using Polymer iron-pages along with paper-tabs in my rails application. The problem is that not one of the pages was shown until one of the paper-tabs clicked. I want the first page in iron-pages be selected by default without user interaction.

I set both paper-tabs and iron-pages to <template is='dom-bind'></template> . Read the data binding documentation, but I could not figure out how to achieve this. Please offer your valuable suggestions. Thanks.

 <template is="dom-bind"> <div class="middle"> <paper-tabs class="bottom self-end" selected="{{selected}}"> <paper-tab>Page 1</paper-tab> <paper-tab>Page 2</paper-tab> </paper-tabs> </div> <div class="bottom"> <iron-pages selected="{{selected}}"> <div> Page 1(This should be selected by default.) </div> <div> Page 2 </div> </iron-pages> </div> </template> 

Answer 1

Since you are working with an auto-linking template, just add a short script that sets the selected property of your <iron-pages> element at boot time. For example (if you use webcomponents-lite.js ):

 <template is="dom-bind"> <div class="middle"> <paper-tabs class="bottom self-end" selected="{{selected}}"> <paper-tab>Page 1</paper-tab> <paper-tab>Page 2</paper-tab> </paper-tabs> </div> <div class="bottom"> <iron-pages selected="{{selected}}"> <div> Page 1 (This will be selected by default.) </div> <div> Page 2 </div> </iron-pages> </div> </template> <script> document.addEventListener('WebComponentsReady', function () { var template = document.querySelector('template[is="dom-bind"]'); template.selected = 0; // selected is an index by default }); </script> 

Answer 2

If you use Polymer, you can also set the default view by specifying it in the Polymer properties of your web component:

 Polymer({ is: 'your-web-component', properties: { selected: { value: 0 } } }); 

Answer 3

Use the custom element constructor () to set the property for the name of the tab to be selected

 <paper-tabs id="choiceTab" style="width:400px;" attr-for-selected='name' selected="{{choice}}"> <paper-tab name="tab1">Tab 1</paper-tab> <paper-tab name="tab2">Tab 2</paper-tab> </paper-tabs> 

.....

 static get properties() { return { choice: { type: String, reflectToAttribute: true } }; } 

.....

 constructor() { super(); this.choice = 'tab1'; }