core-drawer-panel 抽屉透明

Question

我正在努力学习 Polymer.dart，但我一直停留在 core-drawer-panel 的基本用法上...当我像这样使用 core-drawer-panel 时：

<link rel="import" href="../../packages/polymer/polymer.html">

<link rel="import" href="../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_icons.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">

<polymer-element name="main-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <core-drawer-panel>
      <core-header-panel drawer>
        <core-toolbar>
          <div>Application</div>
        </core-toolbar>
        <core-menu>
          <core-item icon="settings">Test</core-item>
        </core-menu>
      </core-header-panel>
      <core-header-panel main>
        <core-toolbar>
          <paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
          <div>Title</div>
        </core-toolbar>
        <div> Main content... </div>
      </core-header-panel>
    </core-drawer-panel>
  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

我得到透明的抽屉，当布局切换到窄并且使用按钮显示抽屉时，例如抽屉区域中的菜单叠加在主要内容区域上...... 我在这里错过了什么？

Answer 1

好吧，我确实通过使用

显式设置抽屉样式来解决问题

[drawer] {
  background-color: #xxxxxx;
}

显然抽屉没有继承全局背景色...

core-drawer-panel 抽屉透明

core-drawer-panel drawer is transparent

dart

polymer

dart-polymer