Блог

Я пытаюсь создать меню переключения с помощью Polymer. То, что я хочу, очень просто: когда я нажимаю на элемент, я хочу отображать только связанный div в качестве содержимого. Я использую элемент core-scalffold, который предоставляет вам меню и макет содержимого.

Какой должен быть наилучший подход для достижения этого с использованием компонентов и событий polymer?

  <core-scaffold>
  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
    </core-toolbar>
    <core-menu>
      <core-item label="Content 1"></core-item>
      <core-item label="Content 2"></core-item>
    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content1">
      Hi there content1!
  </div>
   <div class="content2">
      Hi there content2!
  </div>
</core-scaffold>
  

core-pages Элемент предоставляет способ создания выбираемых разделов, так что это хороший выбор для разделов содержимого. Затем, поскольку core-menu и core-pages оба имеют selected свойства, легко связать два элемента вместе. Чтобы использовать привязку данных полимера, мы должны использовать шаблон. Если мы поместим все это в шаблон автоматической привязки, мы получим что-то вроде этого:

 <template is="auto-binding">

  <core-scaffold>

    <core-header-panel navigation flex>
      <core-toolbar id="navheader">
      </core-toolbar>
      <core-menu selected="0" selectedIndex="{{selected}}">
        <core-item label="Content 1"></core-item>
        <core-item label="Content 2"></core-item>
      </core-menu>
    </core-header-panel>

    <span tool>Title {{selected}}</span>

    <core-pages selected="{{selected}}">
      <div class="content1">
          Hi there content1!
      </div>
      <div class="content2">
          Hi there content2!
      </div>
    </core-pages>

  </core-scaffold>

</template>
  

Примечание: Я связал selectedIndex свойство core-menu , чтобы я мог использовать selected для установки значения по умолчанию.

http://jsbin.com/wivec/1/edit

Если вам действительно нужно решение, которое использует события вместо привязки, дайте мне знать.