Ng-Bootstrap 要添加的活性药丸下拉列表未显示
Ng-Bootstrap active pills to add drop down not showing
我在 ng-bootstrap and i used ngbootstrap-pills 中使用了我的 Angular-6 项目,我试图通过删除按钮选项将活性药丸添加到下拉图标,但它不起作用,任何人都知道如何正确地做到这一点。
此处使用 stack blitz 代码
这是我的。css代码
.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
我试过像这张图一样
谢谢。
尝试使用 ::ng-deep
选择器来应用样式。否则样式将不会应用到库中。
你的情况是:
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
::ng-deep a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
您还可以阅读有关 Angular View encapsulation 的内容。
我找到了一些解决方案
::ng-deep .nav-pills .nav-link.active:after {
content: '';
display: block;
position: absolute;
left: 6px;
top: 100%;
width: 0;
height: 0;
border-top: 7px solid #262262;
border-right: 13px solid transparent;
border-bottom: 0 solid transparent;
border-left: 15px solid transparent;
}
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
display: inline-block;
position: relative;
background: #262262;
padding: 8px 0;
}
您好,我对您的代码进行了一些小改动,请查看此 StackBlitz Link
https://stackblitz.com/edit/angular-aticm5-2ghoez
希望对您有所帮助
此解决方案不需要 .svg 即可工作。
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
position: relative;
}
::ng-deep .nav-pills .nav-link.active:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: block;
left: 35%;
bottom: 0;
}
我在 ng-bootstrap and i used ngbootstrap-pills 中使用了我的 Angular-6 项目,我试图通过删除按钮选项将活性药丸添加到下拉图标,但它不起作用,任何人都知道如何正确地做到这一点。
此处使用 stack blitz 代码
这是我的。css代码
.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
我试过像这张图一样
谢谢。
尝试使用 ::ng-deep
选择器来应用样式。否则样式将不会应用到库中。
你的情况是:
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
::ng-deep a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
您还可以阅读有关 Angular View encapsulation 的内容。
我找到了一些解决方案
::ng-deep .nav-pills .nav-link.active:after {
content: '';
display: block;
position: absolute;
left: 6px;
top: 100%;
width: 0;
height: 0;
border-top: 7px solid #262262;
border-right: 13px solid transparent;
border-bottom: 0 solid transparent;
border-left: 15px solid transparent;
}
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
display: inline-block;
position: relative;
background: #262262;
padding: 8px 0;
}
您好,我对您的代码进行了一些小改动,请查看此 StackBlitz Link
https://stackblitz.com/edit/angular-aticm5-2ghoez
希望对您有所帮助
此解决方案不需要 .svg 即可工作。
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
position: relative;
}
::ng-deep .nav-pills .nav-link.active:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: block;
left: 35%;
bottom: 0;
}