Polymer 1.x：使用 app-drawer-layout

Question

Here is my jsBin. I want to render the code example contained here in the documentation（在示例代码的第 4 部分）。

<app-drawer-layout>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

我希望看到以下三个部分：

左边的抽屉面板，
应用名称和菜单paper-icon-button,
主要内容部分。

相反，我只看到编号为 1 和 3 的部分；而不是数字 2。

我还希望看到抽屉面板以关闭状态开始，并在单击不存在的菜单按钮时切换。相反，抽屉面板开始处于打开状态。

我怎样才能达到预期的效果？

Link to jsBin

http://jsbin.com/kamusideji/1/edit?html,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-icon/iron-icon.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="app-layout/app-drawer/app-drawer.html" rel="import">
  <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
  <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
  <link href="app-layout/app-header/app-header.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<app-drawer-layout>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

编辑 1

如果您打开 控制台 tab in the jsBin，它可以正常工作！？但是在关闭控制台选项卡后停止工作？？！！什么鬼？有人可以澄清发生了什么吗？这是一个错误吗？

编辑 2

不，这不是错误。编辑中描述的行为是由 media query 的状态变化引起的：屏幕尺寸切换为 narrow。请参阅下面的答案。

Answer 1

您需要将 force-narrow 属性添加到 <app-drawer-layout> 元素，如下所示：

<app-drawer-layout force-narrow>

Here is the jsBin.

http://jsbin.com/qevojojalo/1/edit?html,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-icon/iron-icon.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="app-layout/app-drawer/app-drawer.html" rel="import">
  <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
  <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
  <link href="app-layout/app-header/app-header.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

<app-drawer-layout force-narrow>
  <app-drawer>
    drawer-content
  </app-drawer>
  <app-header-layout>
    <app-header>
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>

    main content

  </app-header-layout>
</app-drawer-layout>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 2

您需要在 app-header-layout 中添加 has-scrolling-region，在 <app-drawer-layout> 中添加 force-narrow 或 fullbleed 才能使其正常工作。如果没有，原版的header 放在抽屉底下。

我会使用：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="polymer/polymer.html" rel="import">
    <link href="iron-icon/iron-icon.html" rel="import">
    <link href="iron-icons/iron-icons.html" rel="import">
    <link href="paper-icon-button/paper-icon-button.html" rel="import">
    <link href="app-layout/app-drawer/app-drawer.html" rel="import">
    <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
    <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
    <link href="app-layout/app-header/app-header.html" rel="import">
    <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
  </head>
  <body>

  <dom-module id="x-element">

    <template>
      <style>
      </style>

    <app-drawer-layout fullbleed>
      <app-drawer>
        drawer-content
      </app-drawer>
      <app-header-layout  has-scrolling-region>
        <app-header  condenses reveals effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
            <div main-title>App name</div>
          </app-toolbar>
        </app-header>

        main content

      </app-header-layout>
    </app-drawer-layout>

    </template>

    <script>
      (function(){
        Polymer({
          is: "x-element",
          properties: {},
        });
      })();
    </script>

  </dom-module>

  <x-element></x-element>

  </body>
</html>

此处示例：http://jsbin.com/pilogib/1/edit?html,output

Polymer 1.x：使用 app-drawer-layout

Polymer 1.x: Using app-drawer-layout

polymer

polymer-1.0

app-elements