Ngx-Bootstrap - Tab

Thành phần tab ngx-bootstrap cung cấp thành phần Tab dễ sử dụng và có thể cấu hình cao.

TabsetComponent

bộ chọn

  • tabset

Đầu vào

  • justified - boolean, nếu các tab true lấp đầy vùng chứa và có chiều rộng nhất quán.

  • type - chuỗi, lớp ngữ cảnh điều hướng: 'tab' hoặc 'thuốc'.

  • vertical - nếu đúng, các tab sẽ được đặt theo chiều dọc.

TabDirective

bộ chọn

  • tab, [tab]

Đầu vào

  • active - boolean, chuyển đổi trạng thái hoạt động tab.

  • customClass- string, nếu được đặt, sẽ được thêm vào thuộc tính lớp của tab. Nhiều lớp được hỗ trợ.

  • disabled - boolean, nếu tab true không thể được kích hoạt.

  • heading - chuỗi, văn bản tiêu đề tab.

  • id- chuỗi, id tab. Id tương tự với hậu tố '-link' sẽ được thêm vào

  • element.

  • removable - boolean, nếu tab true có thể tháo rời, nút bổ sung sẽ xuất hiện.

Kết quả đầu ra

  • deselect - được kích hoạt khi tab không hoạt động, $ event: Tab tương đương với phiên bản bỏ chọn của thành phần Tab.

  • removed - được kích hoạt trước khi tab sẽ bị xóa, $ event: Tab tương đương với phiên bản của tab bị loại bỏ.

  • selectTab - được kích hoạt khi tab hoạt động, $ event: Tab tương đương với phiên bản đã chọn của thành phần Tab.

Thí dụ

Vì chúng ta sẽ sử dụng một Tab, chúng ta phải cập nhật app.module.ts được sử dụng trong chương ngx-bootstrap Sortable để sử dụngTabsModuleTabsetConfig.

Cập nhật app.module.ts để sử dụng TabsModule và TabsetConfig.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng thành phần tab.

test.component.html

<tabset>
   <tab heading="Home">Home</tab>
   <tab *ngFor="let tabz of tabs"
      [heading]="tabz.title"
      [active]="tabz.active"
      (selectTab)="tabz.active = true"        
      [disabled]="tabz.disabled">
      {{tabz?.content}}
   </tab>
</tabset>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   tabs = [
      { title: 'First', content: 'First Tab Content' },
      { title: 'Second', content: 'Second Tab Content', active: true },
      { title: 'Third', content: 'Third Tab Content', removable: true },
      { title: 'Four', content: 'Fourth Tab Content', disabled: true }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200. Nhấp vào nút Mở phương thức và xác minh kết quả sau.