Wie schließt man die Lücke zwischen Schublade und Hauptinhalt im App-Drawer-Layout in Polymer 2.x?

Ich habe ein app-drawer-layout Element und darin möchte ich die Schublade Inhalt (blau) bündig mit dem Hauptinhalt (gelb) ohne Lücke (weiß) dazwischen. Beachten Sie, dass ich die --app-drawer-width von 256px zu 100px geändert habe. Dies könnte die Lücke verursachen. Ist das ein Fehler? Oder programmiere ich es falsch?Wie schließt man die Lücke zwischen Schublade und Hauptinhalt im App-Drawer-Layout in Polymer 2.x?

Here is the JSBin.Hinweis: Stellen Sie beim Anzeigen der Demo sicher, dass das Ausgabefeld weit genug verschoben ist, um das Fach sichtbar zu machen. Wenn das Ausgabefenster zu schmal ist, wird die Schublade ausgeblendet.

app-Schublade-Layout

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>

Quelle

2017-08-07 Mowzer

Dies ist kein Fehler. Vermutlich haben Sie es versäumt, die NOTE in der documentation zu lesen.

HINWEIS: * Wenn Sie mit verwenden und einen Wert für --app-drawer-width angeben, , die den Wert von beiden Elementen zugänglich sein muß. Dies kann durch definieren den Wert auf dem :host erfolgen, die (oder html wenn außerhalb eines Schatten root) enthält:

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

In diesem Fall wäre es:

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

Quelle

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>

Quelle

2017-08-07 18:17:30 Mowzer

Wie schließt man die Lücke zwischen Schublade und Hauptinhalt im App-Drawer-Layout in Polymer 2.x?

Antwort

Verwandte Themen