app-pages-loader

Component to load dinamically pages and keep a reduced DOM in huge apps.

View larger

Close

[ This description is mirrored from README.md at github.com/jorgecasar/app-pages-loader on 2019-05-10 ]

<app-pages-loader>

Component to load dinamically pages and keep a reduced DOM in huge apps.

<dom-bind id="demo">
  <template>
    <p>
      <label>Max nodes</label>
      <input value="{{maxNodes::input}}"/>
    </p>
    <p>
      <label>Max history</label>
      <input value="{{maxHistory::input}}"/>
    </p>
    <p>
      <label>Page</label>
      <select value="{{selected::input}}">
        <option value="view1">View 1</option>
        <option value="view2">View 2</option>
        <option value="view3">View 3</option>
        <option value="view404">View 404</option>
      </select>
    </p>
    <app-pages-loader selected="{{selected}}" fallback-selection="view404" max-nodes="{{maxNodes}}" max-history="{{maxHistory}}">
      <link rel="lazy-import" group="view1" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view2" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view3" href="./demo/components/page-test.html">
      <link rel="lazy-import" group="view404" href="./demo/components/page-test-404.html">
    </app-pages-loader>
  </template>
</dom-bind>
<script>
  var demo = document.querySelector('#demo');
  demo.selected = 'view1';
</script>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Links

• View on GitHub
• Online Demo
• GitHub Homepage
• Issue tracker
• Documentation

Compatibility