web-dev-qa-db-ja.com

Angular 6-ng-bootstrap-スタイルタブ

私はこれを持っていますbootstrap tabs

<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;
 }
`
],
angularangular-componentsng-bootstrap
6
Michalis

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

デモについては this stackblitz をご覧ください。

注：属性class="tabset1"がngb-tabset要素に設定されていない場合、セレクター.tabset1をCSSスタイルから削除する必要があります。

10
ConnorsFan