0

Material Design Liteで作成したいくつかのPolymerコンポーネントを統合しようとしています。ただし、何もレンダリングしないだけです。まるでマテリアル デザインが Polymer コンポーネントで機能しないかのようです。

これらは、HTML + マテリアル デザインのサイド メニューを作成するために従う手順です。

プレーン マテリアル デザイン ライト サイド メニュー:

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

ここで、テストとして、いくつかのマークアップを含むnav-menu.html Polymer 要素を作成します。

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

次に、メニューの前に含めて、OK にレンダリングします。

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);
}

Polymer 要素はタグにネストされているため<nav-menu>、CSS スタイルは適用されません。助言がありますか？

4

1 に答える 1

0

Polymerコンポーネントからネストされたものを削除<div class="mdl-layout__drawer style-scope nav-menu">し、スタイルを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"/>
于 2015-07-27T08:26:33.177 に答える