Angular PrimeNG TabView自定义标题

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用TabView自定义头像。我们还将了解这些属性，以及在代码中使用的语法。

TabView组件用于以标签的形式显示内容。

语法:

<p-tabView styleClass="tabview-custom">
    <p-tabPanel header="...">
        <ng-template pTemplate="header">
            <i class="..."></i>
            <span>....</span>
            <i class="..."></i>
        </ng-template>
         ...
    </p-tabPanel>
</p-tabView>

Angular PrimeNG TabView自定义标题属性：

header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
selected:它定义了标签是否被激活。它是布尔数据类型，默认值是false。
closable。它定义了标签是否可以被移除。它是布尔数据类型，默认值为false。
styleClass。它是组件的风格类。它的数据类型为字符串，默认值为空。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Angular PrimeNG TabView自定义标题

运行下面的命令可以看到输出。

ng serve --open

例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG TabView自定义标题。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG TabView Custom Headers</h5>
  
<p-tabView styleClass="tabview-custom">
    <p-tabPanel header="Geek I">
        <ng-template pTemplate="header">
            <i class="pi pi-instagram"></i>
            <span>Geek I</span>
            <i class="pi pi-youtube"></i>
        </ng-template>
        <p>
            Welcome Geek 1
        </p>
    </p-tabPanel>
    <p-tabPanel header="Geek II">
        <ng-template pTemplate="header">
            <i class="pi pi-whatsapp"></i>
            <span>Geek II</span>
        </ng-template>
        <p>
            Welcome Geek 2
        </p>
    </p-tabPanel>
    <p-tabPanel header="Geek III">
        <ng-template pTemplate="header">
            <span>Geek III</span>
            <i class="pi pi-telegram"></i>
        </ng-template>
        <p>
            Welcome Geek 3
        </p>
    </p-tabPanel>
</p-tabView>

app.component.ts:

import { 
    Component, 
    OnInit, 
    ViewEncapsulation } 
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { TabViewModule } from 'primeng/tabview';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
          BrowserModule,
          BrowserAnimationsModule,
          TabViewModule,
          ButtonModule,
          RouterModule.forRoot([
            {path:'',component: AppComponent}
        ])
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

输出:

Angular PrimeNG TabView自定义标题

例子2：这是另一个例子，说明了如何使用Angular PrimeNG TabView自定义标题使用图像。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angualar PrimeNG TabView Custom Headers</h5>
  
<p-tabView styleClass="tabview-custom">
    <p-tabPanel [closable]="true" header="Course I">
        <ng-template pTemplate="header">
            <i class="pi pi-facebook"></i>
            <span>Course I</span>
            <i class="pi pi-twitter"></i>
        </ng-template>
        <p>
            <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/fullstacknodecourseoverviewimage-300x289.png" />
        </p>
    </p-tabPanel>
    <p-tabPanel [closable]="true" header="Course II">
        <ng-template pTemplate="header">
            <i class="pi pi-github"></i>
            <span>Course II</span>
        </ng-template>
        <p>
            <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
        </p>
    </p-tabPanel>
    <p-tabPanel [closable]="true" header="Course III">
        <ng-template pTemplate="header">
            <span>Course III</span>
            <i class="pi pi-paypal"></i>
        </ng-template>
        <p>
            <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214720/competitiveprogramminglivecourseoverviewimage-300x289.png" />
        </p>
    </p-tabPanel>
</p-tabView>

app.component.ts:

import { 
    Component, 
    OnInit, 
    ViewEncapsulation } 
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { TabViewModule } from 'primeng/tabview';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
          BrowserModule,
          BrowserAnimationsModule,
          TabViewModule,
          ButtonModule,
          RouterModule.forRoot([
            {path:'',component: AppComponent}
      ])
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

输出:

Angular PrimeNG TabView自定义标题