Angular PrimeNG TabView默认属性

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用TabView Default。我们还将学习属性、事件和造型，以及代码中使用的语法。

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

Angular PrimeNG TabView默认属性：

• header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。

创建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 Default。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Default</h5>
  
<p-tabView>
  <p-tabPanel header="Geek 1">
    <p>
      Angular PrimeNG is an open-source 
      framework with a rich set of native
      Angular UI components that are used 
      for great styling and this framework
      is used to make responsive websites 
      with very much ease.
    </p>
  </p-tabPanel>
    
  <p-tabPanel header="Geek 2">
    <p>
      Angular PrimeNG is an open-source 
      framework with a rich set of native
      Angular UI components that are used 
      for great styling and this framework
      is used to make responsive websites 
      with very much ease.
    </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 Default，使用内容作为图像。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Default</h5>
  
<p-tabView>
  <p-tabPanel header="Geek 1">
    <p>
      <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220228120243/gfglogo.png">
    </p>
  </p-tabPanel>
  <p-tabPanel header="Geek 2">
    <p>
      <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303124953/gfglogo1.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 {}

输出: