聚合物導航抽屜面板上的調用功能

我卡住了。我玩弄聚合物，但我不設法調用抽屜面板上的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">

來源

2014-10-04 02:36:16

的其他方式也保持了密切的抽屜。編輯core-drawer-panel.hmlt中的代碼並編輯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

聚合物導航抽屜面板上的調用功能

回答

相關問題