Angular PrimeNG TabView的选择

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

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

Angular PrimeNG TabView选择属性：

• header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
• selected:它定义了标签是否被激活。它是布尔数据类型，默认值是false。

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

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

ng new appname

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

cd appname

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

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

项目结构：它将看起来像以下内容

运行以下命令以查看输出。

ng serve --open

例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG TabView Selection。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Selection</h5>
<p-tabView>
    <p-tabPanel header="Geek 1">
      <p>Welcome geek 1</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 2">
      <p>Welcome geek 2</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 3">
      <p>Welcome geek 3</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 4" [selected]="true">
      <p>Welcome geek 4</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 5">
      <p>Welcome geek 5</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 6">
      <p>Welcome geek 6</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 7">
      <p>Welcome geek 7</p>
    </p-tabPanel>
</p-tabView>

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

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

输出:

例子2：这是另一个例子，说明了如何使用Angular PrimeNG TabView Selection，使用内容作为图像。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Selection</h5>
  
<p-tabView>
 <p-tabPanel header="Course 1">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/fullstacknodecourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
 <p-tabPanel header="Course 2">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
 <p-tabPanel header="Course 3" [selected]="true">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214720/competitiveprogramminglivecourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
  
 <p-tabPanel header="Course 4">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214721/JavaFoundationcourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
  
 <p-tabPanel header="Course 5">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214721/datasciencelivecourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
  
 <p-tabPanel header="Course 6">
   <p>
     <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214721/datasciencelivecourseoverviewimage-300x289.png" />
   </p>
 </p-tabPanel>
</p-tabView>

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

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

输出: