I am using Polymer iron-pages along with paper-tabs in my rails app. The problem is none of pages were shown until one of the paper-tabs was clicked. I want the first page in iron-pages to be selected by default without user interaction.
I have put both paper-tabs and iron-pages in a <template is='dom-bind'></template>. Have read documentation about data binding, But I couldn't figure out how to achieve this. Please somebody suggest your valuable suggestions. Thank you.
<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>
I am using Polymer iron-pages along with paper-tabs in my rails app. The problem is none of pages were shown until one of the paper-tabs was clicked. I want the first page in iron-pages to be selected by default without user interaction.
I have put both paper-tabs and iron-pages in a <template is='dom-bind'></template>. Have read documentation about data binding, But I couldn't figure out how to achieve this. Please somebody suggest your valuable suggestions. Thank you.
<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>
3 Answers
Reset to default 8Since you're working with an auto-binding template, simply add a short script that sets the selected property of your <iron-pages> element at load time. For example (assuming you are using webponents-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>
If you are using Polymer you can also set the default view by defining it in the Polymer properties of your web ponent:
Polymer({
is: 'your-web-ponent',
properties: {
selected: {
value: 0
}
}
});
Use the custom element's constructor() to set the property to name of the tab that should 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';
}