Material Design Lite + Polymer не работает вместе — ничего не отображает

Я пытаюсь интегрировать некоторые компоненты Polymer, которые я создал с помощью Material Design Lite. Однако они просто ничего не визуализируют, как будто материальный дизайн не может работать с полимерными компонентами.

Вот шаги, которые я выполняю, чтобы создать боковое меню HTML + Material Design:

Боковое меню Plain Material Design Lite:

<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
        <a href="" class="mdl-navigation__link">Link 1</a>
        <a href="" class="mdl-navigation__link">Link 2</a>
        <a href="" class="mdl-navigation__link">Link 3</a>
        <a href="" class="mdl-navigation__link">Link 4</a>
    </nav>
</div>

Теперь в качестве теста я создаю элемент Polymer nav-menu.html с некоторой разметкой:

<dom-module id="nav-menu">

  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

Затем он включается перед меню и отображается нормально:

HTML:

<nav-menu/>
<div class="mdl-layout__drawer">
...

Визуализированный код:

<nav-menu>
    <p class="style-scope nav-menu">I'm a DOM element. This is my local DOM!</p>
</nav-menu>
<div class="mdl-layout__drawer">

Теперь я изменяю компонент nav-menu.html, чтобы включить полное меню:

<dom-module id="nav-menu">

  <template>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Express</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href=""> Link 1</a>
        <a class="mdl-navigation__link" href=""> Link 2</a>
        <a class="mdl-navigation__link" href=""> Link 3</a>
        <a class="mdl-navigation__link" href=""> Link 4</a>
      </nav>
    </div>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

и включить его на главную страницу:

<nav-menu/>

Это визуализированный HTML-код (видимый при проверке инструментов разработчика Chrome):

  <nav-menu>
    <div class="mdl-layout__drawer style-scope nav-menu">
      <span class="mdl-layout-title style-scope nav-menu">Express</span>
      <nav class="mdl-navigation style-scope nav-menu">
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 1</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 2</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 3</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 4</a>
    </nav></div>
  </nav-menu>

Вроде все нормально, однако страница ничего не показывает, она просто пустая.

ОБНОВЛЕНИЕ: похоже, проблема в том, что стиль медиа-запроса, отображающий меню, не применяется к новому элементу:

@media screen and (min-width: 1025px)
.mdl-layout--fixed-drawer>.mdl-layout__drawer {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

Поскольку полимерный элемент вложен в тег <nav-menu>, стиль CSS не применяется. Какие-либо предложения?


html css web-component polymer material-design-lite
person codependent    schedule 27.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решил это, удалив вложенный <div class="mdl-layout__drawer style-scope nav-menu"> из компонента Polymer и применив стиль непосредственно в HTML:

nav-menu.html:

<dom-module id="nav-menu">

  <template>
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href=""> Link 1</a>
      <a class="mdl-navigation__link" href=""> Link 2</a>
      <a class="mdl-navigation__link" href=""> Link 3</a>
      <a class="mdl-navigation__link" href=""> Link 4</a>
    </nav>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

HTML:

<nav-menu class="mdl-layout__drawer"/>
person codependent    schedule 27.07.2015