Возникли проблемы с изменением ширины панели ‹core-drawer-panel› по умолчанию.

Я начал играться с 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',

и ничего не произошло. Это не изменило ширину элемента, поэтому теперь у меня нет идей и знаний о том, как этого добиться. Кто-нибудь может помочь?

Заранее спасибо! :)


html css web-component polymer
person Plavookac    schedule 24.11.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Есть атрибут drawerWidth для изменения ширины:

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

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

person ebidel    schedule 24.11.2014
comment
если используете core-scaffold, добавьте его туда, так как есть неявная ‹core-drawer-panel›: ‹core-scaffold id=scaffold drawerWidth=225px › - person dsaronin; 20.05.2015

arrow_upward
1
arrow_downward

В дополнение к ответу ebidel из руководства разработчика полимеров:

Имена атрибутов с тире преобразуются в имена свойств в верблюжьем регистре путем написания заглавной буквы после каждого тире, а затем удаления тире. Например, атрибут firstname сопоставляется с firstName.

Если приведенный выше ответ не работает, попробуйте этот:

<core-drawer-panel drawer-width="100px">
person Szilveszter Zsigmond    schedule 13.03.2016