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, veremos cómo usar el componente SlideMenu en Angular PrimeNG. También aprenderemos sobre las propiedades, los métodos, el estilo junto con sus sintaxis que se utilizarán en el código.
Componente SlideMenu: se utiliza para mostrar la lista del menú en forma de animación deslizante que ayuda a ver los elementos del menú paso a paso.
Propiedades:
- modelo : Es una array de elementos de menú. Acepta el tipo de datos de array y el valor predeterminado es nulo.
- popup : Define si el menú se mostraría como una ventana emergente. Es del tipo de datos booleano y el valor predeterminado es falso.
- style : Es un estilo en línea del componente. Acepta el tipo de datos de string y el valor predeterminado es nulo.
- styleClass : Es la clase de estilo del componente. Acepta el tipo de datos de string y el valor predeterminado es nulo.
- Easing : Es la animación a utilizar para el deslizamiento. Acepta el tipo de datos de string y el valor predeterminado es salida lenta.
- effectDuration : Es la duración de la animación deslizante en milisegundos. Acepta cualquier tipo de datos como entrada y el valor predeterminado es 250.
- backLabel : Es la etiqueta de un elemento para navegar hacia atrás. Acepta el tipo de datos de string y el valor predeterminado está de vuelta.
- menuWidth : Es el ancho de los submenús. Acepta el tipo de datos numéricos como entrada y el valor predeterminado es 180.
- viewportHeight : es la altura del área desplazable, aparece una barra de desplazamiento si la altura de un menú es más larga que este valor. Acepta el tipo de datos numéricos como entrada y el valor predeterminado es 175.
- appendTo : es el elemento de destino para adjuntar la superposición, los valores válidos son «cuerpo» o una variable de plantilla ng local de otro elemento. Acepta cualquier tipo de datos como entrada y el valor predeterminado es nulo.
- baseZIndex : es el valor base de zIndex para usar en capas. Acepta el tipo de datos numéricos como entrada y el valor predeterminado es 0.
- autoZIndex : Especifica si administrar automáticamente las capas. Es del tipo de datos booleano y el valor predeterminado es verdadero.
- showTransitionOptions : Estas son las opciones de transición para mostrar la animación. Acepta el tipo de datos de string y el valor predeterminado es .12s cubic-bezier (0, 0, 0.2, 1).
- hideTransitionOptions : Estas son las opciones de transición para ocultar la animación. Acepta el tipo de datos de string y el valor predeterminado es .1s lineal.
Método:
- alternar: se utiliza para alternar la visibilidad del menú emergente.
- show: Se utiliza para mostrar el menú emergente.
- ocultar: Se utiliza para ocultar el menú emergente.
Estilo:
- p-slidemenu : Es un elemento contenedor.
- p-slidemenu-wrapper : Es un contenedor de contenido.
- p-slidemenu-content : Es un elemento de contenido.
- p-slidemenu-backward : Es un elemento para navegar al menú anterior al hacer clic.
- p-menu-list: Es un elemento de lista.
- p-menuitem: Es un elemento de menú.
- p-menuitem-text: Es una etiqueta de un elemento de menú.
- p-menuitem-icon : Es un icono de un elemento de menú.
- p-submenu-icon : Es el icono de flecha de un submenú.
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, se verá así:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente SlideMenu.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG PanelMenu Component</h5> <p-slideMenu [model]="gfg" ></p-slideMenu>
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: 'HTML',
items: [
{
label: 'HTML 1'
},
{
label: 'HTML 2'
}
]
},
{
label: 'Angular',
items: [
{
label: 'Angular 1'
},
{
label: 'Angular 2'
}
]
}
];
}
}
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 { SlideMenuModule } from 'primeng/slidemenu';
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
SlideMenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, crearemos un componente de menú deslizante utilizando una ventana emergente.
app.component.html
<h5>PrimeNG SlideMenu Component</h5> <button #btn type="button" pButton label="Click Here" (click)="menu.toggle($event)"> </button> <p-slideMenu #menu [model]="gfg" [popup]="true" [viewportHeight]="250"> </p-slideMenu>
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: 'HTML',
items: [
{
label: 'HTML 1'
},
{
label: 'HTML 2'
}
]
},
{
label: 'Angular',
items: [
{
label: 'Angular 1'
},
{
label: 'Angular 2'
}
]
}
];
}
}
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 { SlideMenuModule } from 'primeng/slidemenu';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SlideMenuModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/slidemenu