如何缩小 Polymer 2.x 中 app-drawer-layout 中抽屉和主要内容之间的差距？

Question

我有一个 app-drawer-layout 元素，我希望抽屉内容（蓝色）与主要内容（黄色）齐平，中间没有间隙（白色）。请注意，我将 --app-drawer-width 从默认值 256px 更改为 100px。这可能是造成差距的原因。这是一个错误吗？还是我编码有误？

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>

Answer 1

这不是错误。可能您没有阅读 documentation.

中的 注意事项

NOTE:* If you use with and specify a value for --app-drawer-width, that value must be accessible by both elements. This can be done by defining the value on the :host that contains (or html if outside a shadow root):

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

在这种情况下，它将是：

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

Answer 2

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>

如何缩小 Polymer 2.x 中 app-drawer-layout 中抽屉和主要内容之间的差距？

How to close the gap between drawer and main content in app-drawer-layout in Polymer 2.x?

polymer

polymer-2.x

polymer-2.0