Material Design 是一种设计语言，由 Google 在 2014 年推出，旨在帮助开发人员创建美观、直观和易于使用的应用程序。搜索框是许多应用程序中常见的功能，本文将介绍如何使用 Material Design 实现搜索框的功能。
前置条件
在开始本文之前，您需要了解以下内容：
- HTML 和 CSS
- JavaScript
- Material Design
实现搜索框
步骤 1：创建 HTML 结构
首先，我们需要创建一个 HTML 结构来容纳搜索框和搜索按钮。以下是一个基本的 HTML 结构：
<div class="search-container"> <input type="text" placeholder="搜索..."> <button type="submit"><i class="fa fa-search"></i></button> </div>
在这个结构中，我们创建了一个包含输入框和搜索按钮的容器。placeholder 属性设置了输入框内的默认文本，<i> 标签包含了一个搜索图标，我们将在 CSS 中添加样式。
步骤 2：添加样式
接下来，我们需要使用 CSS 样式来添加 Material Design 效果。以下是一个基本的 CSS 样式：
-- -------------------- ---- ------- ----------------- - -------- ----- ------------ ------- ------ ----- ---------- ------ ------- ----- ----------------- ----- -------------- ----- ----------- --- --- --- ------- -- -- ------ --------- ------- - ----------------- ------------------ - ----- -- ------- ----- -------- - ----- ---------- ----- ------- ----- -------- ----- - ----------------- --------------------- - ------ ----- ------- ----- ----------------- -------- ------ ----- ------- ----- -------- ----- ------- -------- - ----------------- --------------------- - - ---------- ----- -
在这个样式中，我们使用了 display: flex 属性来使容器内的元素水平排列，并使用了 align-items: center 属性使它们垂直居中。width 和 max-width 属性设置了容器的宽度，height 属性设置了容器的高度。background-color 属性设置了容器的背景色，border-radius 属性设置了容器的圆角。box-shadow 属性添加了一个阴影效果，使容器看起来更立体。
输入框的样式使用了 flex: 1 属性使其占据剩余的空间，并使用了 padding 属性添加内边距。font-size 属性设置了文本的大小，border 和 outline 属性将边框和轮廓设置为无。搜索按钮的样式设置了宽度、高度、背景色和文本颜色，并使用 cursor: pointer 属性将鼠标指针设置为手形。
步骤 3：添加 JavaScript 代码
最后，我们需要添加一些 JavaScript 代码来处理搜索框的功能。以下是一个基本的 JavaScript 代码：
-- -------------------- ---- -------
----- ----------- - ----------------------------------------- ---------------------
----- ------------ - ----------------------------------------- ------------------------
-------------------------------------- ---------- -
----- ---------- - -------------------------
-- ----------- --- --- -
-------------------- - ------------------------------------------------
-
---在这个代码中，我们使用 querySelector 方法获取输入框和搜索按钮的引用。然后，我们添加了一个点击事件监听器，当用户点击搜索按钮时，我们获取输入框的值，并使用 trim 方法去掉前导和尾随空格。如果搜索词不为空，则将用户重定向到 Google 搜索结果页面。
示例代码
以下是完整的 HTML、CSS 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
----------------- -
-------- -----
------------ -------
------ -----
---------- ------
------- -----
----------------- -----
-------------- -----
----------- --- --- --- ------- -- -- ------
--------- -------
-
----------------- ------------------ -
----- --
------- -----
-------- - -----
---------- -----
------- -----
-------- -----
-
----------------- --------------------- -
------ -----
------- -----
----------------- --------
------ -----
------- -----
-------- -----
------- --------
-
----------------- --------------------- - -
---------- -----
-
--------
-------
------
---- -------------------------
------ ----------- --------------------
------- ---------------- --------- ------------------------
------
--------
----- ----------- - ----------------------------------------- ---------------------
----- ------------ - ----------------------------------------- ------------------------
-------------------------------------- ---------- -
----- ---------- - -------------------------
-- ----------- --- --- -
-------------------- - ------------------------------------------------
-
---
---------
-------
-------结论
在本文中，我们介绍了如何使用 Material Design 实现搜索框的功能。我们创建了一个 HTML 结构来容纳搜索框和搜索按钮，并使用 CSS 样式添加了 Material Design 效果。最后，我们使用 JavaScript 代码处理搜索框的功能。这个示例代码可以帮助您了解如何使用 Material Design 在您的应用程序中实现搜索框的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675636903af3f99efe592c89