Material Design 下进度条 Progressbar 的自定义设置方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，进度条是一个常见的组件。Material Design 是一种流行的设计风格，它提供了一套进度条组件 Progressbar，可以方便地应用到网站或应用中。在本文中，我们将介绍如何使用 Material Design 的 Progressbar 组件，并且讲解如何根据实际需求进行自定义设置。

Material Design Progressbar 组件的基本用法

在 HTML 中，使用 Material Design Progressbar 组件的基本方法如下：

<div class="mdc-linear-progress" role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

其中，mdc-linear-progress 是进度条的容器，mdc-linear-progress__bar 是进度条的条形元素，mdc-linear-progress__primary-bar 和 mdc-linear-progress__secondary-bar 分别表示主要和次要进度条。aria-valuemin、aria-valuemax 和 aria-valuenow 是辅助性的属性，用于指定进度条的最小值、最大值和当前值。

在 JavaScript 中，可以使用 MDC Web 库来初始化进度条：

import { MDCLinearProgress } from '@material/linear-progress';

const linearProgress = new MDCLinearProgress(document.querySelector('.mdc-linear-progress'));

这样就可以创建一个 Material Design Progressbar 组件，它会自动根据 aria-valuenow 属性的值来更新进度条。

Material Design Progressbar 组件的自定义设置

除了基本用法之外，Material Design Progressbar 组件还提供了一些自定义设置，可以根据实际需求进行调整。下面我们将介绍其中几个常用的设置。

设置进度条的颜色

可以使用 CSS 来设置进度条的颜色，例如：

.mdc-linear-progress__primary-bar {
  background-color: #00796b;
}

.mdc-linear-progress__secondary-bar {
  background-color: #b2dfdb;
}

这里使用 background-color 属性来设置进度条的颜色，可以根据实际需求进行调整。

设置进度条的高度

可以使用 CSS 来设置进度条的高度，例如：

.mdc-linear-progress__bar {
  height: 8px;
}

这里使用 height 属性来设置进度条的高度，可以根据实际需求进行调整。

设置进度条的动画效果

可以使用 CSS 来设置进度条的动画效果，例如：

.mdc-linear-progress__bar-inner {
  transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

这里使用 transition 属性来设置进度条的动画效果，可以根据实际需求进行调整。其中，transform 表示要进行动画的属性，0.3s 表示动画的时长，cubic-bezier(0.0, 0.0, 0.2, 1) 表示动画的缓动函数。

设置进度条的形状

可以使用 CSS 来设置进度条的形状，例如：

.mdc-linear-progress__bar-inner {
  border-radius: 4px;
}

这里使用 border-radius 属性来设置进度条的圆角，可以根据实际需求进行调整。

示例代码

下面是一个完整的示例代码，可以用于演示 Material Design Progressbar 组件的基本用法和自定义设置：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Material Design Progressbar Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/@material/linear-progress@5.1.0/dist/mdc.linear-progress.min.css">
  <style>
    .mdc-linear-progress__primary-bar {
      background-color: #00796b;
    }

    .mdc-linear-progress__secondary-bar {
      background-color: #b2dfdb;
    }

    .mdc-linear-progress__bar {
      height: 8px;
    }

    .mdc-linear-progress__bar-inner {
      transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="mdc-linear-progress" role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
    <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
      <span class="mdc-linear-progress__bar-inner"></span>
    </div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
      <span class="mdc-linear-progress__bar-inner"></span>
    </div>
  </div>
  <script type="module">
    import { MDCLinearProgress } from 'https://unpkg.com/@material/linear-progress@5.1.0';

    const linearProgress = new MDCLinearProgress(document.querySelector('.mdc-linear-progress'));

    setInterval(() => {
      const progress = (linearProgress.progress + 0.01) % 1;
      linearProgress.progress = progress;
    }, 10);
  </script>
</body>
</html>

这里使用了 Google Fonts 和 MDC Web 库来引入所需的字体和组件。在 JavaScript 中，使用 setInterval 函数来模拟进度条的更新，每 10 毫秒增加进度条的值。可以根据实际需求进行调整。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d165bda941bf71342f9a42

Material Design 下进度条 Progressbar 的自定义设置方法