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>

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

Answer 1

常规Bootstrap supports动画进度条。

您确定已正确导入Boostrap文件吗？我想你可能只包括CSS文件而不包括JS。请查看basic template以查看应包含哪些文件。

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

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

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

因此，min-width属性将应用于内部 <div>。但是，由于渲染是由角度管理的，因此更改它的唯一方法是添加如下的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。

Angular UI bootstrap progressbar最小宽度

1 个答案: