Question

我重做了我的电子商务网站的前端代码w / 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 &copy;</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>

我想这太过分了，我不得不说，没有其他人拥有与我相同的代码，因此类似的问题也无法解决我的特定代码。谢谢

Google的可解雇抽屉不起作用（材料设计）

0 个答案: