Material Design 中 Bottom Sheet 的制作方法

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

阅读全文

猜你喜欢

  • SASS 中如何使用 @import 避免 CSS 重复代码

    在前端开发中，CSS 是必不可少的技术。不可避免的情况是，开发者在编写 CSS 时，会有大量的重复代码出现。这些重复的代码既浪费了开发时间，也增加了维护成本。因此，如何使用 SASS 中的 @impo...

    1 年前
  • 如何使用 Koa2 实现 OAuth2 认证与鉴权

    OAuth2 是一种授权协议，可以让用户授权第三方应用访问他们的资源，如照片，联系人列表等。在前端开发中，OAuth2 主要用于用户认证和授权，以保护应用程序的资源。

    1 年前
  • 如何解决 LESS 编译报错问题

    在前端开发中，LESS 是一种非常常见的 CSS 预处理器，但是在使用的过程中，我们经常会遇到 LESS 编译报错的情况。本文将为大家介绍如何解决 LESS 编译报错的问题。

    1 年前
  • CSS Grid 如何实现悬浮广告布局？

    在网页设计中，悬浮广告是一种常见的广告形式，其特点是浮动在网页的某个位置，并且可以随着页面滚动而移动，从而吸引用户的注意力。那么在前端实现悬浮广告布局，我们可以使用 CSS Grid 网格布局来实现。

    1 年前
  • Socket.io 如何解决跨域问题？

    在 Web 开发中，跨域问题一直是一个比较常见的问题，前端开发中常常需要和服务端进行数据的传输和交互。在传统的 Ajax 方式下，如果服务端开启了跨域访问限制，前端就会受到限制无法访问服务端数据，这时...

    1 年前
  • 如何实现 RESTful API 的服务监控

    当我们开发了一个 RESTful API 后，如何监控其稳定性成了一个重要的问题。本文将介绍如何使用 Node.js 和一些其他工具来实现 RESTful API 的服务监控。

    1 年前
  • # ES8 中的 Regular Expression 构造函数

    ES8 中的 Regular Expression 构造函数 在 ES6 中，JavaScript 新增了许多与正则表达式相关的功能，之后在 ES8 中又新增了 Regular Expression ...

    1 年前
  • Mongoose 中如何处理异步操作？

    Mongoose 是针对 Node.js 的优秀的 MongoDB 驱动程序库，它可以使开发者更加容易地操作 MongoDB 数据库。然而，由于 MongoDB 是异步的，因此在使用 Mongoose...

    1 年前
  • Performance Optimization：使用 Chrome DevTools 分析 App 性能

    前言 互联网技术的快速发展和普及，让我们从过去局限于简单 HTML 和 CSS 网页的静态浏览，到了如今基于现代化技术的互联网应用，以及通过 WebView、Hybrid App 全新的交互模式，这些...

    1 年前
  • Custom Elements 如何实现表单验证

    在现代 web 应用开发中，表单是不可避免的一个组件。而表单验证是保证数据安全性和用户体验的重要步骤。传统的表单验证方式，使用 JavaScript 逐一对表单项进行验证，但这种方式不仅效率低下，而且...

    1 年前
  • 使用 Mocha 测试时，如何测试异步的代码？

    在前端开发中，需要对异步代码进行测试以确保其正确性和可靠性。而 Mocha 是一款流行的 JavaScript 测试框架，可以帮助我们对异步代码进行测试。本文将介绍如何使用 Mocha 测试异步的代码...

    1 年前
  • PWA 中如何实现多 Tab 之间的会话共享

    前言 在日常的网页浏览中，我们往往会打开多个网页标签页，每个标签页相当于一个独立的浏览器会话。而对于 Progressive Web App（PWA）来说，一旦被添加到主屏幕上，它的标签页就相当于应用...

    1 年前
  • 了解 TypeScript 中循环引用的处理方式

    循环引用是在程序开发中经常会遇到的问题，特别是在使用面向对象编程的时候。在 TypeScript 中，循环引用也是一个很容易遇到的问题。本文将会介绍 TypeScript 中循环引用的处理方式并提供示...

    1 年前
  • JavaScript ES2019 语法新特性

    JavaScript 是一门动态类型的编程语言，由于其灵活性与易学性，在全球范围内得到了广泛应用。近年来，随着 JavaScript 库与框架的激增以及其他编程语言特性的不断借鉴，JavaScript...

    1 年前
  • 理解 Redux 的核心思想和架构模式

    引言 Redux 是一个流行的 JavaScript 应用程序状态管理库，它被广泛地应用于前端领域。如果你是一个前端开发者，你不应该忽略它。 本文将解释 Redux 的核心思想和架构模式，同时提供详细...

    1 年前
  • 深入 Promise 理解：Promise.resolve() 和 Promise.reject()

    前端开发中，异步操作是十分常见的，而 Promise 作为异步编程的重要手段，常常被用于多个场景中。然而在使用 Promise 进行异步编程时，Promise.resolve() 和 Promise....

    1 年前
  • Kubernetes Ingress 路由实现详解

    前言 Kubernetes 是一个广受欢迎的容器编排工具，在微服务架构中拥有广泛的应用。然而，随着服务数量的增加，如何在集群内实现服务的访问控制和流量路由成为了一项难题。

    1 年前
  • ESLint 规则集详解

    ESLint 是一款 JavaScript 代码检查工具，其目的在于检查代码的可读性、可维护性、错误检查等，以使代码保持高质量。ESLint 由 Nicholas C. Zakas 于 2013 年创...

    1 年前
  • Hapi.js 的 H2O2 插件：如何使用代理转发请求

    在开发过程中，有时候我们需要通过代理将前端页面发起的请求转发到后端接口，以达到跨域等目的。Hapi.js 提供了 H2O2 插件，可以轻松实现代理转发请求的功能。 H2O2 的介绍 H2O2 是 Ha...

    1 年前
  • 使用 ES11 中的 import.meta 对象

    在 ES11 中，引入了一个新的特性——import.meta 对象，它可以用于获取模块相关的元数据。这对于前端开发非常有用，因为在模块化开发过程中，我们需要获取模块信息来进行一些处理。

    1 年前

相关推荐

    暂无文章