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

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

0 голосов
/ 13 июля 2020

Я создаю приложение 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.

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

1 Ответ

0 голосов
/ 14 июля 2020

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

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