Ändern Sie Stile auf ngb-Registerkarte Titel

Ich würde gerne Stil den Titel in der ngb-Register, so dass es nicht das Standard-blau von einem Anker-tag. Idealerweise so etwas wie dieses, aber die class-Eigenschaft scheint nicht zu haben eine Wirkung auf die ngb-tab.

HTML:

<ngb-tabset #t="ngbTabset">
    <ngb-tab [title]="'Followers'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
    <ngb-tab [title]="'Following'" class="tab-title">
        <ng-template ngbTabContent>
            ...
        </ng-template>
    </ngb-tab>
</ngb-tabset>

CSS:

.tab-title {
  color: inherit;
}
InformationsquelleAutor Noel Delgado | 2017-12-04
  1. 5

    Gemäß der Dokumentation https://ng-bootstrap.github.io/#/components/tabs/ Sie können Stil den Titel, indem Sie Ihre ngbTabTitle Richtlinie.

    Beispiel:

    <ngb-tabset>
 <ngb-tab>
  <ng-template ngbTabTitle><span class="tab-title">Fancy Title</span></ng-template>
  <ng-template ngbTabContent>Content</ng-template>
 </ngb-tab>    
</ngb-tabset>
    InformationsquelleAutor Everest
  2. 1

    Die bessere option, es ist der Mount Everest Antwort. Aber als eine weitere Antwort, die Sie verwenden können, in der Komponente Kapselung: ViewEncapsulation.Keine

    @Component({
  ...
  templateUrl: 'my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None
})

    Dadurch wird das css in das Dokument geschrieben Kopf. Also, das css gelten für die gesamte Anwendung. Wenn Sie möchten, können Sie anbei die navtab in einem div

    <div class="customTab">
 <ngb-tabset>
  <ngb-tab title="Simple" class="myClass">
    <ng-template ngbTabContent>
      ...
 <ngb-tabset>
</div>

    Und Ihre .css wie

    .customTab .nav-tabs .nav-link.active
{
    color:black;
}
.customTab .nav-tabs .nav-link
{
    color:cyan;
}

    weitere Informationen über ViewEncapsulation sehen, z.B. https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

    InformationsquelleAutor Eliseo
  3. 1

    Ich habe versucht, ändern Sie die Hintergrundfarbe für das inaktive Registerkarte (der Unterschied zwischen aktiven und inaktiven tabs war zu subtil) und war in der Lage, es zu tun über styling in globalen Stilen.scss:

    ngb-tabset ul.nav-tabs li a.nav-link.active {
  background-color: transparent;
}

ngb-tabset ul.nav-tabs li a.nav-link {
  background-color: #eeeeee;
}
    InformationsquelleAutor Roger
Schreibe einen Kommentar