Matarialize中文社区-在 Materialize 导航条上添加搜索框

在 Materialize 导航条上添加搜索框

落叶 2024-04-14 22:51:36

145 Materialize,搜索框,导航条专栏

Materialize 是一个流行的前端框架，提供了丰富的组件和样式，用于创建现代化的用户界面。在本文中，我们将介绍如何在 Materialize 导航条上添加一个搜索框，以提供更好的用户体验。

步骤 1：准备工作

首先，确保你已经在项目中引入了 Materialize 框架的 CSS 和 JavaScript 文件。你可以通过 CDN 或者下载并引入本地文件的方式获取。下面是使用 CDN 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Navbar with Search Box</title>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>

<!-- 导航条将在这里 -->

<!-- Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

步骤 2：创建导航条

在 HTML 文件中添加导航条的结构，可以使用 Materialize 提供的 .nav-wrapper 类来创建导航条。

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <!-- 可选的导航链接 -->
    </ul>
  </div>
</nav>

步骤 3：添加搜索框

在导航条中添加一个搜索框，你可以将搜索框放置在任何位置，但一般来说，将其放置在右侧是比较常见的做法。

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <!-- 可选的导航链接 -->
    </ul>
    <form>
      <div class="input-field">
        <input id="search" type="search" required>
        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
        <i class="material-icons">close</i>
      </div>
    </form>
  </div>
</nav>

步骤 4：初始化搜索框

为了确保搜索框正常工作，我们需要在 JavaScript 中初始化搜索框。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });

  // 初始化搜索框
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>