Angular PrimeNG ScrollTop属性

Angular PrimeNG是一个用于Angular应用程序的交互式UI组件的集合。开发人员可以使用这些组件在短时间内制作出漂亮的、响应式的网页界面，因为大多数组件都实现了所有必要的功能。在这篇文章中，我们将讨论Angular PrimeNG ScrollTop属性。

ScrollTop组件是在用户向上滚动到某个滚动位置后显示的，用于快速进入页面顶部。

Angular PrimeNG ScrollTop属性：

target: 它定义了滚动顶端的目标。它接受字符串值，有效值是 “window “和 “parent”。默认值是 “window”。
threshold。它定义了当滚动顶部切换其可见性时目标的垂直滚动位置。它接受数字值，默认值是400。
icon:它是显示在滚动顶端组件中的图标。它接受字符串值，默认值是 “pi pi-chevron-up”。
behavior。它定义了滚动顶部组件的滚动行为。它接受字符串值，有效值是 “平滑 “和 “自动”。默认值是 “平滑”。
style。它是组件的内联风格。默认值为空。
styleClass。它是组件的风格类。默认值为空。

语法:

<p-scrollTop 
    target="..."
    icon="..."
    behavior="..."
    [threshold]="...">
</p-scrollTop>

创建Angular应用程序并安装模块：

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

ng new appname

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

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG ScrollTop属性

Project Structure

例子1：在这个例子中，我们使用了滚动顶端组件的threshold属性，在100像素后显示滚动到顶端的按钮，并使用target属性来针对父级。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG ScrollTop Properties</h3>
  
<div>
    <h3>What is Angular PrimeNG</h3>
    <p-scrollPanel 
        [style]="{width: '200px', height: '200px'}">
        <p>
            Angular PrimeNG is a collection of 
            Interactive UI components for Angular 
            applications. Developers can use these
            components to make beautiful and 
            responsive web interfaces in no time 
            as most of the components have all 
            the necessary functions implemented.
  
            It is a very popular UI library 
            with over 7.5k github stars, 
            3.5k+ forks and 350+ contributors. 
        </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',
    styleUrls: ['./app.component.css'],
})
export class AppComponent { }

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

输出:

Angular PrimeNG ScrollTop属性

例子2：在这个例子中，我们使用滚动顶端组件的图标属性，将图标改为 “pi pi-arrow-up”。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG ScrollTop Properties</h3>
  
<div>
    <h3>What is Angular PrimeNG</h3>
    <p-scrollPanel 
        [style]="{width: '200px', height: '200px'}">
        <p>
            Angular PrimeNG is a collection of 
            Interactive UI components for Angular 
            applications. Developers can use these
            components to make beautiful and 
            responsive web interfaces in no time 
            as most of the components have all 
            the necessary functions implemented.
  
            It is a very popular UI library 
            with over 7.5k github stars, 
            3.5k+ forks and 350+ contributors. 
        </p>
        <p-scrollTop 
            target="parent"
            icon="pi pi-arrow-up" 
            [threshold]="100"></p-scrollTop>
    </p-scrollPanel>
</div>

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

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

输出:

Angular PrimeNG ScrollTop属性