Angular UI引导进度条最小宽度

Question

我正在尝试设置角度 UI 引导进度条的最小宽度。我检查了文档，他们没有提到如何做到这一点。我知道对于“常规”引导程序，您可以使用 style="min-width: 10em;" 之类的东西。但是，这仅在您将其包装在标准进度引导 div 中时才有效，如下所示：

<div class="progress">
    <uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
    <span> text </span></uib-progressbar>
</div>

但这会显示一个没有“活动”动画的进度条，因为常规引导程序不支持这一点。当我这样尝试时，它不会设置 min-width 属性

<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
    <span> text </span>
</uib-progressbar>

编辑：我忽略了“常规”引导文档中的动画部分。但是，如果可能，我想使用 UI 引导进度条。

Answer 1

Regular Bootstrap supports 动画进度条。

您确定您正确导入了 Boostrap 文件吗？我想你可能只包含了 CSS 文件，但没有包含 JS。查看basic template 以了解您应该包含哪些文件。

还请查看uib-progressbar documentation。您编写的代码 sn-p 似乎是正确的。正如我所说，我认为这个问题的原因是您没有包含 Bootstrap 的 JS 文件。

---

编辑：哦，ui-bootstrap 显然不需要 Bootstrap 的 JS，你是对的。

关于您问题的min-width 部分：我注意到您将progress-bar 类添加到<uib-progressbar> 元素中。根据文档，不应使用 progress-bar 类（它将由 ui-bootstrap 添加到将在 inside <uib-progressbar> 呈现的<div> 元素中，您可以轻松验证这通过检查进度条宽度 devtools）。

因此，min-width 属性将应用于 internal <div>。但是，由于渲染是由 Angular 管理的，因此更改它的唯一方法是添加这样的 CSS 规则：

.setminwidth .progress-bar {
    min-width: 20em;
}

然后将新的setminwidth 类添加到外部<uib-element>，如下所示：

<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>

我对此进行了测试，但它似乎不起作用。我认为这是因为 min-width: 0; is hardcoded in the template，并且每次 ui-bootstrap 重新渲染元素时都会重置。

我尝试将 !important 添加到 CSS 规则中，以避免被覆盖，但它也不起作用。

我想此时你应该考虑为什么需要添加这个min-width 属性，因为 ui-bootstrap 喜欢覆盖它。可能是因为您不希望当 % 较低时进度条“太空”？如果是这样的话，我想你应该看看 Bootstrap 最近介绍的the changes：现在他们似乎为 0%、1% 和 2% 添加了一个特殊的min-width。

UPD：Bootstrap 人员显然是 changed their mind 并恢复了特殊的 min-width 值。在这一点上，我认为 ui-bootstrap 应该遵循并删除硬编码的min-width: 0;，因为它不再需要了。我just sent 向他们发出拉取请求。如果他们合并它，您将能够使用我在上面发布的 CSS。