英文:
ng bootstrap progressbar type is not working
问题
Here is the translated content:
我的项目使用Angular，并安装了ng-bootstrap。我在我的app.module.ts中添加了模块，组件可以正常工作，但我无法更改进度条的颜色。所有类型都显示为粉色。
home.component.html
<div class="row">
<div class="col">
<ngb-progressbar type="success" height="15px" [value]="25">成功</ngb-progressbar>
<ngb-progressbar class="mt-4" type="info" height="15px" [value]="50">信息</ngb-progressbar>
<ngb-progressbar class="mt-4" type="warning" height="15px" [value]="75">警告</ngb-progressbar>
<ngb-progressbar class="mt-4" type="danger" height="15px" [value]="100">危险</ngb-progressbar>
<ngb-progressbar class="mt-4" type="primary" height="15px" [value]="75">主要</ngb-progressbar>
<ngb-progressbar class="mt-4" type="secondary" height="15px" [value]="50">次要</ngb-progressbar>
<ngb-progressbar class="mt-4" type="dark" height="15px" [value]="25">深色</ngb-progressbar>
</div>
</div>
Output
如果我在style.scss文件中编写此行，我可以更改颜色，但我需要type属性。此外，我尝试将NgbProgressbarConfig注入到我的home.component.ts中，但它没有起作用。
.progress-bar
{
background-color: aqua !important;
}
英文:
My project is in Angular and I installed ng bootstrap. I added modules to my app.module.ts the components are working but I can't change the color of progressbar. All types are coming in pink color.
home.component.html
<div class="row">
<div class="col">
<ngb-progressbar type="success" height="15px" [value]="25">success</ngb-progressbar>
<ngb-progressbar class="mt-4" type="info" height="15px" [value]="50">info</ngb-progressbar>
<ngb-progressbar class="mt-4" type="warning" height="15px" [value]="75">warning</ngb-progressbar>
<ngb-progressbar class="mt-4" type="danger" height="15px" [value]="100">danger</ngb-progressbar>
<ngb-progressbar class="mt-4"type="primary" height="15px" [value]="75">primary</ngb-progressbar>
<ngb-progressbar class="mt-4" type="secondary" height="15px" [value]="50">secondary</ngb-progressbar>
<ngb-progressbar class="mt-4" type="dark" height="15px" [value]="25">dark</ngb-progressbar>
</div>
</div>
Output
If I wrote this line in my style.scss file I can change the color but I need type attribute. Also I tried injecting NgbProgressbarConfig to my home.component.ts but it didn't work.
.progress-bar
{
background-color: aqua !important;
}
答案1
得分: 1
在ngb-progressbar中并没有"magic"。这个组件会创建一个带有以下类的div：
- progress-bar text-bg-success 如果类型为success
- 或者
- progress-bar text-bg-info 如果类型为info
- 或者
- progress-bar text-bg-warning 如果类型为warning
- 或者
- ...
这些类在bootstrap.min.css中定义。如果你想覆盖这些类，或者只是覆盖progress-bar类，可以使用!important：
.progress-bar {
background-color: red !important;
}
所有的进度条都会使用新的类。要查看你覆盖了哪个类，请打开工具，检查哪个.css文件被覆盖。通常会有一个地方放置"css claculated"。
英文:
There's not "magic" in ngb-progressbar. This component create a div with class
progress-bar text-bg-success if type=success
//or
progress-bar text-bg-info if type=info
//or
progress-bar text-bg-warning if type=warning
//or
...
This class are defined in bootstrap.min.css If you override this classes or simply override the progress-bar class with `!important"
.progress-bar {
background-color: red !important;
}
All your progress bar becomes with the new class
Check where are you override the class. To see, in navigator open the tools, check what .css is override. Generally you have a place where put "css claculated"
答案2
得分: 0
你可以像这样更改文本背景属性的颜色：
.text-bg-success {
background-color: pink !important;
}
.text-bg-info {
background-color: red !important;
}
英文:
You can change color of text-bg-attribute like this
.text-bg-success {
background-color: pink !important;
}
.text-bg-info {
background-color: red !important;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论