CODEWITHSUNDEEP
polymer-1.0
Letsgo
Letsgo

Reputation: 711

Polymer 1.0 : split index.html

I want to split my index.html file as it's too long(more than 500 lines) due to many submenus like the one below.

<paper-submenu>
<paper-item class="menu-trigger">
<iron-icon icon="add-circle-outline"></iron-icon>
<span>Medical</span>
</paper-item>
<paper-menu class="menu-content">
<a data-route="medical" href="/medical">
 <paper-item>
  <span>Introduction</span>
 </paper-item>
</a>

Is it possible to store all the submenu lines in the index.html into another file?

Thank you in advance.

Upvotes: 0

Views: 70

Answers (1)

Chris W
Chris W

Reputation: 805

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Make sure to add other dependencies here -->

<dom-module id="test-comp">
  <template>
    <paper-submenu>
      <paper-item class="menu-trigger">
        <iron-icon icon="add-circle-outline"></iron-icon>
        <span>{{title}}</span>
      </paper-item>
      <paper-menu class="menu-content">
        <a data-route="{{dataRoute}}" href="{{href}}">
          <paper-item>
            <span>{{item}}</span>
          </paper-item>
        </a></paper-menu>
    </paper-submenu>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'test-comp',

        properties: {
          title: {},
          dataRoute: {},
          href: {},
          item: {},
        },


      });
    })();
  </script>

</dom-module>

Now insert the element like so

<test-comp title="Medical" data-route="medical" href="/medical" item="Introduction"></test-comp>

Edit: The styles that affect your index.html will not affect your custom component. Add styles INSIDE your custom component to have them included

Upvotes: 1

Related Questions