Material-design-lite: Comment fermer le tiroir ?

Créé le 7 janv. 2016 · 5Commentaires · Source: google/material-design-lite

Salut,

J'ai une question. Je clique sur le bouton de menu pour ouvrir le tiroir et je clique sur un élément de menu. Le tiroir ne se ferme pas après avoir cliqué sur un élément. Existe-t-il un moyen de configurer le menu ou de déclencher la fermeture du tiroir après avoir cliqué sur un élément de menu ?

Merci,
Kerry

Source

ktodyruik

Commentaire le plus utile

Malheureusement, je pense que cette méthode : $('.mdl-layout').MaterialLayout.toggleDrawer() suppose que vous utiliserez jQuery. Je ne suis pas. Je l'ai fait fonctionner en utilisant du JS pur. J'ai simplement défini un ID sur mon conteneur .mdl-layout et référencé cet élément dom :

document.getElementById('app').MaterialLayout.toggleDrawer()

Où app était l'identifiant de mon conteneur .mdl-layout.

runningrandall le 16 févr. 2017

👍5

Tous les 5 commentaires

Vous avez raison, le tiroir ne se ferme pas car généralement le tiroir contient des liens provoquant un rechargement complet.

Nous avons ajouté la fonction toggleDrawer() et elle sera livrée avec 1.1 (probablement la semaine prochaine).

Avec ça tu peux $('.mdl-layout').MaterialLayout.toggleDrawer() dans ton JS :)

surma le 7 janv. 2016

👍2

@surma 1.1 sera probablement disponible la semaine prochaine :tada: Bonne nouvelle et merci !

mariusbutuc le 7 janv. 2016

Ai-je besoin de quelque chose de spécial pour que cela fonctionne $('.mdl-layout').MaterialLayout.toggleDrawer() ? Si j'appelle ceci, j'obtiens Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…) .

J'utilise la version 1.1.3, hébergée via google (comme décrit ici : http://www.getmdl.io/started/) :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

avec une structure corporelle de base

<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <!-- header -->
    </header>
    <div class="mdl-layout__drawer">
      <!-- drawer -->
    </div>
    <main class="mdl-layout__content">
     <!-- main content -->
    </main>
  </div>
</body>

joshy le 15 avr. 2016

👍1

document.getElementById('app').MaterialLayout.toggleDrawer()

Où app était l'identifiant de mon conteneur .mdl-layout.

runningrandall le 16 févr. 2017

👍5

Ai-je besoin de quelque chose de spécial pour que cela fonctionne $('.mdl-layout').MaterialLayout.toggleDrawer() ? Si j'appelle ceci, j'obtiens Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…) .
J'utilise la version 1.1.3, hébergée via google (comme décrit ici : http://www.getmdl.io/started/) :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
avec une structure corporelle de base
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      
    </header>
    <div class="mdl-layout__drawer">
      
    </div>
    <main class="mdl-layout__content">
     
    </main>
  </div>
</body>

Avez-vous réussi à résoudre cela?