抽屉面板默认为窄答案

【问题标题】：paper-drawer-panel defaults to narrow抽屉面板默认为窄
【发布时间】：2015-07-10 22:47:17
【问题描述】：

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

这是来自 Polymer Starter Kit。

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

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

【问题讨论】：

设置narrow="false" 实际上是设置narrow === true。如果布尔属性存在，则无论您赋予它们什么值，布尔属性始终为真。在 html 中使窄为假的唯一方法是不包含它。否则要将其设置为 false，您可以调用 document.getElementById('paperDrawerPanel').narrow = false;

标签： javascript css polymer paper-elements

【解决方案1】：

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

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

【讨论】：

好点在 Polymer 1.0 文档中没有得到很好的解释。例如，他们应该提到 JS 属性 forceNarrow 对应于 force-narrow html 属性

【解决方案2】：

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

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

【讨论】：