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 Sidebar en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.
Componente de barra lateral: se utiliza para crear un elemento que se superpone en los bordes de la pantalla.
Propiedades:
- visible: Especifica la visibilidad del diálogo. Es del tipo de dato booleano, el valor por defecto es falso.
- posición: Especifica la posición de la barra lateral, los valores válidos son “izquierda”, “derecha”, “abajo” y “arriba”. Es del tipo de datos de string y se deja el valor predeterminado.
- pantalla completa: se utiliza para agregar un icono de cierre al encabezado para ocultar el cuadro de diálogo. Es de tipo de datos booleano y el valor predeterminado es falso.
- appendTo: es el elemento de destino para adjuntar el cuadro de diálogo, los valores válidos son «cuerpo» o una variable de plantilla ng local de otro elemento. Acepta cualquier tipo de datos y el valor predeterminado es nulo.
- estilo: Se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass: Se utiliza para establecer la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- blockScroll: Se utiliza para especificar si bloquear el desplazamiento del documento cuando la barra lateral está activa. Es de tipo de datos booleano y el valor predeterminado es falso.
- baseZIndex: se usa para establecer el valor base de zIndex para usar en capas. Es de tipo de datos numéricos y el valor predeterminado es 0.
- autoZIndex: Se utiliza para especificar si se gestionan automáticamente las capas. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- modal: se utiliza para especificar si se muestra una máscara superpuesta detrás de la barra lateral. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- descartable: se utiliza para especificar si descartar la barra lateral al hacer clic en la máscara. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- showCloseIcon: Se utiliza para especificar si mostrar el icono de cierre. Es del tipo de datos booleano, el valor predeterminado es verdadero.
- TransitionOptions: Se utiliza para establecer las opciones de transición de la animación. Es del tipo de datos de string y el valor predeterminado es 150 ms cubic-bezier (0, 0, 0.2, 1).
- ariaCloseLabel: se utiliza para establecer la etiqueta aria del icono de cierre. Es del tipo de datos de string y el valor predeterminado es cerrar.
- closeOnEscape: se usa para especificar si al presionar la tecla escape se debe ocultar la barra lateral. Es del tipo de dato booleano, el valor predeterminado es verdadero.
Eventos:
- onShow: es una devolución de llamada que se activa cuando se muestra un cuadro de diálogo.
- onHide: es una devolución de llamada que se activa cuando se oculta un diálogo.
Estilo:
- p-sidebar: Es el elemento contenedor
- p-sidebar-left: Es el elemento contenedor de la barra lateral izquierda.
- p-sidebar-right: Es el elemento contenedor de la barra lateral derecha.
- p-sidebar-top: Es el elemento contenedor de la barra lateral superior.
- p-sidebar-bottom: Es el elemento contenedor de la barra lateral inferior.
- p-sidebar-full: Es el elemento contenedor de una barra lateral de pantalla completa.
- p-sidebar-active: Es el elemento contenedor cuando la barra lateral está visible.
- p-sidebar-close : Es el elemento ancla de cierre.
- p-sidebar-sm : Es una barra lateral de pequeño tamaño.
- p-sidebar-md : Es la barra lateral de tamaño mediano.
- p-sidebar-lg : Es una barra lateral de gran tamaño.
- p-sidebar-mask : Es la capa modal de la barra lateral.
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: Tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Sidebar.
app.component.html
<p-sidebar [(visible)]="gfg" [baseZIndex]="10000"> <h1 style="font-weight: normal">GeeksforGeeks</h1> <p>Angular PrimeNG Sidebar Component</p> <p-button type="button" (click)="gfg = false" label="OK" styleClass="p-button-info"> </p-button> <p-button type="button" (click)="gfg = false" label="Cancel" styleClass="p-button-danger"> </p-button> </p-sidebar> <p-button (click)="gfg = true" label="Click Here!"> </p-button>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SidebarModule,
ButtonModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad position en el componente Sidebar.
app.component.html
<p-sidebar [(visible)]="gfg" [baseZIndex]="10000" position="right"> <h1 style="font-weight: normal">GeeksforGeeks</h1> <p>Angular PrimeNG Sidebar Component</p> <p-button type="button" (click)="gfg = false" label="OK" styleClass="p-button-info"> </p-button> <p-button type="button" (click)="gfg = false" label="Cancel" styleClass="p-button-danger"> </p-button> </p-sidebar> <p-button (click)="gfg = true" label="Click Here!"> </p-button>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SidebarModule,
ButtonModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/sidebar