Material Components for the web modal drawer example using CDNs

Question

Examples on using Material Components for Web CDNs for front-end design are not that helpful.

I found this demo of a modal drawer but it doesn't seem to use the published CSS and JavaScript CDNs. Demo: Modal drawer demo

How to implement a modal drawer using Material Components' CDNs?

Downvoters, please state the reason for the downvote just so I could revise the question. If it is too broad you think, I will revise the question. — Abel Callejo, Oct 10 '18 at 02:42
Have you looked at the [documentation](https://material.io/develop/web/components/drawers/)? Down voting is most likely due to the lack of effort on your part. — ikkuh, Oct 10 '18 at 07:20

benvc · Accepted Answer · 2021-09-30T14:30:59.933

It is a bit difficult to get going with MDC using unpkg bundles instead of consuming individual components via webpack. The Getting Started documentation helps a bit but it can still be difficult to translate the docs for use with various components. Trickiest part is figuring out how to instantiate the various components (because there is not a one size fits all approach). Here is a quick example of the modal drawer component using unpkg to get you going.

const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
  drawer.open = !drawer.open;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Modal Drawer Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <aside class="mdc-drawer mdc-drawer--modal">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0" aria-current="page">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#" tabindex="0">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#" tabindex="0">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </nav>
      </div>
    </aside>
    <div class="mdc-drawer-scrim"></div>
    <div class="mdc-drawer-app-content">  
      <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
        </div>
      </header> 
      <main class="mdc-top-app-bar--fixed-adjust">Content</main>
    </div>
  </body>
</html>

The `mdc` object is really almost undiscoverable. Most of the sample codes are using [JavaScript imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) like so `import {MDCDrawer} from "@material/drawer";`. Assuming that one is always using local copy of the library. The statement `const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));` makes a lot of sense only when you figured out the sub-components of the `mdc` object. I bet many will have a hard time finding it. — Abel Callejo, Oct 12 '18 at 01:02
@AbelCallejo - there is also the [Auto Init](https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init) approach that may be of use to you with the CDN, but you are right that the docs really don't do much to make it easy to use MDC without webpack. — benvc, Oct 12 '18 at 02:19
You can get rid of the dodgy-looking 4th bar in the Hamburger menu by adding a:link { text-decoration: none; } — joedotnot, Dec 11 '19 at 05:19
@joedotnot - thanks for pointing that out. There have been a couple changes to MDC since this was originally posted, so I updated the example to reflect the latest markup which eliminates the underline without adding any extra css. — benvc, Dec 11 '19 at 14:34

score 3 · Answer 2 · answered Aug 02 '21 at 10:35

The current chosen answer does not work on version v10 or higher due to a change in the codebase. In fact currently there is no "working" implementation of MDCList, which is what the drawer uses to show lists, currently you can either use mdc-evolution-list (which doesn't seem to work on CDN), or go back to the old one with mdc-evolution-deprecated. Therefore the above code snippet should actually be:

const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
  drawer.open = !drawer.open;
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Modal Drawer Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>
  
  <aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__content">
      <nav class="mdc-list">
        <a class="mdc-deprecated-list-item mdc-deprecated-list-item--activated" href="#" tabindex="0" aria-current="page">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">inbox</i>
          <span class="mdc-deprecated-list-item__text">Inbox</span>
        </a>
        <a class="mdc-deprecated-list-item" href="#" tabindex="0">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">send</i>
          <span class="mdc-deprecated-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-deprecated-list-item" href="#" tabindex="0">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">drafts</i>
          <span class="mdc-deprecated-list-item__text">Drafts</span>
        </a>
      </nav>
    </div>
  </aside>

  <div class="mdc-drawer-scrim"></div>
  
  <div class="mdc-drawer-app-content">
    
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
          <span class="mdc-top-app-bar__title">Title</span>
        </section>
      </div>
    </header>
    
    <main class="mdc-top-app-bar--fixed-adjust">
        Content
    </main>
    
  </div>

</body>

</html>

If you are using webpack or compiling SCSS yourself, you can import the new list using:

@use "@material/list/evolution-mixins"as list-evolution-mixins;
@include list-evolution-mixins.core-styles();

You can find more informations on the related Github Issue https://github.com/material-components/material-components-web/issues/7013

Material Components for the web modal drawer example using CDNs

2 Answers2

Linked