- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想使用ngbTabSet将nav-pills in card-header 和tab-content in card-body。但我不知道该怎么做。
这是我尝试实现的示例(使用 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
有人知道如何让它工作吗?
最佳答案
使用 ng-bootstrap 2.0 无法实现这一点。 ngbTabset 的模板不允许这样做。
我决定基于 ngbTabset 创建我自己的标签集并定制他们的模板。
这里是我的组件
@Component({
selector: 'card-tabset',
templateUrl: './card-tabset.component.html',
})
export class CardTabsetComponent extends NgbTabset {
constructor(config: NgbTabsetConfig) {
super(config);
}
}
和模板
<div class="card">
<div class="card-header">
<ul [class]="'nav nav-' + type + (orientation == 'horizontal'? ' ' + justifyClass : ' flex-column')" role="tablist">
<li class="nav-item" *ngFor="let tab of tabs">
<a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled" href (click)="!!select(tab.id)"
role="tab" [attr.tabindex]="(tab.disabled ? '-1': undefined)" [attr.aria-controls]="(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)"
[attr.aria-expanded]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
{{tab.title}}
<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<ng-template ngFor let-tab [ngForOf]="tabs">
<div class="tab-pane {{tab.id === activeId ? 'active' : null}}" *ngIf="!destroyOnHide || tab.id === activeId" role="tabpanel"
[attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel" [attr.aria-expanded]="tab.id === activeId">
<ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template>
</div>
</ng-template>
</div>
</div>
</div>
关于angular - 使用 ngbTabSet 将 nav-pills 放在 card-header 中,将 tab-content 放在 card-body 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50531120/
我尝试通过 ngbTabset.select() 以编程方式激活选项卡(不是默认事件),但它不起作用。 Tab 1
https://ng-bootstrap.github.io/#/components/tabs 中的“按 ID 选择事件选项卡”示例展示了如何使用 DOM 按钮以编程方式选择要激活的 Angular
使用 Angular 2.3.1 和 ng-bootstrap 1.0.0-alpha.18。我正在尝试以编程方式选择基于组件 ID 的选项卡,而不是从模板中选择选项卡。目标是从 url 中提取参数并
我想使用ngbTabSet将nav-pills in card-header 和tab-content in card-body。但我不知道该怎么做。 这是我尝试实现的示例(使用 bootstrap.
我是一名优秀的程序员,十分优秀!