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 Splitter 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 divisor: permite a un usuario dividir dos elementos usando un divisor y utilizarlo por separado y cambiar el tamaño de los paneles.
Propiedades:
- panelSizes: Se utiliza para especificar el tamaño del. Es de tipo de datos de número y el valor predeterminado es nulo.
- minSizes: Se utiliza para especificar el tamaño mínimo de los elementos. Es de tipo de datos de número y el valor predeterminado es nulo.
- Layout: Se utiliza para establecer la orientación de los paneles. Es de tipo de datos de string y el valor predeterminado es horizontal.
- gutterSize: Se utiliza para especificar el tamaño del divisor en píxeles. Es de tipo de datos numéricos y el valor predeterminado es 4.
- stateKey: se utiliza para especificar el identificador de almacenamiento de un Splitter con estado. Es de tipo de datos de string y el valor predeterminado es nulo.
- stateStorage: se utiliza para definir dónde un divisor con estado mantiene su estado. Es de tipo de datos de string y el valor predeterminado es sesión.
- estilo: Se utiliza para especificar el estilo en línea del componente. Es del tipo de datos de objeto y el valor predeterminado es nulo.
- styleClass: Se utiliza para especificar la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- panelStyleClass: Se utiliza para especificar la clase de estilo del panel. Es de tipo de datos de string y el valor predeterminado es nulo.
- panelStyle: se utiliza para especificar el estilo en línea del panel. Es del tipo de datos de objeto y el valor predeterminado es nulo.
Evento:
- onResizeStart: es una devolución de llamada que se activa cuando comienza el cambio de tamaño.
- onResizeEnd: es una devolución de llamada que se activa cuando finaliza el cambio de tamaño.
Estilo:
- p-splitter: Es el elemento contenedor.
- p-splitter : Es el elemento contenedor durante el cambio de tamaño.
- p-splitter-horizontal : Es el elemento contenedor con disposición horizontal.
- p-splitter-vertical: Es el elemento contenedor con disposición vertical.
- p-splitter-panel : Es el elemento del panel divisor.
- p-splitter-gutter: Es el elemento de canaleta a utilizar al cambiar el tamaño de los paneles.
- p-splitter-gutter-handle: Es el elemento mango del canalón.
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 Splitter.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Splitter Component</h5> <p-splitter> <ng-template pTemplate> <div class="p-col p-ai-center p-jc-center"> 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. </div> </ng-template> <ng-template pTemplate> <div class="p-col p-ai-center p-jc-center"> 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. </div> </ng-template> </p-splitter>
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 { SplitterModule } from "primeng/splitter";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
SplitterModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de diseño en el componente divisor.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Splitter Component</h5> <p-splitter layout="vertical"> <ng-template pTemplate> <div class="p-col p-ai-center p-jc-center"> 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. </div> </ng-template> <ng-template pTemplate> <div class="p-col p-ai-center p-jc-center"> 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. </div> </ng-template> </p-splitter>
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 { SplitterModule } from "primeng/splitter";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
SplitterModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/splitter