Question

Here is my jsBin。我想渲染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>，
主要内容部分。

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

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

如何实现理想的行为？

Link to jsBin

paper-icon-button

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

不，这不是一个错误。编辑中描述的行为是由<!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>的状态更改引起的：屏幕大小已切换为media query。见下面的答案。

Answer 1

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

<app-drawer-layout force-narrow>

Here is the jsBin

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

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

您需要将has-scrolling-region添加到app-header-layout，将force-narrow或fullbleed添加到<app-drawer-layout>，以使其按您的意愿运行。如果没有，标题的原始结束将其放在抽屉下面。

我会用：

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

2 个答案: