默认隐藏paper-header-panel

时间:2015-06-18 05:00:21

标签: polymer polymer-1.0

我正在玩Polymer项目,想要创建一个类似于Google Play音乐的布局(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>

2 个答案:

答案 0 :(得分:9)

呃...只是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
    },

答案 1 :(得分:1)

我找到了解决方案!当诸如属性之类的基础知识不正确时,文档是无用的。

<paper-drawer-panel responsive-width="10000px">