纸抽屉面板默认为窄

Question

在 Firefox 39.0 和 Chrome 43.0

上使用 Polymer 1.0

聚合物入门套件

我基本上有：

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

这是来自聚合物入门套件。

我 删除了 paper-drawer-panel 中的 forceNarrow 属性，甚至尝试添加属性 narrow="false"，但是当我在笔记本电脑（15" 屏幕）上的浏览器中查看站点时，面板始终处于窄模式。当我查看控制台中的 narrow 属性时，它设置为 true.

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

Answer 1

在聚合物入门套件中，在 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;强制抽屉面板变窄。您可以注释掉该行以获得适当的行为。

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

Answer 2

只需将 force-narrow NOT forceNarrow 添加到您的 paper-drawer-panel 并删除 javascript。 camelCase 中的聚合物 javascript 属性，如 forceNarrow 将与 HTML 中的 camel-case 相匹配。

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

纸抽屉面板默认为窄

paper-drawer-panel defaults to narrow

javascript

css

polymer

paper-elements