Ng-Bootstrap активные таблетки, чтобы добавить выпадающий не отображается

Question

Я использовал свой проект Angular-6 для ng-bootstrap , и я использовал ngbootstrap-pills , я пытался добавить активные таблетки в выпадающий значок с опцией удаления кнопки, но это не работает, кто-нибудь знает, как это сделать правильно.

здесь с стек блиц код

это мой код .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

Это решение не нуждается в .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

Answer 2

Привет! Я изменил некоторые незначительные изменения в вашем коде, пожалуйста, проверьте эту ссылку StackBlitz

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

Надеюсь, это поможет вам

Answer 3

Попробуйте использовать ::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 .

Answer 4

Я нашел какое-то решение

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;

}