如何獲得在聚合物初學者工具包的應用程序抽屜切換

編輯：代碼是在這裏https://github.com/PolymerElements/polymer-starter-kit（我只是跑聚合物初始化按照自述指令）如何獲得在聚合物初學者工具包的應用程序抽屜切換

當我嘗試使用

<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

就像在文檔中，按鈕消失。當我嘗試使用時

<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>

該按鈕重新出現但不起作用。

我試過下面的一些其他例子，比如在標籤中使用onclick = drawer.toggle（），但我不知道如何/在哪裏定義抽屜。嘗試使用

document.querySelector('paper-icon-button').addEventListener('tap', function() { 
     drawer.toggle(); 
    });

這是一個本地DOM，所以我需要以某種方式避開它。當我嘗試使用var drawer = this。$$（'app-drawer'）或這個。$''app-drawer'或其他任何我可以複製和粘貼的語法時，我只是得到錯誤。我明顯是聚合物的新手，經過6個小時的練習後，我迷路了，可以使用一些指導。

來源

2016-11-25 Bobby Battista

我們可以看到你的代碼。所以我們知道你在哪裏/在哪裏使用它 – a1626

我添加了代碼，謝謝你的迴應！ –

你應該在紙的圖標按鈕申報的敲擊事件來處理抽屜：

<paper-icon-button icon="menu" on-tap="_toggleDrawer" aria-label="Menu"> </paper-icon-button>

然後在你的應用程序抽屜裏，你應該反映drawerOpened因此它可以打開或關閉它TE屬性：

<app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">

最後聲明這樣的_toggleDrawer功能來改變應用程序抽屜的德值而打開屬性：

_toggleDrawer: function() { 
    this.drawerOpened = !this.drawerOpened; 
    }

希望它有幫助

來源

2016-11-25 14:04:09 JpCrow

雖然從這裏閱讀，但「腳本中的切換功能不是必需的，切換開關通過使用紙張圖標按鈕元素上的paper-drawer-toggle屬性而開箱即用。」儘管在這個入門套件中給出的代碼中缺少「紙張」一詞，但它只是說'抽屜切換' http://stackoverflow.com/questions/30714253/polymer-1-0-paper-drawer-面板切換不工作 –

我也在這裏看到，這種行爲預計在筆記本電腦上 - 抽屜切換隻適用於小型顯示器。但使用forceNarrow也無法正常工作......如何在開發中測試此按鈕？ https://github.com/PolymerElements/app-layout/issues/252 –

事實證明，大屏幕禁用抽屜切換功能，因此在筆記本電腦上開發時，整個按鈕將消失。爲了找回它，你需要在app-drawer-layout標籤中使用force-narrow。還值得注意的是，文檔沒有列出您可以在標籤中使用的屬性，它只是列出了屬性......但是您可以通過從camelCase切換到使用破折號來將屬性轉換爲屬性。 forceNarrow變得狹隘。我在這裏找到這裏：https://github.com/PolymerElements/app-layout/issues/218

來源

2016-11-26 01:09:58

如何獲得在聚合物初學者工具包的應用程序抽屜切換

回答

相關問題