紙抽屜面板默認爲縮小

在Firefox 39.0和Chrome使用聚合物1.0 43.0紙抽屜面板默認爲縮小

聚合物入門套件

我基本上具有：

<body unresolved class="fullbleed layout vertical"> <template is="dom-bind" id="app"> <paper-drawer-panel id="paperDrawerPanel" narrow="true"> <div drawer> Drawer </div> <div main> Main </div> </paper-drawer-panel> </template> </body>

這是從聚合物入門套件。

我除去的forceNarrow屬性從paper-drawer-panel，甚至試圖添加屬性narrow="false"，但是當我觀看在瀏覽器中的網站上的我的筆記本電腦（15" 畫面），在面板始終處於窄模式當我看在控制檯中narrow屬性，它被設置爲true。

這是我的理解，無論是抽屜和主要內容出現並排的一面，當窗口比responsiveWidth大。所以，爲什麼我沒有看到這種行爲？

來源

2015-07-10 Brian

設置narrow =「false」實際上是設置窄===真。如果它們存在，布爾屬性總是爲真，無論你給它們賦予什麼值。在html中縮小錯誤的唯一方法是不包含它。否則，要將其設置爲false，您可以調用document.getElementById（'paperDrawerPanel'）。narrow = false; –

在聚合物入門套件，內部app/scripts/app.js：

window.addEventListener('WebComponentsReady', function() { 
    document.querySelector('body').removeAttribute('unresolved'); 

    // Ensure the drawer is hidden on desktop/tablet 
    var drawerPanel = document.querySelector('#paperDrawerPanel'); 
    drawerPanel.forceNarrow = true; 
});

線drawerPanel.forceNarrow = true;迫使抽屜面板得較窄。您可以註釋掉該行以獲得適當的行爲。

我相信這是包含在初學者工具包中，以演示如何獲得始終具有可摺疊抽屜的相反行爲。

來源

2015-07-10 23:28:27 Brian

只需將force-narrow不是forceNarrow添加到您的paper-drawer-panel並刪除javascript。在camelCase（如forceNarrow）中的聚合物JavaScript屬性將與HTML中的camel-case匹配。

使用narrow=true將不起作用，因爲這是抽屜的狀態，並且會永久性地隱藏該元素。

來源

2015-07-20 09:34:12 synk

聚合物1.0文檔中沒有很好地解釋這一點。例如，他們應該提到JS屬性forceNarrow對應於強制縮小的html屬性 – Raffaeu

紙抽屜面板默認爲縮小

回答

相關問題