How to trigger core-animated-pages

Question

I am trying to build a simple element with Polymer Designer containing a scaffold, with a menu and a core-animated-pages element. But how do i transition between the sections inside the element? I tried it with an on-tap="{{tapOne}}" inside the core-item of the core-menu.

Polymer({
  tapOne: function () {
    this.$.section1.selected
  },
  tapTwo: function () {
    this.$.section2.selected
  },
  tapThree: function () {
    this.$.section3.selected
  }
});

Long story short: it doesn't work. Any ideas? Sorry for the noobism.

Jeff Posnick Jeff Posnick · Accepted Answer · 2014-12-11T16:50:34

<core-animated-pages> extends <core-selector>, and most of the "magic" about selecting what's shown is delegated to <core-selector>.

There are a few different ways of triggering a selection change with something that extends <core-selector>. The most relevant when talking about <core-animated-pages> is either binding to the selected= attribute and changing that value (in the case of <core-animated-pages>, it takes a numeric index of the page to select, starting with 0), or using the selectPrevious()/selectNext() methods.

There's a pretty thorough rundown of navigating between <core-animated-pages> in the "Building single page apps using web components" article. But if you want something quick to hack around with, try this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Demo</title>
  </head>
  
  <body>
    <script src="//www.polymer-project.org/webcomponents.min.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
    
    <polymer-element name="sample-element">
      <template>
        <div>
          <button on-tap="{{previousPage}}">Previous</button>
          Page <input value="{{selectedPageIndex}}"> (0-indexed)
          <button on-tap="{{nextPage}}">Next</button>
        </div>
        
        <core-animated-pages id="pages"
                             selected="{{selectedPageIndex}}">
          <section>
            <h1>First Page</h1>
            <p>Hello!</p>
          </section>
          <section>
            <h1>Second Page</h1>
            <p>Hi!</p>
          </section>
          <section>
            <h1>Third Page</h1>
            <p>Howdy!</p>
          </section>
        </core-animated-pages>
      </template>
      
      <script>
        Polymer({
          selectedPageIndex: 0,
          
          previousPage: function() {
            this.$.pages.selectPrevious(true);
          },
          
          nextPage: function() {
            this.$.pages.selectNext(true);
          }
        });
      </script>
    </polymer-element>
    
    <sample-element></sample-element>
  </body>
</html>

How to trigger core-animated-pages

1 Answers