Directory

← Back

app-pages-loader

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

Author

Contributors

Rating

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

Published on webcomponents.org

<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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • lazy-imports#Polymer/lazy-imports#^2.0.0
  • iron-selector#PolymerElements/iron-selector#^2.0.0
Released
2017-05-26
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent
Online