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 TieredMenu 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 TieredMenu: permite a un usuario hacer el menú en forma de niveles.
Propiedades:
- modelo : Es una array de elementos de menú. Es de 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.
- appendTo : especifica el elemento de destino para adjuntar la superposición y los valores válidos son «cuerpo» o una variable de plantilla ng local de otro elemento. Es de tipo de datos de array y el valor predeterminado es nulo.
- style : Establece un estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass : Establece la clase de estilo del componente. Acepta el tipo de datos de string y el valor predeterminado es nulo.
- baseZIndex : es un valor base de zIndex para usar en capas. Acepta el número como tipo de datos de 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.
- autoDisplay : especifica si mostrar un submenú raíz al pasar el mouse. Es del tipo de datos booleano y el valor predeterminado es falso.
- showTransitionOptions : Muestra 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 : Muestra opciones de transición para ocultar la animación. Acepta el tipo de datos de string y el valor predeterminado es .1s lineal.
Métodos:
- 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-tieredmenu: Es un elemento contenedor.
- p-menu-list: Es un elemento de lista.
- p-menuitem : Es un elemento menuitem.
- 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, tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente TieredMenu.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG TieredMenu Component</h5> <p-tieredMenu [model]="gfg"></p-tieredMenu>
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: "JavaScript",
items: [
{
label: "JavaScript1",
items: [
{
label: "JavaScript1.1",
},
{
label: "JavaScript1.2",
},
],
},
{
label: "JavaScript2",
},
{
label: "JavaScript3",
},
],
},
{
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 { TieredMenuModule } from "primeng/tieredmenu";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
TieredMenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, crearemos el componente de menú en niveles mediante una ventana emergente.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG TieredMenu Component</h5> <button #btn type="button" pButton label="Click Here" (click)="menu.toggle($event)"></button> <p-tieredMenu #menu [model]="gfg" [popup]="true"></p-tieredMenu>
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: 'JavaScript',
items: [
{
label: 'JavaScript1',
items: [
{
label: 'JavaScript1.1'
},
{
label: 'JavaScript1.2'
}
]
},
{
label: 'JavaScript2'
},
{
label: 'JavaScript3'
}
]
},
{
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 { TieredMenuModule } from 'primeng/tieredmenu';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TieredMenuModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/tieredmenu