Angular PrimeNG ScrollTop元素

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG中的Scroll Top元素。

ScrollTop组件在用户向上滚动到某个滚动位置后显示，用于快速进入页面或元素的顶部。滚动顶端组件的target属性可以用来锁定一个元素，这样滚动顶端组件就会听从该元素的滚动。

Angular PrimeNG ScrollTop元素属性：

target: 它用于指定卷轴顶端组件的目标。它接受两个值 “window “和 “parent”，默认值是 “parent”。
threshold：此属性用于指定滚动顶部按钮出现时的滚动位置（像素）。它接受数字值，默认值为400。
icon:该属性用于指定滚动顶端组件的图标。它的类型是字符串，默认值是 “pi pi-chevron-up”。

语法:

<p-scrollPanel [style]="...">
    ...
    <p-scrollTop target="parent"
                 [threshold]="...">
       </p-scrollTop>
</p-scrollPanel>

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

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

ng new newapp

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

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

Angular PrimeNG ScrollTop元素

Project Structure

例子1：这是一个基本的例子，说明了如何使用scrollTop组件来监听Angular PrimeNG中的元素滚动。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Element</h3>
  
<div style="font-size: 20px">
  
    <h2> About GeeksforGeeks </h2>
    <p-scrollPanel [style]="{width: '200px',
                             height: '200px'}">
        <p>
            GeeksforGeeks is a computer
            science portal for geeks.
            It offers thousands of written
            articles on various computer science
            topics. Some of the topics are
            DSA, C++, C, Java, etc.
        </p>
  
        <p>
            The practice portal of GeeksforGeeks can
            be used to practice DSA problems.
            There is a Problem of the Day which helps
            you maintain the consistency to solve propblems.
        </p>
        <p-scrollTop target="parent"
                     [threshold]="100">
        </p-scrollTop>
    </p-scrollPanel>
</div>

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

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

输出:

Angular PrimeNG ScrollTop元素

示例2：在这里，我们将滚动顶端组件的图标改为Angular PrimeNG中的pi-angle-double-up。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Element</h3>
  
<div style="font-size: 20px">
    <h2> About GeeksforGeeks </h2>
    <p-scrollPanel [style]="{width: '200px',
                             height: '200px'}">
        <p>
            GeeksforGeeks is a computer
            science portal for geeks.
            It offers thousands of written
            articles on various computer science
            topics. Some of the topics are
            DSA, C++, C, Java, etc.
        </p>
  
        <p>
            The practice portal of GeeksforGeeks can
            be used to practice DSA problems.
            There is a Problem of the Day which helps
            you maintain the consistency to solve propblems.
        </p>
        <p-scrollTop target="parent" 
                     [threshold]="100" 
                     icon="pi pi-angle-double-up">
        </p-scrollTop>
    </p-scrollPanel>
</div>

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

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

输出:

Angular PrimeNG ScrollTop元素