我正在尝试利用 CDN 在 Material Design 中创建一个 web dismissible drawer，我认为我只是一个小的 JavaScript 问题，它无法正常工作。
我在 JavaScript 中尝试了很多东西，但还不够。以下是我最好的尝试。我刚刚从我的计算机上的本地存储中对此进行了测试，我认为这没有什么不同。
<head>
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
</style>
</head>
<body>
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
<div class="mdc-drawer__content">
<div 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>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
App Content
</main>
</div>
</body>
<script>
/* SUGGESTED JAVASCRIPT
import {MDCTopAppBar} from "@material/top-app-bar";
const topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));
topAppBar.setScrollTarget(document.getElementById('main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
*/
// my best guess so far
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
topAppBar.setScrollTarget(document.getElementById('main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
mdc.drawer.open = !drawer.open;
});
</script>
我只想在单击图标时打开/关闭抽屉，但出现以下 JavaScript 错误。
test1.html:90 Uncaught ReferenceError: drawer is not defined
at HTMLElement.<anonymous> (test1.html:90)
at e.t.emit (component.ts:119)
at Object.notifyNavigationIconClicked (component.ts:118)
at e.handleNavigationClick (foundation.ts:71)
(anonymous) @ test1.html:90
t.emit @ component.ts:119
notifyNavigationIconClicked @ component.ts:118
e.handleNavigationClick @ foundation.ts:71
提前致谢!
最佳答案
搞清楚了，更正后的 Javascript 如下。缺少一行。
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
topAppBar.setScrollTarget(document.getElementById('main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
关于javascript - 如何使用 CDN 创建 Dismissible Web Drawer？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56938621/