前言
搜索框是现在几乎所有网站必备的功能之一，它方便了用户查找内容，也提高了网站的使用体验。在 Material Design 中，搜索框同样是重要的组件之一。它在 Material Design 中有一些不同的使用规范和设计样式。本文将介绍 Material Design 中的搜索框的使用和实现，帮助你更好地构建 Material Design 风格的搜索框。
使用规范
Material Design 中的搜索框使用规范主要包括以下几点：
- 搜索框应该在屏幕的顶部或中心位置；
- 搜索框的外观应该明显区分，并且包括可点击的搜索图标；
- 搜索框的文本输入应该是标准控件，可以包括清空、查找等按钮；
- 搜索框的搜索结果应该在一个中心区域显示，并且可以通过过滤和排序等方式进行调整。
设计样式
Material Design 中的搜索框有两种不同的设计风格：固定搜索框和扩展搜索框。
固定搜索框通常用于不需要过多空间的小型设备，例如手机。它通常位于屏幕顶部，保证了用户可以方便地找到它。固定搜索框的设计如下所示：
-- -------------------- ---- -------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
-- -------- --------------------- ------------------------------------------
----- --------------------------------------- ------ -------------
----------
-------- ------------------------------- -------------------------------------
---- --------------------- ------------------------------------
------ ----------- ----------------- ----------------------------- ------------------------
-- -------- --------------------- --------------------- ------------- ------------------------
------
----------
------扩展搜索框通常用于需要更多控件、更大空间的场合。它在屏幕中心显示，并且可以包括过滤和排序等功能。扩展搜索框的设计如下所示：
-- -------------------- ---- -------
-------- -----------------
---- --------------------------
---- --------------------- --------------------------
------ ----------------------------- ----------- ------------------------
---- ----------------------------
---- -------------------------------------------
---- -----------------------------------
------ -----------------------------------------
------
---- --------------------------------------------
------
---- ---------------------------------
-- --------------------- --------------------------------
---- -------------------------------------
------
------
------
----------两种不同的搜索框样式都遵循了 Material Design 中的设计规范，但在具体的使用场合中需要根据实际情况进行选择。
实现方式
实现 Material Design 中的搜索框一般包括如下几个步骤：
- 导入 Material Design 的相关组件库（例如 Material Components for the Web）；
- 根据设计样式构建 HTML 文件；
- 在 JavaScript 文件中实现搜索框的交互操作。
下面是一份基于 Material Components for the Web 的实现代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ -----------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------
-------
------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
-- -------- --------------------- ------------------------------------------
----- --------------------------------------- ------ -------------
----------
-------- ------------------------------- -------------------------------------
---- --------------------- ------------------------------------
------ ----------- ----------------- ----------------------------- ------------------------
-- -------- --------------------- --------------------- ------------- ------------------------
------
----------
------
---------
----- --------------------------
-------- -----------------
---- --------------------------
---- --------------------- --------------------------
------ ----------------------------- ----------- ------------------------
---- ----------------------------
---- -------------------------------------------
---- -----------------------------------
------ -----------------------------------------
------
---- --------------------------------------------
------
---- ---------------------------------
-- --------------------- --------------------------------
---- -------------------------------------
------
------
------
----------
-------
------- ----------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
--------
----- ---------------- - -------------------------------------------
----- --------- - --- ---------------------------------------------
----- ---------------- - ------------------------------------------
----- --------- - --- ---------------------------------------------
---------
-------
-------在 JavaScript 文件中，我们添加了两个 Material Design 组件：top app bar 和 text field。这两个组件都需要使用 MDCTopAppBar 和 MDCTextField 类进行初始化。
总结
搜索框是现代网站中必不可少的组件之一，而 Material Design 中的搜索框则具有独特的设计风格和使用规范。在使用 Material Design 中的搜索框时，我们需要遵循设计规范，并根据实际场景选择不同的样式。在实现时，我们需要导入 Material Design 的相关组件库，并根据示例代码进行实现。希望本文能对你在使用 Material Design 中的搜索框时提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e32ccbf6b2d6eab3e91d7f