在这篇文章中，我将重点介绍可用的进度条小部件之一，它是向用户显示工作流程进展的绝佳工具。
为什么要使用进度条小部件？
当您在应用中执行多步骤流程（例如填写订单或进行调查）时，通过视觉指示距离完成还有多远，可以带来出色的用户体验。这就是进度条小部件的作用所在。此小部件使开发人员能够使用多种不同样式直观地显示最终用户的进度，以确保成功向最终用户传递进度信息。
查找进度条小部件
您可以在 Mendix App Store。当您搜索“进度条”时，会列出几个进度条小部件，但本博客的主要重点是 Bootstrap 进度条 由 Flock of Birds 创建的小部件：
小部件功能
从本质上讲，Bootstrap 进度条小部件只是显示相应的进度条，并用 0 到 100 之间的数字来指示完成百分比。还可以在进度条中的数字后显示文本（例如，您可以显示“75”或“75% 完成”）。
配置小部件
您需要做的第一件事是将小部件链接到正确的 Progress 属性 和 Bootstrap 风格:
progress 属性是显示完成进度的整数，应将其设置为 0 到 100 范围内的数字。如果进度条是以下值之一，则可以使用 Bootstrap 样式来更改进度条的外观：info、danger 或 success。Bootstrap 样式可以通过微流链接到 progress 属性，例如，在“danger Bootstrap 样式”中，进度条中可以显示 0% 的进度，而在“success Bootstrap 样式”中，进度条中可以显示 100% 的进度。
您还可以调整几个显示设置，例如进度条在百分比值后显示的内容、应用程序中小部件的宽度、颜色切换值以及栏本身的外观。
还可以通过微流为进度条提供点击操作，如下所示。利用微流操作的一个用例是当用户想要根据用户当前页面上填写的新信息更新进度条完成百分比时。
除了上面提到的示例之外，您还可以将 CSS 样式应用于进度条和栏中包含的文本。
这个简单而有效的小部件可以很好地直观地说明工作流程的进展，并且它提供了 Mendix 开发人员可以在他们的页面中添加易于使用的进度条！