Material Components for the web modal drawer example using CDNs

问题

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?

回答1:

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="#" 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="#">
          <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="#">
          <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>

来源：https://stackoverflow.com/questions/52731777/material-components-for-the-web-modal-drawer-example-using-cdns

标签

javascript

html

material-design

material-components

material-components-web