更改 <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',

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

提前感谢！:)

- Plavookac

Answer 1

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

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

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

- ebidel

---

如果使用core-scaffold，请将其添加到其中，因为有一个隐式的<core-drawer-panel>： <core-scaffold id="scaffold" drawerWidth="225px" > - dsaronin

Answer 2

除了ebidel在Polymer开发者指南中的回答之外：

带有破折号的属性名称会被转换为驼峰式属性名称，方法是将每个破折号后面的字符大写化，然后去掉破折号。例如，属性first-name映射到firstName。

如果上面的答案不起作用，请尝试这个：

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

- Szilveszter Zsigmond