核心抽屉面板也在大屏幕上关闭？答案

【问题标题】：Core-drawer-panel closed on large screens as well?核心抽屉面板也在大屏幕上关闭？
【发布时间】：2014-12-28 19:15:43
【问题描述】：

我正在构建我的第一个聚合物/材料设计 web 应用。其中，我使用的是core-drawer-panel。它的正常行为是它在大屏幕上打开，但我希望它在大屏幕上的行为与在小屏幕上的行为相同。这可能吗？

<body>

    <core-drawer-panel id="drawerPanel" rightDrawer>

        <core-header-panel drawer>

            <core-toolbar id="navheader'">

                <span>Menu</span>

            </core-toolbar>

            <core-menu>

                <core-item label="One"></core-item>
                <core-item label="Two"></core-item>

            </core-menu>

        </core-header-panel>

        <core-header-panel main>

        </core-header-panel>

    <core-drawer-panel>

<body>

【问题讨论】：

标签： html polymer material-design

【解决方案1】：

更新：

在最新版本的聚合物核心元素 (0.5.0) 中，您可以将一个新属性设置为 <core-drawer-panel>forceNarrow，它强制面板始终是窄的，无论它的宽度或响应宽度是多少处理。

如果这是您需要的，请执行以下操作：

<core-drawer-panel forceNarrow>...</core-drawer-panel>

原始答案：

您可以尝试将responsiveWidth 属性更改为大得离谱的值。

responsiveWidth 属性指定您希望核心抽屉面板默认打开的宽度。

例子：

<core-drawer-panel responsiveWidth="500px">...</core-drawer-panel>

这意味着500px 上方的核心抽屉面板将打开，500px 下方的面板将关闭，您必须通过滑动或按下您挂钩的菜单按钮来打开和关闭它上它。

【讨论】：

【解决方案2】：

更新的forceNarrow 属性已经回答了这个问题，但我认为仍然需要对默认行为进行一些区分。

当在大屏幕上使用forceNarrow 时，您仍然可以使用togglePanel() 方法打开抽屉，但是这仍然可以通过创建抽屉覆盖在小屏幕上进行。

<core-drawer-panel id="drawer" forceNarrow="true">
<div drawer></div>
<div main></div>
</core-drawer-panel>

<script>
...
//  This creates drawer overlay on top of and covering the main content
openDrawer: function(){
    this.$.drawer.togglePanel();
}
</script>

这种覆盖对于大屏幕来说很烦人，因为覆盖通常用于在较小的屏幕上节省空间，并且您可能希望在从抽屉中选择时看到整个主要区域。

如果您希望使用新抽屉调整主要内容的大小，请尝试使用聚合物：

<core-drawer-panel id="drawer" forceNarrow="{{drawerNarrow}}">
<div drawer></div>
<div main></div>
</core-drawer-panel>

<script>
...
//  This resizes the main content to accommodate the drawer
drawerNarrow: true,
openDrawer: function(){
    this.drawerNarrow = !this.drawerNarrow
}
</script>

这允许您在更大的屏幕上加载关闭的抽屉，然后在您打开它时调整大屏幕上所有内容的大小。

【讨论】：