Fatal编程技术网
  • polymer/
  • Polymer 聚合物1.x：使用应用程序抽屉布局

Polymer 聚合物1.x：使用应用程序抽屉布局

polymer

Polymer 聚合物1.x：使用应用程序抽屉布局,polymer,polymer-1.0,app-elements,Polymer,Polymer 1.0,App Elements,。我想渲染（在示例代码的第4部分） 编辑1 如果你打开控制台，它可以正常工作！？但在关闭控制台选项卡后停止工作？？！！世界跆拳道联盟？有人能澄清一下发生了什么事吗？这是虫子吗 编辑2 不，这不是虫子。编辑中描述的行为是由媒体查询的状态变化引起的：屏幕大小切换为窄。请参阅下面的答案。您需要将强制缩小属性添加到中 http://jsbin.com/qevojojalo/1/edit?html，输出 <!doctype html> <head> <meta chars

。我想渲染（在示例代码的第4部分）

编辑1 如果你打开控制台，它可以正常工作！？但在关闭控制台选项卡后停止工作？？！！世界跆拳道联盟？有人能澄清一下发生了什么事吗？这是虫子吗

编辑2
不，这不是虫子。编辑中描述的行为是由
媒体查询的状态变化引起的：屏幕大小切换为
窄
。请参阅下面的答案。
您需要将
强制缩小
属性添加到
中

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



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




抽屉内容
应用程序名称
主要内容
（功能（）{
聚合物({
是：“x元素”，
属性：{}，
});
})();

您需要在
应用程序标题布局中添加一个
具有滚动区域的
，并将
强制缩小
或
完全出血
添加到


<app-drawer-layout force-narrow>



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



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