聚合物1.x：使用應用程序抽屜佈局

Here is my jsBin。我想呈現the code example contained here in the documentation（在示例代碼的第4部分）。聚合物1.x：使用應用程序抽屜佈局

<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,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> 
    <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，它有點工作！？但在關閉控制檯選項卡後停止工作！ WTF？有人可以澄清發生了什麼嗎？這是一個錯誤？

編輯2

不，這不是一個錯誤。編輯中描述的行爲是由media query狀態的變化引起的：屏幕大小切換爲narrow。見下面的答案。

來源

2016-09-11 Mowzer

您需要的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>

來源

2016-09-11 06:34:55 Mowzer

您需要添加一個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

來源

2016-09-11 06:42:40 LostInBrittany

http://jsbin.com/pilogib/1/edit?html,output對不起:) – LostInBrittany

聚合物1.x：使用應用程序抽屜佈局

回答

相關問題