Угловой 6 - нг-бутстрап - вкладки стиля - PullRequest
Новая
       14

Угловой 6 - нг-бутстрап - вкладки стиля

0 голосов
/ 03 июня 2018

У меня эта вкладка начальной загрузки 

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

Цвет текста на вкладках синий.Я знаю, что если я создаю глобальные стили, я могу переопределить значения по умолчанию.Но я хочу стилизовать вкладки из родительского компонента

Я знаю, что могу стилизовать дочерние компоненты, но в этом случае это не работает ( Как стилизовать дочерние компоненты из файла css родительского компонента? ).Любой совет? 

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

1 Ответ

0 голосов
/ 04 июня 2018

Для следующего шаблона, который использует вкладки ng-bootstrap: 

<ngb-tabset class="tabset1">
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

вы можете переопределить стиль заголовка вкладки по умолчанию с помощью этих правил CSS: 

:host ::ng-deep .tabset1 a.nav-link {
  color: green;
}

:host ::ng-deep .tabset1 a.nav-link.active {
  color: red;
  font-weight: bold;
}

См. этот стекаблиц для демонстрации.

Примечание. Если атрибут class="tabset1" не установлен для элемента ngb-tabset, селектор .tabset1 должен быть удален из стилей CSS.

...