ng- bootstrap - добавление классов в панель вкладок

Question

Я создаю приложение Angular, которое использует реализацию гибкого блока Bootstrap для вертикального заполнения доступного пространства, однако в ng- bootstrap есть один случай, когда я не могу понять, как применить класс flex-fill. Я использую реализацию ng- bootstrap для элемента управления вкладкой:

<div class="card border-primary flex-fill">
    <div class="card-header bg-primary">
        <ul ngbNav #nav="ngbNav" class="nav-tabs card-header-tabs">
            <li ngbNavItem>
                <a ngbNavLink class="text-dark">One</a>
                <ng-template ngbNavContent>One</ng-template>
            </li>
            <li ngbNavItem>
                <a ngbNavLink class="text-dark">Two</a>
                <ng-template ngbNavContent>Two</ng-template>
            </li>
            <li ngbNavItem>
                <a ngbNavLink class="text-dark">Three</a>
                <ng-template ngbNavContent>Three</ng-template>
            </li>
        </ul>
    </div>
    <div [ngbNavOutlet]="nav" class="card-body d-flex flex-column"></div>
</div>

Элемент управления генерирует элемент <div class="tab-pane active">...</div> внутри элемента [ngbNavOutlet], но мне нужно применить flex-fill, чтобы он должно быть tab-pane active flex-fill.

Есть идеи, как применить дополнительные классы к панели вкладок?

Answer 1

Вы можете сделать это в чистом css / sass, например:

.tab-pane{
   @extend .flex-fill;
}