Question

在Firefox 39.0和Chrome 43.0上使用Polymer 1.0

Polymer Starter Kit

我基本上有：

<body unresolved class="fullbleed layout vertical"> <template is="dom-bind" id="app"> <paper-drawer-panel id="paperDrawerPanel" narrow="true"> <div drawer> Drawer </div> <div main> Main </div> </paper-drawer-panel> </template> </body>

这是来自Polymer Starter Kit。

我 已移除 来自forceNarrow的{{1}}属性，甚至尝试添加属性paper-drawer-panel，但当我查看时在我的笔记本电脑上的浏览器中的网站（15＆＃34;屏幕），面板始终处于狭窄模式。当我查看控制台中的narrow="false"属性时，它设置为narrow。

据我了解，当窗口大于true时，抽屉和主要内容并排显示。那么为什么我没有看到这种行为？

Answer 1

只需将force-narrow NOT forceNarrow添加到paper-drawer-panel并删除javascript即可。像camelCase这样的forceNarrow聚合物javascript属性将与HTML中的camel-case匹配。

使用narrow=true将不起作用，因为这是抽屉的状态，并将永远有效地隐藏元素。

Answer 2

在Polymer Starter Kit中，在app/scripts/app.js内：

window.addEventListener('WebComponentsReady', function() {
  document.querySelector('body').removeAttribute('unresolved');

  // Ensure the drawer is hidden on desktop/tablet
  var drawerPanel = document.querySelector('#paperDrawerPanel');
  drawerPanel.forceNarrow = true;
});

线drawerPanel.forceNarrow = true;强制抽屉面板变窄。您可以注释掉该行以获得适当的行为。

我相信这包含在入门套件中，以演示如何获得始终具有可折叠抽屉的相反行为。

paper-drawer-panel默认为窄

2 个答案: