Question

我正在构建我的第一个聚合物/材料设计webapp。在其中，我使用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>

Answer 1

更新

在最新版本的聚合物核心元素（0.5.0）中，您可以设置<core-drawer-panel>的新属性forceNarrow，这会迫使面板始终变窄无论它处理什么宽度或响应宽度。

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

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

原始答案：

您可以尝试将responsiveWidth属性更改为荒谬的大小。

responsiveWidth属性指定默认情况下要打开core-drawer-panel的宽度。

示例：

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

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

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

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

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

2 个答案:

更新

原始答案：