Ng-Bootstrap 要添加的活性药丸下拉列表未显示

Question

我在 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;
}

我试过像这张图一样

谢谢。

Answer 1

尝试使用 ::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 的内容。

Answer 2

我找到了一些解决方案

Stackblitz

::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;

}

Answer 3

您好，我对您的代码进行了一些小改动，请查看此 StackBlitz Link

https://stackblitz.com/edit/angular-aticm5-2ghoez

希望对您有所帮助

Answer 4

此解决方案不需要 .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;
}

https://stackblitz.com/edit/angular-aticm5-5nnhz3

Ng-Bootstrap 要添加的活性药丸下拉列表未显示

Ng-Bootstrap active pills to add drop down not showing

css

angular

ng-bootstrap

nav-pills