Material 使用 CDN 的 Web 模态抽屉组件示例
Material Components for the web modal drawer example using CDNs
使用 Material Components for Web CDNs 进行前端设计的示例没有多大帮助。
我找到了模态抽屉的这个演示，但它似乎没有使用已发布的 CSS 和 JavaScript CDN。
演示：Modal drawer demo
如何使用 Material 组件的 CDN 实现模态抽屉？
使用 unpkg 包而不是通过 webpack 使用单个组件来开始使用 MDC 有点困难。 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 使用 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>
由于代码库发生变化，当前选择的答案不适用于 v10 或更高版本。事实上，目前没有 MDCList 的“工作”实现，这是抽屉用来显示列表的，目前你可以使用 mdc-evolution-list（它似乎在 CDN 上不起作用），或者回到旧的 mdc-evolution-deprecated。因此上面的代码片段实际上应该是：
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 问题上找到更多信息 https://github.com/material-components/material-components-web/issues/7013
使用 Material Components for Web CDNs 进行前端设计的示例没有多大帮助。
我找到了模态抽屉的这个演示，但它似乎没有使用已发布的 CSS 和 JavaScript CDN。 演示：Modal drawer demo
如何使用 Material 组件的 CDN 实现模态抽屉？
使用 unpkg 包而不是通过 webpack 使用单个组件来开始使用 MDC 有点困难。 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 使用 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>
由于代码库发生变化，当前选择的答案不适用于 v10 或更高版本。事实上，目前没有 MDCList 的“工作”实现，这是抽屉用来显示列表的，目前你可以使用 mdc-evolution-list（它似乎在 CDN 上不起作用），或者回到旧的 mdc-evolution-deprecated。因此上面的代码片段实际上应该是：
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 问题上找到更多信息 https://github.com/material-components/material-components-web/issues/7013