Angular PrimeNG TabView可滚动

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

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

Angular PrimeNG TabView可滚动属性：

header。它指定了tabPanel的标题。它是字符串数据类型，默认值为空。
selected:它定义了标签是否被激活。它是布尔数据类型，默认值是false。
scrollable:它定义了当TabView启用时，是否在标签标题的每一侧显示按钮来滚动标签列表。

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

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Scrollable</h5>
<p-tabView [scrollable]="true">
    <p-tabPanel header="Geek 1">
      <p>Welcome geek 1</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 2" tooltip="geek 2">
      <p>Welcome geek 2</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 3" tooltip="geek 3">
      <p>Welcome geek 3</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 4" tooltip="geek 4">
      <p>Welcome geek 4</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 5" tooltip="geek 5">
      <p>Welcome geek 5</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 6" tooltip="geek 6">
      <p>Welcome geek 6</p>
    </p-tabPanel>
    <p-tabPanel header="Geek 7" tooltip="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 {}

输出:

Angular PrimeNG TabView可滚动

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

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG TabView Scrollable</h5>
<p-tabView [scrollable]="true">
    <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">
      <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-tabPanel header="Course 7">
      <p>
        <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807211225/unnamed-300x300.jpg" />
      </p>
    </p-tabPanel>
    <p-tabPanel header="Course 8">
      <p>
        <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303124953/gfglogo1.png" />
      </p>
    </p-tabPanel>
    <p-tabPanel header="Course 9">
      <p>
        <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220228120243/gfglogo.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 {}

输出:

Angular PrimeNG TabView可滚动