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;
}

显然抽屉不是继承全局背景颜色......

抽屉式抽屉式抽屉是透明的

1 个答案: