Question

使用Material Design Lite，初步测试证明不可靠。我试图重现此处显示的演示：The first Layout Example。

它看起来像是一个带有汉堡图标的菜单标题：。但是，当我尝试在我的项目中实现这一点时，我得到标题为＆＃34; Title＆＃34;文字，但没有汉堡图标。我做错了什么？

这是我的代码：

<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link1</a>
      <a class="mdl-navigation__link" href="">Link2</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
</div>
</body>
</html>

没有明确提及菜单图标，我认为这是因为默认情况下会显示它，尽管文档在这一点上不清楚。

这是他们列出用于此演示的代码：

<style>
.demo-layout-transparent {
  background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}
</style>

<div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
</div>

Answer 1

<div class="mdl-layout__drawer-button" 
role="button" aria-expanded="false">
   <i class="material-icons">menu</i>
</div>

在这两个div mdl-layout__drawer，mdl-layout__content

之间添加此内容

无法重现Material Lite js演示：不显示汉堡图标

1 个答案: