@moduware/morph-pages v1.0.0

morph-pages

Pages element for polymorph components that morphs for current mobile OS.

Getting Started

For the information about how to clone the desired repository, running the local server and testing, please refer to Polymorph elements getting started docs at the end of this repository.

Demo

• Here is a quick demo of <morph-pages>

Attributes

Styling

How to use our <morph-pages> component

• morph-pages is used to select one of its children to show just like iron-pages. One use is to cycle through a list of its 'pages' or 'children'.

  <morph-pages selected="0">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </morph-pages>

  <script>
    document.addEventListener('click', function(e) {
      var pages = document.querySelector('morph-pages');
      pages.selectNext();
    });
  </script>

• Example html markup for morph-pages using app-toolbar and morph-location

    <app-toolbar class="header-container">
      <paper-icon-button icon="arrow-back" onclick="previousPage()"></paper-icon-button>
      <div main-title>morph-pages</div>
    </app-toolbar>
    <div class="links">
      <a href="#one">One</a>
      <a href="#two">Two</a>
      <a href="#three">Three</a>
      <a href="#four">Four</a>
      <a href="#five">Five</a>
      <a href="#six">Six</a>
    </div>
    <div class="container">
      <morph-location hash="{{currentPage}}" last-navigation-direction="{{direction}}" dwell-time="0"></morph-location>
      <morph-pages selected="{{currentPage}}" page-change-animation-direction="[[direction]]" attr-for-selected="name" platform="ios" fallback-selection="one">
        <div name="one" class="page background-green"><h1>One</h1></div>
        <div name="two" class="page background-white"><h1>Two</h1></div>
        <div name="three" class="page background-green"><h1>Three</h1></div>
        <div name="four" class="page background-white"><h1>Four</h1></div>
        <div name="five" class="page background-green"><h1>Five</h1></div>
        <div name="six" class="page background-white"><h1>Six</h1></div>
      </morph-pages>
    </div>

    <script>
      /**
      * move to previous page
      */
      previousPage = function() {
        history.back();
      };

    </script>

• morph-pages inherited from iron-pages and is backwards compatible. For more detailed documentation on how to use iron-pages go here.

Further help

For more information on how to install and run test please go here - Polymorph elements getting started