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 Acordeón en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código.
Componente acordeón: Se utiliza para mostrar una sección de contenido personalizado en pestañas.
Propiedades para Acordeón:
- multiple: Especifica si se pueden activar varias pestañas al mismo tiempo. Es de tipo de datos booleano y el valor predeterminado es falso.
- estilo: Es el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass: es la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es falso.
- activeIndex: Es el índice de la pestaña activa. Acepta cualquier tipo de datos y el valor predeterminado es nulo.
- expandIcon: Es el icono de una pestaña colapsada. Es del tipo de datos de string y el valor predeterminado es pi pi-fw pi-chevron-right.
- colapsoIcon: Es el ícono de una pestaña expandida. Es del tipo de datos de string y el valor predeterminado es pi pi-fw pi-chevron-down.
Propiedades para AccordionTab:
- header :Especifica el título de la pestaña. Es de tipo de datos de string y el valor predeterminado es nulo.
- seleccionado : Define si la pestaña está activa. Es del tipo de datos booleano y el valor predeterminado es falso.
- disabled : Define si se puede seleccionar la pestaña. Es del tipo de datos booleano y el valor predeterminado es falso.
- TransitionOptions: opciones de transición de la animación. Es del tipo de datos de string y el valor predeterminado es 400 ms cubic-bezier (0.86, 0, 0.07, 1).
- caché : especifica si un panel con carga diferida debe evitar que se vuelva a cargar al volver a seleccionarlo. Es del tipo de datos booleano y el valor predeterminado es verdadero.
Evento:
- onClose: Es una devolución de llamada que se activa al hacer clic en el encabezado.
- onOpen: es una devolución de llamada que se activa cuando se expande la pestaña.
Estilo:
- p-acordeón: es el elemento contenedor.
- p-accordion-header: es el encabezado de una pestaña.
- p-accordion-content: es el contenido de una pestaña.
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: se verá así:
Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Accordion.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Accordion component</h5> <p-accordion> <p-accordionTab header="Angular PrimeNG" [selected]="true"> <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. </p> </p-accordionTab> <p-accordionTab header="Angular PrimeNG"> <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. </p> </p-accordionTab> <p-accordionTab header="Angular PrimeNG"> <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. </p> </p-accordionTab> </p-accordion>
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 { AccordionModule } from "primeng/accordion";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
AccordionModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar propiedades múltiples en el Componente Acordeón.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Accordion component</h5> <p-accordion multiple="true"> <p-accordionTab header="Angular PrimeNG" [selected]="true"> <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. </p> </p-accordionTab> <p-accordionTab header="Angular PrimeNG"> <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. </p> </p-accordionTab> <p-accordionTab header="Angular PrimeNG"> <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. </p> </p-accordionTab> </p-accordion>
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 { AccordionModule } from "primeng/accordion";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
AccordionModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia:https://primefaces.org/primeng/showcase/#/accordion