极客教程Angular PrimeNG ScrollPanel组件
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用ScrollPanel组件。我们还将了解到代码示例中使用的各种属性和语法。
时间线组件用于显示进程的时间线。
导入：为了使用Galleria，我们需要在模块文件中导入以下语句。
import {ScrollPanelModule} from 'primeng/scrollpanel';
语法:
<p-scrollPanel [style]="{....}">
<p>...</p>
</p-scrollPanel>
Angular PrimeNG ScrollPanel组件属性：
- style。它是组件的内联风格。它的数据类型为字符串，默认值为空。
- styleClass。它是组件的风格类。它的数据类型为字符串，默认值为空。
Angular PrimeNG ScrollPanel组件样式：
- p-scrollpanel。它是容器元素。
- p-scrollpanel-wrapper。它是内容部分的包装器。
- p-scrollpanel-content。它是内容部分。
- p-scrollpanel-bar。它是滚动条手柄。
- p-scrollpanel-bar-x。它是用来处理一个水平条形滚动条的。
- p-scrollpanel-bar-y。它是用来处理垂直条形滚动条的。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
运行应用程序的步骤：要运行上述文件，请运行以下命令。
ng serve --save
例子1：下面的例子说明了Angular PrimeNG ScrollPanel组件只使用垂直滚动。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ScrollPanel Component</h5>
<p-scrollPanel [style]="{ height: '300px' }">
<p>
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
</p>
</p-scrollPanel>
- 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 { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ScrollPanelModule } from 'primeng/scrollpanel';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ScrollPanelModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
例子2：下面是另一个例子，说明了Angular PrimeNG ScrollPanel组件使用垂直和水平滚动。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ScrollPanel Component</h5>
<p-scrollPanel [style]="{ height: '300px' }">
<p style="width: 500px">
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
</p>
</p-scrollPanel>
- 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 { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ScrollPanelModule } from 'primeng/scrollpanel';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ScrollPanelModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
