CODEWITHSUNDEEP
javascripthtmlpolymer
Cédric
Cédric

Reputation: 419

Polymer switch page

I'm trying to build a site to learn polymer. I'm using a core-drawer-panel and a core-header-panel. Now I want the content to change when one of the links in the drawer is clicked. I was wondering, what is the best way to do this? Is there a built-in function to switch pages? (not using tabs)

This is my code so far:

<body fullbleed vertical layout unresolved touch-action="auto">

<core-drawer-panel id="drawerPanel">

  <core-header-panel drawer id="drawer">
    <core-toolbar id="navheader">
    <span id="menutitle">Menu</span>
    </core-toolbar>
    <core-menu id='menu'>
      <paper-item class="menulink" id='homelink' label="Home"></paper-item>
      <paper-item class="menulink" id='gallerylink' label="Gallery"></paper-item>
      <paper-item class="menulink" id='calendarlink' label="Calendar"></paper-item>
      <paper-item class="menulink" id='contactlink' label="Contact"></paper-item>
    </core-menu>
  </core-header-panel>

  <core-header-panel main mode="seamed">
    <core-toolbar id="mainheader">
      <paper-icon-button 
      id="navicon" icon="menu"></paper-icon-button>
      <span flex id="title">My site</span>
    </core-toolbar>
    <div class="content">
      <div id="home" vertical layout centered>
        <big-picture flex></big-picture>
        <general-info flex></general-info>
        <footer-element flex></footer-element>
      </div>
      <div id='gallery' vertical layout centered>
      </div>
    </div>
  </core-header-panel>

</core-drawer-panel>

<script>
</script>
</body>

Upvotes: 1

Views: 2928

Answers (1)

A-Man
A-Man

Reputation: 505

The polymer documentation page is poorly explained for newbies in my opinion, so sending just a link is kinda lazy.

instead of using div id to change pages, try like this:

<div class="content">
<core-animated-pages selected="0">
<section>
<div>Home page contents</div>
</section>
<section>
<div>Gallery contents</div>
</section>
</core-animated-pages>
</div>

add some javascript below to change the pages when clicked

function home(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 0 (first <section>)
c.selected = 0;
}

function gallery(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 1 (second <section>)
c.selected = 1;
}

now for each paper-item button, add an onclick to call each function to change the page

<paper-item onclick="gallery();">Gallery</paper-item>

There are more efficient ways to change pages but this should give you an idea how it works. Don't forget to import your elements!

Upvotes: 3

Related Questions