Я переделываю код интерфейса моего сайта электронной коммерции с Material Design и начинаю с отклоняемого ящика и верхней навигации. У меня верхняя навигация работает нормально, но ящик не отображается сам. Любая помощь будет хорошей и высоко ценится.
Я думаю, что мне не хватает JS или неправильно импортирует что-то в CSS, но я следовал инструкциям на Google в меру своих возможностей. Документы (https://material.io/develop/web/components/drawers/) не оговаривали, что мы, как разработчики, должны подключать кнопки для события, поэтому я действительно запутался в том, как он выглядит без привязки к событиям. Код выглядит следующим образом .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
<style>
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
</style>
<title>New Front-End</title>
</head>
<body class="mdc-typography">
<div id="root">
<div class="drawer-frame-root">
<aside class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">Menu
</h3>
<h6 class="mdc-drawer__subtitle">SIGN IN
</h6>
</div>
<div class="mdc-drawer__content">
<nav 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>
</nav>
</div>
</aside>
<div class="mdc-drawer-app-content">
<div class="top-app-bar__frame"> <!-- TOP APP BAR-->
<div class="demo-frame">
<header class="mdc-top-app-bar mdc-top-app-bar--dense
drawer-top-app-bar" style="top: 0px;">
<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-ripple-upgraded--unbounded mdc-ripple-upgraded" style="--mdc-ripple-fg-size:28px;
--mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">
menu
</button>
<span class="mdc-top-app-bar__title">Hello World ©</span>
<span>
<i class="fas fa-shopping-cart fa-2x text-white" style="margin-left:12px"></i><span class="badge badge-success" style="font-size:100%;line-height:14px;margin-right:4px"><!--?php echo sizeOf($_SESSION['cart']); ?--></span>
</span>
</section>
<section class="mdc-top-app-bar__section
mdc-top=app-bar__section--align-start">
</section>
</div>
</header>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!---Latest Awesome Font Library-->
<script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
<script type="text/javascript">
import {MDCDrawer} from "@material/drawer";
const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
</script>
</html>
Я предполагаю, что это ЗАДЕРЖКА, я должен сказать, что ни у кого больше нет такого кода, как у меня, поэтому подобные вопросы не решат мой конкретный код. Thanx