我正在尝试整合我使用 Material Design Lite 创建的一些 Polymer 组件。但是,它们只是不渲染任何东西,就好像材料设计无法与Polymer组件一起使用。
以下是我创建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>
现在,作为测试,我使用一些标记创建 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 developer tools inspect上看到):
<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样式。有什么建议吗?
答案 0 :(得分: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"/>