ngx-segmented-bar 是一个 Angular 组件库，它可以帮助我们轻松地创建分段式进度条或评分条。这个组件库非常易于使用，并对自定义样式提供了支持。
在本文中，我们将介绍如何使用 ngx-segmented-bar 实现分段式进度条的创建，并探讨一些重要的细节以及实现的一些指导意义。
安装
首先，我们需要使用 npm 进行安装。可以使用以下命令：
npm install ngx-segmented-bar --save
使用
在我们开始创建分段式进度条之前，我们需要导入 ngx-segmented-bar 包，并在我们的应用程序中定义一个 Component。完成这些步骤后，我们将已经准备好了所有需要的代码。
首先，我们需要在 Component 的 import 区域中导入包：
import { SegmentedBarModule } from 'ngx-segmented-bar';接着，我们需要在 Component 的 @NgModule 中引入：
@NgModule({
...
imports: [
...
SegmentedBarModule
]
...
})在 html 页面上，我们可以开始使用 ngx-segmented-bar：
<ngx-segmented-bar [total]="100" [segments]="segments"></ngx-segmented-bar>
这里的 segments 是一个数组，表示每一个进度条的颜色和数值占比。例如：[ { color: "#D2312D", percentage: 30 }, { color: "#2DD231", percentage: 60 }, { color: "#31BED2", percentage: 10 }] 表示一个进度条，共分为三段，每段成比例占 30%，60% 和 10%。
可自定义样式
ngx-segmented-bar 可以通过配置一些属性自定义样式。例如，我们可以使用 type 属性来指定要创建的类型：default 或 rating。
以下是我们可以配置的所有选项：
-- -------------------- ---- ------- ------------------ --------------------- ----------------- ------------------ ---------------- ------------------------ --------------------- ------------------------ ------------------------ ------------------------ ------------- ---------------------
示例代码
下面是 ngx-segmented-bar 示例代码：
<ngx-segmented-bar [total]="100" [segments]="segments" [showValue]="true"></ngx-segmented-bar>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------ ------------- ------------------------------------------
-
--
------ ----- ------------ -
--------- --- - -
- ------ ---------- ----------- -- --
- ------ ---------- ----------- -- --
- ------ ---------- ----------- -- -
-
-总结
我们已经掌握了如何使用 ngx-segmented-bar 创建分段式进度条。这个组件库对于我们构建复杂的用户界面非常有用，并且提供了一些自定义属性，可以轻松地定义样式。同时，Learning ngx-segmented-bar 也是 Angular 中一项重要的技能，可以帮助我们更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2581e8991b448dadd8