Componente angular PrimeNG ScrollTop

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente ScrollTop en Angular PrimeNG.

Componente ScrollTop: se utiliza para crear un componente que se muestra después de una cierta posición de desplazamiento para navegar a la parte superior de la página.

Propiedades:

• target : Especifica el destino del scrollTop, los valores válidos son “window” y “parent”. Es de tipo de datos de string y el valor predeterminado es una ventana.
• umbral : Es el valor umbral a partir del cual el elemento es visible. Acepta el tipo de datos numéricos como entrada y el valor predeterminado es 400.
• icon : Es el icono a mostrar. Es del tipo de datos de string y el valor predeterminado es pi pi-chevron-up.
• comportamiento : Es el comportamiento de desplazamiento, animación agregada «suave» y desplazamientos «automáticos» con un salto. Es del tipo de datos de string y el valor predeterminado es suave.
• style : Establece un estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass : Establece la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.

Estilo:

• p-scrolltop: Es el elemento contenedor.
• p-scrolltop-sticky: es el elemento contenedor cuando se adjunta a su padre.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3 : Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente scrollTop. El valor del umbral se establece en 150, por lo que el icono scrollTop se mostrará después de desplazarse 150 píxeles.

<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 {}

Producción:

Ejemplo 2: en este ejemplo, estableceremos la propiedad de comportamiento en automático, por lo que la animación no es visible mientras se desplaza hacia la parte superior del elemento y el umbral se establece en 0, por lo que el ícono scrollTop se muestra instantáneamente mientras se desplaza.

<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 {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/scrolltop