ngbTabSetを使用して、nav-pillsをカードヘッダーに、tab-contentをcard-bodyに配置します

bugfix> angular > 投稿 2020-08-22 19:56

置きたいカードヘッダーのnav-pills そしてカード本体のタブコンテンツ を使用してngbTabSet。しかし、私はこれを行う方法を取得しません。

これが私が達成しようとしているもののサンプルです（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>

私は使っているブートストラップ4.0、ng-bootstrap 2.0 そして角度5.2

これを動作させる方法についてのアイデアをお持ちですか？

angular

bootstrap-4

angular5

回答 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>

ng-bootstrapでそれを行うことはできないと思います。ブートストラップの動作を正確に再現しない他のng-bootstrapコンポーネントでも同じ問題が発生しました。

ただし、 ngSwitch を使用すると、未加工のブートストラップとAngularで簡単にその機能を実現できると思います例えば。

ngSwitchの詳細：https://angular.io/api/common/NgSwitch

この機能の閉じられていないスレッド：https://github.com/ng-bootstrap/ng-bootstrap/issues/1567