时间戳

首页 > 解决方案 > ng-bootstrap - 将类添加到选项卡窗格

angular - ng-bootstrap - 将类添加到选项卡窗格

问题描述

我正在构建一个 Angular 应用程序，它利用 Bootstrap 的 flex-box 实现来垂直填充可用空间，但是在 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.

任何想法如何将其他类应用于选项卡窗格？

标签： angularng-bootstrap

解决方案

你可以在纯 css/sass 中做到这一点，就像这样：

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

推荐阅读