Angular PrimeNG ScrollTop组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用ScrollTop组件。

ScrollTop组件：它用于制作一个在某个滚动位置后被显示的组件，以导航到页面的顶部。

属性:

• target : 它指定了scrollTop的目标，有效值是 “window “和 “parent”。它是字符串数据类型，默认值是一个窗口。
• threshold : 这是一个阈值，在这个阈值之后，该元素是可见的。它接受数字数据类型作为输入，默认值为400。
• icon : 它是要显示的图标。它是字符串数据类型，默认值是pi pi-chevron-up。
• behavior : 它是滚动的行为，”smooth “添加动画，”auto “跳跃式滚动。它的数据类型是字符串，默认值是平滑。
• style : 它设置组件的内联风格。它是一个对象数据类型，默认值为空。
• styleClass : 它设置组件的风格类别。它是字符串数据类型，默认值为空。

样式:

• p-scrolltop。它是容器元素。
• p-scrolltop-sticky：它是连接到其父级的容器元素。

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

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

ng new appname

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

cd appname

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

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

项目结构 。完成安装后，它将看起来像如下。

例子1：这是一个基本的例子，说明了如何使用scrollTop组件。threshold的值被设置为150，因此滚动150个像素后将显示scrollTop图标。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ScrollTop Component</h5>
<p-scrollPanel [style]=
    "{width: '25p0x', height: '100px'}">
  
    <p>
        Angular PrimeNG is a framework used 
        with angular to create components
        with great styling and this framework 
        is very easy to use and is used to 
        make responsive websites. Angular 
        PrimeNG is a framework used with
        angular to create components with 
        great styling and this framework is
        very easy to use and is used to make 
        responsive websites. Angular PrimeNG 
        is a framework used with angular to 
        create components with great styling 
        and this framework is very easy to 
        use and is used to make responsive 
        websites.
    </p>
  
    <p-scrollTop target="parent" 
        [threshold]="150" 
        icon="pi pi-arrow-up">
    </p-scrollTop>
</p-scrollPanel>

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

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

输出:

例子2：在这个例子中，我们将把behavior属性设置为auto，所以，在滚动到元素的顶部时，动画是不可见的，而threshold被设置为0，所以在滚动时，scrollTop图标会立即显示。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ScrollTop Component</h5>
<p-scrollPanel [style]=
    "{width: '300px', height: '90px'}">
  
    <div>
        <span>GeeksforGeeks</span>
  
        <p>
            A Computer Science portal for 
            geeks. It contains well written, 
            well thought and well explained 
            computer science and programming 
            articles. We provide a variety 
            of services for you to learn, 
            thrive and also have fun! Free 
            Tutorials, Millions of Articles, 
            Live, Online and Classroom Courses,
            Frequent Coding Competitions, 
            Webinars by Industry Experts,
            Internship opportunities and Job 
            Opportunities.
        </p>
    </div>
  
    <p-scrollTop target="parent" [threshold]="0" 
        [behavior]='auto' icon="pi pi-arrow-up">
    </p-scrollTop>
</p-scrollPanel>

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

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

输出: