html - 更改 <core-drawer-panel> 默认宽度时遇到问题

Question

我几天前开始玩弄 Polymer，到目前为止我对它的理解还不错，但就在刚才我遇到了一个问题。我试图更改默认宽度，但无法获得所需的结果。首先，我尝试仅通过以下更改来更改 css 中的宽度:

  #navheader {
      background-color: #56BA89;
  }
  core-drawer-panel .transition > #main{
      left:100px!important;
  }

  core-drawer-panel .transition > #drawer{
      width:100px!important;
  }

  core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
      width:100px!important;
  }

这是html部分:

<core-scaffold>

  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
      <core-item label="Three"></core-item>
      <core-item label="Four"></core-item>
      <core-item label="Five"></core-item>
      <core-item label="Six"></core-item>
      <core-item label="Seven"></core-item>

    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>
</core-scaffold>

它不想在没有 !important 的情况下覆盖默认样式。这就是我得到的:http://screencast.com/t/7AQHblQvk在崩溃之前它看起来不错，像这样:http://screencast.com/t/oDg3ptLpp .然后我尝试更改 core-drawer-panel.html 内部的默认宽度，所以我修改了这部分代码:

/**
 * Width of the drawer panel.
 *
 * @attribute drawerWidth
 * @type string
 * @default '256px'
 */
 drawerWidth: '100px',

什么也没发生。它没有改变元素的宽度，所以现在我没有关于如何实现这一点的想法和知识。谁能帮忙？

提前致谢! :)

Answer 1

有一个 drawerWidth 属性可以改变宽度:

<core-drawer-panel drawerWidth="100px">

https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel