How to use multiple <content> tags in one polymer element?

I am trying to access the same data in one element twice, one for desktop navigation and one for easy navigation (drawer toolbar). For this, I use two content tags, but it only accepts one. In this case, what to do

<app-drawer-layout force-narrow>

  <app-drawer id="drawer">

    <app-toolbar></app-toolbar>

    <!-- Nav on mobile: side nav menu -->
    <paper-menu selected="{{selected}}" attr-for-selected="name">
      <template is="dom-repeat" items="{{items}}">
        <paper-item name="{{item}}">{{item}}</paper-item>
      </template>
    </paper-menu>

  </app-drawer>

  <app-header-layout>
    <app-header class="main-header">

      <app-toolbar>
        <paper-icon-button class="menu-button" icon="menu" drawer-toggle hidden$="{{wideLayout}}"></paper-icon-button>
      </app-toolbar>

      <app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
        <!-- Nav on desktop: tabs -->
        <paper-tabs selected="{{selected}}" attr-for-selected="name" bottom-item>
          <template is="dom-repeat" items="{{items}}">
            <paper-tab name="{{item}}">{{item}}</paper-tab>
          </template>
        </paper-tabs>
      </app-toolbar>

    </app-header>
  </app-header-layout>

</app-drawer-layout>

<iron-media-query query="min-width: 600px" query-matches="{{wideLayout}}"></iron-media-query>

Polymer Code:

Polymer({
  is: 'x-app',
  properties: {
    selected: {
      type: String,
      value: 'Item One'
    },
    wideLayout: {
      type: Boolean,
      value: false,
      observer: 'onLayoutChange',
    },
    items: {
      type: Array,
      value: function() {
        return ['Item One', 'Item Two', 'Item Three', 'Item Four'];
      }
    }
  },
  onLayoutChange: function(wide) {
    var drawer = this.$.drawer;
    if (wide && drawer.opened) {
      drawer.opened = false;
    }
  }
});

I have this type of code. What to do to add a menu item without using an array. I want to add them separately from the index both in the application header and in the application. but in the index it should be written once, as shown below.

   <wt-header logo="logo url" enable-menu="true" enable-topbar="false">
        <wt-menu>
        <wt-tab name="TabName" action="http://example.com/action" />
        <wt-tab name="TabName1" action="http://example.com/action2" />
        <wt-tab name="TabName3" action="http://example.com/action3" />
        </wt-menu>
    </wt-header>
+4
source share
1 answer

, . <content> "" , , . <content> - , .

, select=".some", , <content>, , (, .some), <content select=".some"> <content>.

, <template>...</template>, templatizer, . , , <template is="dom-repeat"> <iron-list>

0

Source: https://habr.com/ru/post/1662119/


All Articles