Utilisation de Polymer 1.0 sur Firefox 39.0 et Chrome 43.0

Kit de démarrage en polymère


J'ai essentiellement:

<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>

Ceci provient du kit de démarrage polymère.

J'ai supprimé l'attribut forceNarrow de paper-drawer-panel, et même essayé d'ajouter l'attribut narrow="false", mais lorsque je consulte le site dans mon navigateur sur mon ordinateur portable (écran 15 "), le panneau est toujours en mode étroit. Lorsque je regarde l'attribut narrow dans la console, il est réglé sur true.

Je crois comprendre que le tiroir et le contenu principal doivent apparaître côte à côte lorsque la fenêtre est plus grande que responsiveWidth. Alors pourquoi est-ce que je ne vois pas ce comportement?

1
Brian 11 juil. 2015 à 01:47

2 réponses

Meilleure réponse

Dans Polymer Starter Kit, à l'intérieur de 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;
});

La ligne drawerPanel.forceNarrow = true; force le panneau du tiroir à être étroit. Vous pouvez commenter la ligne afin d'obtenir le comportement approprié.

Je crois que cela a été inclus dans le kit de démarrage pour montrer comment obtenir le comportement opposé d'avoir toujours un tiroir pliable.

0
Brian 10 juil. 2015 à 23:54

Ajoutez simplement force-narrow NOT forceNarrow à votre paper-drawer-panel et supprimez le javascript. Les attributs JavaScript de polymère dans camelCase comme forceNarrow seront mis en correspondance avec camel-case en HTML.

L'utilisation de narrow=true ne fonctionnera pas car c'est l'état du tiroir et masquera effectivement l'élément pour toujours.

6
synk 20 juil. 2015 à 09:34