How to hide drawer upon user click

javascript material-design material-design-lite
krato picture krato · Jul 21, 2015 · Viewed 13k times · Source

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

<div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
          <i class="material-icons">add</i>
        </button>
</div>

How do I do it that when the button is clicked, the drawer will be hidden as if I clicked outside of the drawer? I tried simulating a click event outside of the drawer but it still does not hide.

Answer

Benjamin picture Benjamin · Jan 11, 2016

toggleDrawer is now a public function since @be54f78.

var layout = document.querySelector('.mdl-layout');
layout.MaterialLayout.toggleDrawer();

Not currently available with v1.0.6, so you will need to build from source (as of today).

Related questions

How get data from material-ui TextField, DropDownMenu components?

I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value …

Read More
How to set the date in materialize datepicker

I am using materializecss.com Datepicker. When i try to set date with jquery, the date doesn't get set. Here is my Code :- // Materialize Date Picker window.picker = $('.datepicker').pickadate({ selectMonths: true, // Creates a dropdown to control month …

Read More
Angular - 'Could not find HammerJS'

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says: Could not find HammerJS. Certain Angular Material components may …

Read More