Функция вызова на панели выдвижного ящика полимеров

Я застрял. Я играл с полимером, но мне не удается вызвать функцию togglePanel на панели выдвижного ящика, и мой код выглядит следующим образом:Функция вызова на панели выдвижного ящика полимеров

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- 1. Load platform.js for polyfill support. --> 
    <script src="bower_components/platform/platform.js"></script> 

    <!-- 2. Use an HTML Import to bring in the element. --> 
    <link rel="import" 
     href="bower_components/core-ajax/core-ajax.html"> 

    <link rel="import" 
     href="bower_components/core-drawer-panel/core-drawer-panel.html"> 

    <link rel="import" 
     href="bower_components/core-toolbar/core-toolbar.html"> 

    <link rel="import" 
     href="bower_components/core-icon-button/core-icon-button.html"> 
    </head> 
    <body> 

    <script> 
     function openDrawer() { 
      alert("fuck"); 
      var drawer = document.getElementById("main-drawer"); 
      drawer.togglePanel(); 
     } 
    </script> 

    <core-drawer-panel id="main-drawer"> 
     <div drawer style="background-color: #FF0000;"> 

     </div> 
     <div main style="background-color: #00FF00;"> 
      <core-toolbar style="background-color: #8888FF;"> 
       <core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button> 
        <div flex>PageTitle</div> 
      </core-toolbar> 
     </div> 
    </core-drawer-panel> 
    </body> 
</html>

Функция вызывается при нажатии на кнопку меню, но больше ничего не происходит, я убедитесь, что с помощью предупреждения.

Я думаю, что это как-то связано с теневым DOM, но я не уверен. Надеюсь, кто-то знает, как назвать его функцию.

источник

2014-10-04 Andreas

core-drawer-panel остается открытым все время, если размер окна меньше responsiveWidth. По умолчанию он будет оставаться открытым, если вы не используете планшет или меньше.

Если вы установили responsiveWidth действительно высокий, вы можете изменить поведение, чтобы оно открывалось только по требованию.

<core-drawer-panel id="main-drawer" responsiveWidth="900em">

http://jsbin.com/zorufa/2/edit

источник

2014-10-04 02:36:16

Другим способом слишком держать ящик близко. отредактируйте код в core-drawer-panel.hmlt и отредактируйте атрибут publish forceNarrow=true Если true, игнорируйте responsiveWidth и установите узкую раскладку.
или с javascript

$scaffold = document.querySelector('scaffold'); 
$scaffold.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true; 
$scaffold.closeDrawer();

источник

2015-04-05 13:50:32 fredtma

Функция вызова на панели выдвижного ящика полимеров

ответ

Смежные вопросы