使用 Material Components for Web CDNs 进行前端设计的示例没有多大帮助。
我找到了这个模态抽屉的演示，但它似乎没有使用已发布的 CSS 和 JavaScript CDN。 演示：Modal drawer demo
如何使用 Material Components 的 CDN 实现模态抽屉？
【问题讨论】：
标签： javascript html material-design material-components material-components-web
使用 unpkg 包而不是通过 webpack 使用单个组件来使用 MDC 有点困难。 Getting Started documentation 有点帮助，但翻译文档以与各种组件一起使用仍然很困难。最棘手的部分是弄清楚如何实例化各种组件（因为没有一种万能的方法）。这是modal drawer component 使用 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>【讨论】：
mdc 对象实际上几乎无法被发现。大多数示例代码都使用JavaScript imports，就像import {MDCDrawer} from "@material/drawer";。假设一个总是使用库的本地副本。仅当您弄清楚 mdc 对象的子组件时，声明 const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer')); 才有意义。我敢打赌，很多人都很难找到它。
由于代码库的更改，当前选择的答案不适用于 v10 或更高版本。事实上，目前没有 MDCList 的“工作”实现，这是抽屉用来显示列表的东西，目前您可以使用 mdc-evolution-list（这似乎不适用于 CDN），或者返回不推荐使用 mdc-evolution-deprecated 的旧版本。因此上面的代码 sn-p 实际上应该是：
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>如果你正在使用 webpack 或自己编译 SCSS，你可以使用以下命令导入新列表：
@use "@material/list/evolution-mixins"as list-evolution-mixins;
@include list-evolution-mixins.core-styles();
你可以在相关的 Github Issue https://github.com/material-components/material-components-web/issues/7013找到更多信息
【讨论】：