默认隐藏 paper-header-panel
Hide paper-header-panel by default
我正在玩 Polymer 项目,想创建一个类似于 Google Play Music (https://play.google.com/music) 的布局。
如何默认隐藏抽屉并显示图标?基本上应该强制纸抽屉面板的小屏幕行为。
如何创建类似于 Play Music 的应用程序工具栏?
在此先致谢。
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel responsiveWidth="9999px">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</body>
我找到了解决办法!当诸如属性之类的基础知识不正确时,文档就毫无用处。
<paper-drawer-panel responsive-width="10000px">
嗯... force-narrow
怎么样?
<paper-header-panel force-narrow>
...
</paper-header-panel>
如"paper-header-panel.html"所述:
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},
我正在玩 Polymer 项目,想创建一个类似于 Google Play Music (https://play.google.com/music) 的布局。
如何默认隐藏抽屉并显示图标?基本上应该强制纸抽屉面板的小屏幕行为。 如何创建类似于 Play Music 的应用程序工具栏?
在此先致谢。
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel responsiveWidth="9999px">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div>Drawer content...</div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div>Main content...</div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</body>
我找到了解决办法!当诸如属性之类的基础知识不正确时,文档就毫无用处。
<paper-drawer-panel responsive-width="10000px">
嗯... force-narrow
怎么样?
<paper-header-panel force-narrow>
...
</paper-header-panel>
如"paper-header-panel.html"所述:
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},