ポリマー1.x：app-drawer-layoutを用いる

Here is my jsBin。 the code example contained here in the documentation（サンプルコードの第4セクション）をレンダリングします。ポリマー1.x：app-drawer-layoutを用いる

左に引き出しパネル、
アプリ名やメニューpaper-icon-button、

メインコンテンツセクション：

<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

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に切り替わりました。以下の回答を参照してください。

<app-drawer-layout force-narrow>

Here is the jsBin次のように

出典

2016-09-11 Mowzer

あなたは<app-drawer-layout>要素にforce-narrow属性を追加する必要があります。

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

あなたが望む通りに動作させるために<app-drawer-layout>にapp-header-layoutとforce-narrowまたはfullbleedのいずれかにhas-scrolling-regionを追加する必要があります。そうでない場合は、ヘッダーの元のレンダリングによって、引き出しの下に置かれます。

私が使用します。ここで

<!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：app-drawer-layoutを用いる

答えて

関連する問題