CODEWITHSUNDEEP
polymer
user3180105
user3180105

Reputation: 381

set default tab/page selection

I'm building a simple app, with a few tabs and pages linked to them. I can get this to work fine, the problem is that there is no tab selected by default.

For example, I have a basic structure like this:

<paper-tabs attr-for-selected="data-route" selected="{{selected}}">
  <paper-tab data-route="1">Tab 1</paper-tab>
  <paper-tab data-route="2">Tab 2</paper-tab>
  <paper-tab data-route="3">Tab 3</paper-tab>
</paper-tabs>

<iron-pages selected="{{selected}}">
  <div data-route="1">Page 1</div>
  <div data-route="2">Page 2</div>
  <div data-route="3">Page 3</div>
</iron-pages>

Works fine. However when I open the page, none of the tabs are selected by default. If I wanted this done, I could assign 'selected' to equal a specific value, such as:

<paper-tabs attr-for-selected="data-route" selected="1">
  <paper-tab data-route="1">TAB 1</paper-tab>
  <paper-tab data-route="2">TAB 2</paper-tab>
  <paper-tab data-route="3">TAB 3</paper-tab>
</paper-tabs>

The problem with this is that then the tab/page binding doesn't work.

So, simple question, how do I keep the binding while also setting a default tab?

Upvotes: 1

Views: 1139

Answers (2)

Eric Taix
Eric Taix

Reputation: 908

Well, I think that ready function is the way to initialize !

ready: function() {
  this.selected = 0;
}

Use the properties solution if you want "selected" to be used outside of your component

Upvotes: 0

Dan Getz
Dan Getz

Reputation: 18227

Good Polymer programming wraps these elements in a custom element representing the app (or some subsection of the app). Adding a selected property in the properties section of the surrounding element with a default value will set the default tab [Warning: Still a Polymer newbie]. Perhaps add something like:

Polymer({
    is: 'x-custom',

    properties: {
        selected: {
            value: 1
        }
    }
});

Upvotes: 2

Related Questions