J'essaie de créer un tiroir invisible sur le web en Material Design en utilisant le CDN et je pense qu'il ne me manque qu'un petit problème JavaScript pour que cela fonctionne.
J'ai essayé toute une série de choses dans le JavaScript, mais je n'y suis pas encore parvenu. Voici ma meilleure tentative. Je l'ai testé à partir du stockage local sur mon ordinateur, ce qui, je pense, ne fait pas de différence.
<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>Je voudrais simplement que le tiroir s'ouvre/se ferme lorsque l'on clique sur l'icône, mais j'obtiens l'erreur JavaScript suivante.
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:71Merci d'avance !
