Material Design 中的 Bottom Sheet（底部工具条）是许多 Android 应用程序中常用的 UI 组件。它可以在应用程序窗口的底部显示一个不同高度的卡片，以显示与应用程序上下文相关的可选菜单或其他内容。本文将向您展示如何使用 HTML、CSS 和 JavaScript 制作 Material Design 中的 Bottom Sheet。
前置要求
- HTML 基础知识
- CSS 基础知识
- JavaScript 基础知识
- 了解 Material Design
创建 HTML 结构
首先，您需要创建一个基本的 HTML 结构，作为 Bottom Sheet 的容器。下面是示例代码：
-- -------------------- ---- -------
---- ---------------------
---- ----------------------------
-----------
------- -----------------------------
------
---- -----------------------------
---- ------ ------- ---
------
------在上面的代码中，我们使用一个 div 标签作为 Bottom Sheet 的容器，并使用两个 div 标签作为 Bottom Sheet 的头部和内容区域。头部包含一个标题和一个关闭按钮，内容区域可以添加您需要的内容。
编写 CSS 样式
接下来，需要应用 CSS 样式，以使 Bottom Sheet 显示正确。我们将为 Bottom Sheet 容器、头部、标题、关闭按钮和内容区域添加样式。下面是样式示例代码：
-- -------------------- ---- ------- ------------- - --------- ------ ----- -- ------- -- ------ ----- ------- -- --------- ------- ----------------- -------- ----------- --- ---- --- ------- -- -- ----- ----------- ------ ---- ----------------- ---- ---- --- - ------------------ - ------- ----- - -------------------- - -------- ----- ---------------- -------------- ------------ ------- -------- ----- -------------- --- ----- -------- - -------------------- -- - ------- -- ---------- ----- - -------------------- ---------- - ------- ----- ----------- ----- ---------- ----- - --------------------- - -------- ----- -
在上面的代码中，我们设置 Bottom Sheet 容器的位置为 fixed，使它固定在屏幕底部。我们还根据需要设置容器的大小、颜色、阴影和过渡效果。好的过渡效果能使您的 Bottom Sheet 在打开和关闭时更为平滑。
此外，我们使用 .bottom-sheet.open 类来控制 Bottom Sheet 的打开和关闭状态，并使用 height 属性来设置 Bottom Sheet 的高度。我们还为 Bottom Sheet 的头部和内容添加样式，以使它们呈现 Material Design 风格。
编写 JavaScript 代码
最后，我们需要编写 JavaScript 代码，以使 Bottom Sheet 点击时被打开和关闭。我们将使用以下三种方法来控制 Bottom Sheet 的打开和关闭：
handleOpen()：当用户点击 Bottom Sheet 的标签时，此方法将被调用。它会将 Bottom Sheet 的主要元素集体添加.open类，这样它就会显示在屏幕上。handleClose()：当用户点击 Bottom Sheet 的关闭按钮时，此方法将被调用。它会将 Bottom Sheet 的主要元素集体移除.open类，这样它就会消失。handleOutsideClick()：当用户点击 Bottom Sheet 以外的任何地方时，此方法将被调用。如果 Bottom Sheet 正处于打开状态，则会自动关闭它。
下面是示例代码：
-- -------------------- ---- -------
----- ----------- - ----------------------------------------
----- ----------------- - -----------------------------------------------
----- -------- - -------------------------------------
-------- ------------ -
----------------------------------
-
-------- ------------- -
-------------------------------------
-
-------- --------------------- -
-- --------------------------------- -
--------------
-
-
------------------------------------------- ------------
---------------------------------- -------------
---------------------------------- --------------------在上面的代码中，我们使用 querySelector() 方法选择 Bottom Sheet 的元素，然后使用 addEventListener() 方法将事件处理程序绑定到 Bottom Sheet 的头部和关闭按钮。我们还使用 document 对象绑定 click 事件，以便在用户点击 Bottom Sheet 以外的任何地方时关闭它。
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------- -------------
-------
------------- -
--------- ------
----- --
------- --
------ -----
------- --
--------- -------
----------------- --------
----------- --- ---- --- ------- -- -- -----
----------- ------ ---- ----------------- ---- ---- ---
-
------------------ -
------- -----
-
-------------------- -
-------- -----
---------------- --------------
------------ -------
-------- -----
-------------- --- ----- --------
-
-------------------- -- -
------- --
---------- -----
-
-------------------- ---------- -
------- -----
----------- -----
---------- -----
-
--------------------- -
-------- -----
-
--------
-------
------
---- ---------------------
---- ----------------------------
-----------
------- -----------------------------
------
---- -----------------------------
-----------------
------
------
--------
----- ----------- - ----------------------------------------
----- ----------------- - -----------------------------------------------
----- -------- - -------------------------------------
-------- ------------ -
----------------------------------
-
-------- ------------- -
-------------------------------------
-
-------- --------------------- -
-- --------------------------------- -
--------------
-
-
------------------------------------------- ------------
---------------------------------- -------------
---------------------------------- --------------------
---------
-------
-------总结
通过本文，您已经了解了如何制作 Material Design 中的 Bottom Sheet。在 HTML 和 CSS 中，您创建了一个底部工具条的最基本结构和样式，并使用 JavaScript 控制 Bottom Sheet 的打开和关闭。这是一个非常适合用于 Android 应用和其他 Web 应用程序的 UI 组件。通过使用此方法，您可以轻松创建 Material Design 的 Bottom Sheet，并为您的应用程序增添更多的互动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481e9c648841e989415c137