如何在 Material Design 中使用进度条

Material Design 是 Google 设计的一套视觉设计语言，它在设计风格上以纯净、简洁、平面化为主要特点，同时也注重动效和交互设计。在 Material Design 中，进度条是一种非常重要的 UI 元素，它可以用来展示任务的完成进度，提高用户体验。本文将介绍如何在 Material Design 中使用进度条。

进度条的基本使用

Material Design 中的进度条可以分为线性进度条和循环进度条两种类型。线性进度条通常用于展示任务的完成进度，循环进度条则用于展示正在进行的任务，如下图所示：

在 HTML 中，我们可以使用 <div> 元素来创建一个进度条，然后使用 CSS 来设置它的样式，如下所示：

---- ----------------------------
  ---- ---------------------------------------
  ---- ------------------------------- -------------------------------------------
  ---- ------------------------------- -------------------------------------------
------

在上面的代码中，我们使用了 Material Components for Web（简称 MDC Web）提供的 CSS 类 mdc-linear-progress 来创建一个线性进度条。进度条的样式由三个子元素组成：.mdc-linear-progress__bar 用于展示进度，.mdc-linear-progress__bar--buffering 用于展示缓冲进度，.mdc-linear-progress__bar--auxiliary 用于展示辅助进度。我们可以通过给这些子元素设置不同的样式来实现不同的进度条效果。

在 JavaScript 中，我们可以使用 MDC Web 提供的 MDCLinearProgress 类来操作进度条，如下所示：

----- -------------- - --- -------------------------------------------------------------------------------------
-------------------------- - -----
----------------------- - ----

在上面的代码中，我们首先使用 document.querySelector 方法获取到进度条元素，然后使用 MDCLinearProgress 类创建一个进度条实例。我们可以通过设置 determinate 属性来控制进度条的类型，如果设置为 true，则表示线性进度条，否则表示循环进度条。我们还可以通过设置 progress 属性来控制进度条的进度，它的取值范围为 0 到 1。

进度条的高级使用

除了基本使用外，进度条还有很多高级用法，下面我们就来介绍一些常用的技巧。

自定义颜色

在 Material Design 中，进度条的颜色通常是根据主题色自动生成的，但是我们也可以自定义颜色。如果我们想要自定义进度条的颜色，可以通过设置 CSS 变量来实现，如下所示：

----- -
  -------------------- --------
  ----------------------------------- --------
  -------------------------------------- --------
-

------------------------- -
  ----------------- -------------------------
-

------------------------------------ -
  ----------------- ----------------------------------------
-

------------------------------------ -
  ----------------- -------------------------------------------
-

在上面的代码中，我们使用 CSS 变量 --mdc-theme-primary 来设置主题色，然后使用 --mdc-linear-progress-buffer-color 和 --mdc-linear-progress-auxiliary-color 来设置缓冲进度和辅助进度的颜色。最后，我们通过设置 .mdc-linear-progress__bar、.mdc-linear-progress__bar--buffering 和 .mdc-linear-progress__bar--auxiliary 的 background-color 属性来设置进度条的颜色。

自定义进度条高度

在 Material Design 中，进度条的高度通常是 4px，但是我们也可以自定义进度条的高度。如果我们想要自定义进度条的高度，可以通过设置 CSS 变量来实现，如下所示：

----- -
  ----------------------------- ----
-

-------------------- -
  ------- ----------------------------------
-

------------------------- -
  ------- ----------------------------------
-

在上面的代码中，我们使用 CSS 变量 --mdc-linear-progress-height 来设置进度条的高度，然后通过设置 .mdc-linear-progress 和 .mdc-linear-progress__bar 的 height 属性来实现。

自定义进度条形状

在 Material Design 中，进度条的形状通常是圆角矩形，但是我们也可以自定义进度条的形状。如果我们想要自定义进度条的形状，可以通过设置 CSS 变量来实现，如下所示：

----- -
  ----------------------------- -----
-

------------------------- -
  -------------- ----------------------------------
-

在上面的代码中，我们使用 CSS 变量 --mdc-linear-progress-radius 来设置进度条的圆角半径，然后通过设置 .mdc-linear-progress__bar 的 border-radius 属性来实现。

示例代码

下面是一个完整的示例代码，包括自定义颜色、自定义高度和自定义形状：

--------- -----
------
  ------
    ----- ----------------
    --------------- ------ -------------
    ----- ---------------- ---------------------------------------------------------------
    ----- ---------------- -----------------------------------------------------------------------------------------------------
    -------
      ----- -
        -------------------- --------
        ----------------------------------- --------
        -------------------------------------- --------
        ----------------------------- ----
        ----------------------------- -----
      -

      -------------------- -
        ------- ----------------------------------
      -

      ------------------------- -
        ----------------- -------------------------
        ------- ----------------------------------
        -------------- ----------------------------------
      -

      ------------------------------------ -
        ----------------- ----------------------------------------
        -------------- ----------------------------------
      -

      ------------------------------------ -
        ----------------- -------------------------------------------
        -------------- ----------------------------------
      -
    --------
  -------
  ------
    ---- ----------------------------
      ---- ---------------------------------------
      ---- ------------------------------- -------------------------------------------
      ---- ------------------------------- -------------------------------------------
    ------
    ------- ------------------------------------------------------------------------------------------------------------
    --------
      ----- -------------- - --- -------------------------------------------------------------------------------------
      -------------------------- - -----
      ----------------------- - ----
    ---------
  -------
-------

总结

本文介绍了如何在 Material Design 中使用进度条，包括进度条的基本使用、自定义颜色、自定义高度和自定义形状。希望本文能够帮助读者更好地使用进度条，提高用户体验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fbc403d10417a2227557be

阅读全文

猜你喜欢

  • 前端实现 Server-Sent Events 的方法

    什么是 Server-Sent Events Server-Sent Events (SSE) 是一种服务器向客户端发送实时事件流的技术。与 WebSocket 相比，SSE 只能从服务器向客户端发送...

    7 个月前
  • 使用 Hapi 框架开发应用时遇到跨域问题如何解决

    跨域问题简介 在 Web 开发中，由于浏览器的同源策略限制，当一个网页的 JavaScript 代码试图访问另一个域名下的资源时，浏览器会阻止该请求。这就是跨域问题，常见的跨域场景包括： 在前端代码...

    7 个月前
  • ECMAScript 2020: 如何在多个源文件中设置活动模块？

    在现代前端开发中，使用模块化开发已经成为一种标准的做法。在 ECMAScript 2020 中，我们可以使用活动模块来更加优雅地管理多个源文件的模块化。 什么是活动模块？ 活动模块是 ECMAScri...

    7 个月前
  • 如何在 Node.js 中处理 JSONP 请求

    JSONP（JSON with Padding）是一种跨域数据请求方式，通常用于前端与第三方 API 交互。与 Ajax 不同的是，JSONP 不受跨域限制，它通过在请求中添加一个回调函数名来实现数据...

    7 个月前
  • MongoDB 在 Kubernetes 容器中的部署指南

    前言 Kubernetes 是目前最流行的容器编排工具之一，而 MongoDB 是一种流行的 NoSQL 数据库。将 MongoDB 部署到 Kubernetes 中可以提供更好的可伸缩性和高可用性。

    7 个月前
  • C++ 性能优化技巧总结

    C++ 是一门广泛使用的高性能编程语言，但是由于其底层的特性，如果不注意优化，程序的性能很容易受到影响。本文将总结一些 C++ 中常用的性能优化技巧，以帮助读者写出更高效的代码。

    7 个月前
  • Chai 的断言过程中 chai.Assertion 中的 this 指针问题

    在前端开发中，我们经常需要进行断言测试，以确保代码的正确性和稳定性。Chai 是一个流行的断言库，它提供了丰富的语法和灵活的配置选项，可以帮助我们更方便地编写和管理断言。

    7 个月前
  • 在 React 中使用测试工具 Enzyme

    在 React 中使用测试工具 Enzyme 可以帮助我们更好地进行组件测试。Enzyme 是一个由 Airbnb 开源的 React 测试工具，它可以模拟组件的渲染和交互，还可以方便地检测组件的状态...

    7 个月前
  • AngularJS 之 $resource 用法

    AngularJS 是一款流行的前端框架，它提供了许多强大的工具来简化前端开发。其中之一就是 $resource，它是一个 AngularJS 内置的服务，用于处理 RESTful API 请求。

    7 个月前
  • Mongoose 中虚拟属性的实际应用

    Mongoose 是一个 Node.js 下的 MongoDB 驱动程序，它提供了一种简单、基于模式的解决方案，用于在 Node.js 应用程序中管理 MongoDB 数据库。

    7 个月前
  • Vue.js 中如何使用 Vue Router 进行路由守卫的实现

    在 Vue.js 中使用 Vue Router 进行路由守卫的实现可以帮助我们控制路由的访问权限，从而保证网站的安全性和用户体验。Vue Router 提供了多种路由守卫的方法，本文将详细介绍这些方法...

    7 个月前
  • PM2 部署全流程：如何在全流程中使用 PM2 管理工具？

    PM2 是一个流行的 Node.js 进程管理器，它可以帮助我们简化部署和管理 Node.js 应用的流程。在本文中，我们将介绍如何在全流程中使用 PM2 管理工具，并提供详细的学习和指导意义。

    7 个月前
  • TypeScript 中实现自定义方法 Array.isArray()

    在前端开发中，我们常常需要对数组进行判断，判断其是否为数组类型。而在 TypeScript 中，我们可以通过自定义方法来实现这一功能。本文将介绍如何在 TypeScript 中实现自定义方法 Arra...

    7 个月前
  • ECMAScript 2018 中的 RegExp Lookbehind 断言的使用技巧

    ECMAScript 2018 中的 RegExp Lookbehind 断言的使用技巧 在 JavaScript 中，正则表达式是一种非常强大的工具，它可以用于字符串的匹配、替换、分割等操作。

    7 个月前
  • 在 Redis 中如何存储复杂数据类型并高效地查询

    Redis 是一种高性能的键值存储数据库，它提供了多种数据类型，包括字符串、哈希、列表、集合、有序集合等。这些数据类型可以用来存储不同的数据结构，但是有时候我们需要存储更加复杂的数据类型，比如对象、数...

    7 个月前
  • Redux 单元测试中常见问题及解决方案

    Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它可以帮助开发人员管理应用程序的状态，并使状态更加可预测和易于维护。在 Redux 开发过程中，单元测试是一个非常重要的环节，它...

    7 个月前
  • 利用 Next.js 实现数据缓存的方法

    在前端开发中，我们经常需要从服务器获取数据并展示在页面上。但是每次都从服务器获取数据会增加服务器的负担，并且会导致页面加载速度变慢。为了解决这个问题，我们可以利用 Next.js 实现数据缓存，减轻服...

    7 个月前
  • 在 CSS Grid 中使用 repeat() 函数的最佳实践

    在现代 Web 开发中，CSS Grid 已经成为了一种非常流行的布局方式。其中，repeat() 函数是一种非常有用的函数，可以帮助我们简化 CSS Grid 的代码，并且提高代码的可读性和维护性。

    7 个月前
  • 无障碍设计：如何处理表格结构无法被屏幕阅读器正确读取的问题

    在前端开发中，我们经常需要使用表格来展示数据，但是对于视力障碍者来说，表格结构可能无法被屏幕阅读器正确读取，这会导致视力障碍者无法获取表格中的信息。因此，无障碍设计对于网站的可访问性来说是非常重要的。

    7 个月前
  • 使用 Material Design 构建更好的 UI 体验

    Material Design 是 Google 推出的一种设计语言，旨在提供一种简单、直观、美观的 UI 设计体验，可以应用于各种平台和设备。在前端开发中，我们可以使用 Material Desig...

    7 个月前

相关推荐

    暂无文章