Polymer2.0-paper-tabs with iron-pages

383 views
Skip to first unread message

Naga Sai A

unread,
Jul 8, 2017, 10:43:54 PM7/8/17
to Polymer
Hi,

I was trying to implement tabs using paper tabs and iron pages.

I tried to find some examples for polymer tabs using polymer 2.0 but didnt any working and most of them are using polymer 1.0,0.5 which are not working now

Created below code pen , which works in selection of tab (even webcomponents.org paper tabs shows only tab selection and content display with tab selection)


<head>
   <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">


  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>


<body>
     <paper-tabs selected="{{selected}}">
       <paper-tab>Tab 1</paper-tab>
       <paper-tab>Tab 2</paper-tab>
      </paper-tabs>
      <iron-pages selected="{{selected}}">
       <div>
             Tab1 content
       </div>
       <div>
              Tab2 content
       </div>
      </iron-pages>
</body>

Daniel Llewellyn

unread,
Jul 10, 2017, 7:05:51 AM7/10/17
to Naga Sai A, Polymer
On 9 July 2017 at 03:43, Naga Sai A <nagasa...@gmail.com> wrote:

<head>
   <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">


  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>


<body>
     <paper-tabs selected="{{selected}}">
       <paper-tab>Tab 1</paper-tab>
       <paper-tab>Tab 2</paper-tab>
      </paper-tabs>
      <iron-pages selected="{{selected}}">
       <div>
             Tab1 content
       </div>
       <div>
              Tab2 content
       </div>
      </iron-pages>
</body>

​You cannot data-bind outside of a custom element. The easiest way to allow data-binding when you ​include multiple components within <body> is to use the <dom-bind> element to wrap your implementation. Alternatively move all your code into a custom element and in the main body just put the single reference to your new element. I've amended your example with a <dom-bind> element: https://codepen.io/diddledan/pen/RgqReW

--
Daniel Llewellyn
Bowl Hat
Reply all
Reply to author
Forward
0 new messages