Componente de panel PrimeNG angular

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 Panel 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 Panel: Nos permite hacer un elemento que contenga un encabezado y algún contenido asociado con ese encabezado. 

Propiedades:

• header: Es el texto de cabecera del panel. Es de tipo de datos de string, el valor predeterminado es nulo.
• toggleable: Define que el contenido del panel puede ser expandido y colapsado o no. Es de tipo de dato booleano, el valor por defecto es false.
• colapsado: Define el estado inicial del contenido del panel. Es de tipo de dato booleano, el valor por defecto es false.
• estilo: Es un estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass: Es la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• expandIcon: es el icono de expansión del botón de alternar. Es de tipo de datos de string, el valor predeterminado es pi pi-plus.
• colapsoIcon: Es el icono colapsado del botón de alternancia. Es de tipo de datos de string, el valor predeterminado es pi pi-menos.
• showHeader: Especifica si no se puede mostrar el encabezado de un panel. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• TransitionOptions: Es la opción de transición de la animación. Es del tipo de datos de string, el valor predeterminado es 400 ms cubic-bezier (0.86, 0, 0.07, 1).
• toggler: Especifica si el elemento toggler alternará el contenido del panel. Es de tipo de datos de string, el valor predeterminado es un icono.

Evento:

• onBeforeToggle: es una devolución de llamada que se activa antes de alternar el contenido.
• onAfterToggle: es una devolución de llamada que se activa después de alternar el contenido.

Estilo:

• p-panel : Es el elemento contenedor.
• p-panel-titlebar: Es la sección de cabecera.
• p-panel-title: Es el texto del título del panel.
• p-panel-titlebar-toggler: Es el icono de alternancia.
• p-panel-content: Es el contenido del panel.

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 Panel.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Panel Component</h5>
<p-panel 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-panel>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PanelModule } from "primeng/panel";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            PanelModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad conmutable en el componente Panel.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Panel Component</h5>
<p-panel header="Angular PrimeNG" toggleable="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-panel>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PanelModule } from "primeng/panel";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            PanelModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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