时间戳

首页 > 解决方案 > 使用 CDN 的 Web 模态抽屉示例的材料组件

javascript - 使用 CDN 的 Web 模态抽屉示例的材料组件

问题描述

使用 Web CDN的 Material Components 进行前端设计的示例并没有多大帮助。

我找到了这个模态抽屉的演示，但它似乎没有使用已发布的 CSS 和 JavaScript CDN。 演示：模态抽屉演示

如何使用 Material Components 的 CDN 实现模态抽屉？

标签： javascripthtmlmaterial-designmaterial-componentsmaterial-components-web

解决方案

使用 unpkg 包而不是通过 webpack 使用单个组件来使用 MDC 有点困难。入门文档有点帮助，但翻译文档以与各种组件一起使用仍然很困难。最棘手的部分是弄清楚如何实例化各种组件（因为没有一种万能的方法）。这是一个使用 unpkg 来帮助您开始的模态抽屉组件的快速示例。

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>

推荐阅读