Persistent drawers in Material Components

Question

I am trying to use drawers in a JavaScript page but from the documentation I cannot understand how the HTML components are interacting together with the Js.

Ideally I would like to add modal drawers to my HTML page by only including the DOM and the JS without using any external web framework.

I am looking at this documentation: https://material.io/develop/web/components/drawers/

If somebody knows how the could be hide / show from a button.

thanks

Answer 1

All components in MDC have a few different ways that you can initialise them based off what JS you are using. So while my example uses the CDN version of the javascript, you can find out how to convert my example to whatever JS version you are using here.

Example: https://codepen.io/MrSimmons/pen/LYperJx

Basically what you want to do is to attach the draw to your draw html, then on a button click, trigger the draw open.

<aside class="mdc-drawer mdc-drawer--modal">
    ...
</aside>

// Create an instance of the draw
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

// On button click
document.querySelector('#open').addEventListener("click", ()=> {
    // Set the draw to whatever state it was not in last
    drawer.open = !drawer.open;
});