Я пытаюсь создать ящик запрещенных веб-страниц в Material Design, используя CDN, и думаю, что у меня просто небольшая проблема с 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
Заранее спасибо!