Montag, Juni 1, 2020

Ä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

3 Kommentare

  1. 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

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

Kostenlose Online-Tests