Polymer 2.xのapp-drawer-layoutでドロワとメインコンテンツのギャップを閉じる方法は？

私はapp-drawer-layout要素を持っていますが、その中にメインコンテンツ（黄色）と引き出しコンテンツ（青色）が隙間なく（白く）なるようにしたいと考えています。 --app-drawer-widthを100pxからデフォルトの256pxに変更しました。これはギャップを引き起こしているものかもしれません。これはバグですか？それとも間違ってコーディングしていますか？Polymer 2.xのapp-drawer-layoutでドロワとメインコンテンツのギャップを閉じる方法は？

Here is the JSBin.注：デモを表示するときは、出力ペインが引き出しが見えるようにスライドされていることを確認してください。出力ペインが狭すぎると、引き出しが非表示になります。

アプリ-引き出しレイアウト

http://jsbin.com/lulenamavo/edit?html,output

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="http://polygit.org/polymer+:master/components/"> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="app-layout/app-layout.html"> 

</head> 

<body> 
    <dom-module id="my-el"> 
    <template> 
     <style> 
     app-drawer { 
      --app-drawer-width: 100px; 
      --app-drawer-content-container: { 
      background-color: blue; 
      color: white; 
      } 
     } 
     #main-content { 
      background-color: yellow; 
      height: 100vh; 
      width: 100vw; /* doesn't make content sections flush */ 
     } 
     </style> 
     <app-drawer-layout fullbleed> 
     <app-drawer slot="drawer"> 
      drawer content 
     </app-drawer> 
     <div id="main-content"> 
      main content 
     </div> 
     </app-drawer-layout> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { 
      return 'my-el' 
     } 
     } 
     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 

</html>

出典

2017-08-07 Mowzer

これはバグではありません。おそらく、documentationの注を読んでいない可能性があります。

注：*あなたが使用して--app-drawer-widthの値を指定した場合、その値は、両方の要素によってアクセス可能である必要があります。これは（シャドウルート外場合又はhtml）を含む:hostに値を定義によって行うことができる。この場合

:host { --app-drawer-width: 300px; }

、それは次のようになります

<style> 
    :host { 
    --app-drawer-width: 100px; 
    } 
</style>

出典

2017-08-07 08:54:07 Ofisora

For clarity, here is the fully coded solution demo.

http://jsbin.com/jodifafuqa/edit?html,output

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="http://polygit.org/polymer+:master/components/"> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="app-layout/app-layout.html"> 

</head> 

<body> 
    <dom-module id="my-el"> 
    <template> 
     <style> 
     :host { 
      --app-drawer-width: 100px; 
     } 
     app-drawer { 
      --app-drawer-content-container: { 
      background-color: blue; 
      color: white; 
      } 
     } 
     #main-content { 
      background-color: yellow; 
      height: 100vh; 
      width: 100vw; /* doesn't make content sections flush */ 
     } 
     </style> 
     <app-drawer-layout fullbleed> 
     <app-drawer slot="drawer"> 
      drawer content 
     </app-drawer> 
     <div id="main-content"> 
      main content 
     </div> 
     </app-drawer-layout> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { 
      return 'my-el' 
     } 
     } 
     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 

</html>

出典

2017-08-07 18:17:30 Mowzer

Polymer 2.xのapp-drawer-layoutでドロワとメインコンテンツのギャップを閉じる方法は？

答えて

関連する問題