Question

我想使用 ngbTabSet 将 nav-pills放入卡片头和标签内容卡片中。但我不知道如何做到这一点。

以下是我尝试实现的示例（使用bootstrap.js）

<div class="card">
    <div class="card-header">
        <ul class="nav nav-pills" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
        </div>
    </div>
</div>

这是我已经尝试过的（使用ng-bootstrap）

<div class="card">
    <div class="card-header">
        <ngb-tabset type="pills">
            <ngb-tab title="Home">
                <ng-template ngbTabContent>..</ng-template>
            </ngb-tab>
        </ngb-tabset>
    </div>
</div>

我最终将所有内容都放在卡片头中。

使用模板参考

时相同

<ng-template ngbTabContent>
  <ng-container *ngTemplateOutlet="template_ref"></ng-container>
</ng-template>

我正在使用 bootstrap 4.0 ， ng-bootstrap 2.0 和 Angular 5.2

任何人都知道如何让这个工作？

Answer 1

使用ng-bootstrap 2.0无法实现此目的。 ngbTabset的模板不允许这样做。

我决定基于ngbTabset创建自己的tabset并自定义他们的模板。

这是我的组件

node_data.running_sum

和模板

@Component({
    selector: 'card-tabset',
    templateUrl: './card-tabset.component.html',
})
export class CardTabsetComponent extends NgbTabset {

    constructor(config: NgbTabsetConfig) {
        super(config);
    }
}

Answer 2

我认为你不能用ng-bootstrap做到这一点。我遇到了与其他ng-bootstrap组件完全没有完全复制bootstrap行为的问题。

但是，我认为您可以使用原始引导程序和Angular轻松完成该功能，例如ngSwitch。

有关ngSwitch的更多信息：https://angular.io/api/common/NgSwitch

此功能的未关闭主题：https://github.com/ng-bootstrap/ng-bootstrap/issues/1567

使用ngbTabSet将nav-pills放入卡片头和卡片主体中的tab-content

2 个答案: