在Material Design设计语言中，评分条（RatingBar）是一种常见的控件，它能够让用户快速地给出对某项内容的评分。但由于默认的RatingBar样式并不总是符合应用需求，开发者可能需要自定义RatingBar样式，以使之更符合自己的应用场景。本文将介绍如何自定义Material Design下的RatingBar，让您更好地适应自己的应用需求。
前置技能
在学习本文之前，我们假设您已经掌握以下技能：
- HTML5
- CSS3
- JavaScript
此外，您还需要对 Material Design 有一定的了解，包括：
- 带有 Material Design 风格的 RatingBar 的基本样式
- Material Design 颜色方案
- Material Design 字体规范
基础实现
Material Design 风格下的 RatingBar 通常都是由一组图标组成的，它们的状态由JavaScript控制并通过CSS修改样式。首先让我们来看看如何创建一个基本的RatingBar。
我们可以先使用Material icons 来实现评分星星，Material icons 是 Material Design 库中的图标集，可以很方便地使用。然后，我们通过 HTML 来为星星添加外壳。代码如下所示：
<div class="rating-bar">
<i class="material-icons rating-star">star_border</i>
<i class="material-icons rating-star">star_border</i>
<i class="material-icons rating-star">star_border</i>
<i class="material-icons rating-star">star_border</i>
<i class="material-icons rating-star">star_border</i>
</div>我们为星星容器添加了一个名为“rating-bar”的类，在每个星星上都有一个类名叫“rating-star”。我们还在“rating-star”元素中放置了 Material icons 中的“star_border” icon。现在，您应该能看到五个空心星星，并且它们都位于“rating-bar”容器中。
接下来，我们将为 RatingBar 添加一些 CSS 样式。这些样式将允许我们更改星星的颜色、大小和填充状态等。代码如下：
-- -------------------- ---- -------
----------- -
-------- -------------
-
------------ -
---------- -----
------ --------
-------- -------------
----------- ----- --- ---------
------------- ----
-
-------------------
------------------- -
------ --------
-
------------------- -
----------- ----- --- --------
-我们首先通过 “display: inline-block” 将 RatingBar 容器设置为内联块级别。接下来，我们定义了“rating-star”元素的样式，包括元素大小和颜色等，以及一些关于可修改的动画效果。最后，我们在“rating-star.hover”和“rating-star.active”类中分别定义了两种状态（鼠标悬停和当前活动状态下的星星），并调整了它们的颜色。
在这个基础上，我们已经完成了一个最简单的 RatingBar。您可以通过在 JavaScript 中添加一些事件监听器来使它更加实用。
自定义基础 RatingBar
接下来，我们将介绍如何通过样式和代码来自定义基本 RatingBar。首先，我们可以通过CSS来自定义评分类别（评分星星）的颜色。下面的CSS使得评级图标变成蓝色：
.rating-star.hover,
.rating-star.active {
color: #0070f3;
}
.rating-star.active {
transition: color .2s ease-in;
}现在，当您将鼠标悬停在一个评级图标上时，它会变蓝色。当您单击一个图标时, 选定的图标会变成蓝色：
-- -------------------- ---- -------
--- --------- - --------------------------------------
--- ----- - -------------------------------------------
--- ---- - - -- - - ------------- ---- -
-------------------------------------- ----------- -
--- ----------- - ---------
--- ---------------- - ------------------------------------
------------------------ ---------
--- ---- - - -- - - ------------------------ ---- -
-------------------------------- ---------
-
---
--------------------------------------- ----------- -
--- ----------- - ---------
--- ---------------- - ------------------------------------
------------------------ ---------
--- ---- - - -- - - ------------------------ ---- -
-------------------------------- ---------
-
---
---------------------------------- ----------- -
--- ----------- - ---------
--- ---------------- - ------------------------------------
------------------------ ----------
--- ---- - - -- - - ------------------------ ---- -
-------------------------------- ----------
-
---
-
-------- ------------------------------- -
--- -------- - ---
----- -------- - ------------------------ -
-- ----------------- --- -- -
--------- -- ------
-
-----------------------
-
------ -------------------
-
-------- -------------------- ---------- -
-- --------- -- ----------- -
-------
-
--- ----------- - ------------------
--------- - -------------------------------
-- ---------- --- --- -
----------- -- - - - ----------
-
---- -
----------- - --------------------- ---------- - ---------------------------- - ------------------
-
----------------- - ------------
-通过这些 JavaScript 代码，针对鼠标移动和点击后的事件，我们可以实现图标的更改和状态的反馈。
到这里，我们的 RatingBar 便已经完成了基本的自定义，您可以根据您自己的需求更改样式和代码，以适应您的应用场景。
总结
在本文中，我们介绍了如何自定义基本的 Material Design 风格下的 RatingBar。首先，我们通过一组 Material icons 图标创建了一个最基本的 RatingBar，并通过 CSS 和 JavaScript 自定义了星级图标的颜色、大小、填充状态和动画等。
通过这些知识，您可以更有针对性地为 RatingBar 添加自定义效果，让您的应用更加符合您的预期和需求。同时，如果您对 Material Design 设计语言有深入的理解，那么您也可以更好地了解如何为控件添加 Material Design 风格。
完整的示例代码可在 GitHub 仓库 中下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593ec4ceb4cecbf2d889daa