Html 大屏幕上的核心抽屉面板是否也关闭？_Html_Polymer_Material Design

Html 大屏幕上的核心抽屉面板是否也关闭？

html polymer

Html 大屏幕上的核心抽屉面板是否也关闭？,html,polymer,material-design,Html,Polymer,Material Design,我正在构建我的第一个聚合物/材料设计网络应用程序。在其中，我使用了一个核心抽屉面板。它的正常行为是在大屏幕上打开，但我希望它在大屏幕上的行为与在小屏幕上的行为相同。这可能吗 <body> <core-drawer-panel id="drawerPanel" rightDrawer> <core-header-panel drawer> <core-toolbar id="navheader'">

我正在构建我的第一个聚合物/材料设计网络应用程序。在其中，我使用了一个

核心抽屉面板

。它的正常行为是在大屏幕上打开，但我希望它在大屏幕上的行为与在小屏幕上的行为相同。这可能吗

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


菜单

更新：在最新版本的polymer core elements（0.5.0）中，有一个新属性可以设置为

，即

force窄

，它强制面板始终窄，无论其处理的宽度或响应宽度如何

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

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

这意味着，在

500px

上方，核心抽屉面板将打开，在

500px

下方，面板将关闭，您必须通过滑动或按下挂在面板上的菜单按钮来打开和关闭面板。

这已经用较新的

force窄型

属性得到了回答，但我认为仍然需要对默认行为进行一些区分

在较大的屏幕上使用

force窄带

时，您仍然可以使用

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>


...
//这将在主要内容的顶部创建抽屉覆盖
openDrawer:function（）{
此.drawer.togglePanel（）；
}

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

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

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


...
//这将调整主要内容的大小以容纳抽屉
抽屉箭头：是的，
openDrawer:function（）{
this.drawerNarrow=！this.drawerNarrow
}

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

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