Angular PrimeNG Splitter组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Splitter组件。我们还将学习属性、事件和造型，以及在代码中使用的语法。

分割器组件：它允许用户使用分割器分割两个元素，并分别利用它和调整面板大小。

属性:

panelSizes。它用于指定面板的大小。它是数字数据类型，默认值为空。
minSizes:它用于指定元素的最小尺寸。它是数字数据类型，默认值为空。
布局。它用于设置面板的方向。它是字符串数据类型，默认值为水平。
gutterSize。它用于指定分割线的尺寸，单位为像素。它是数字数据类型，默认值是4。
stateKey。它用于指定一个有状态的分割器的存储标识符。它是字符串数据类型，默认值为空。
stateStorage。它用于定义一个有状态的分割器保持其状态的地方。它是字符串数据类型，默认值是session。
style。它用于指定组件的内联风格。它是对象数据类型，默认值为空。
styleClass。它用于指定组件的风格类别。它的数据类型为字符串，默认值为空。
panelStyleClass。它用于指定面板的风格类别。它是字符串数据类型，默认值为空。
panelStyle。它用于指定面板的内联风格。它是对象数据类型，默认值为空。

事件:

onResizeStart。它是一个回调，在调整大小开始时被触发。
onResizeEnd: 这是一个回调，在调整大小结束时被触发。

样式:

p-splitter。它是容器元素。
p-splitter : 它是调整大小时的容器元素。
p-splitter-horizontal : 它是一个具有水平布局的容器元素。
p-splitter-vertical：它是具有垂直布局的容器元素。
p-splitter-panel : 它是分割器面板元素。
p-splitter-gutter。它是调整面板大小时使用的沟槽元素。
p-splitter-gutter-handle。它是水沟的手柄元素。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构。它将看起来像以下。

Angular PrimeNG Splitter组件

例子1：这是一个基本的例子，说明了如何使用分割器组件。

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

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 { SplitterModule } from "primeng/splitter";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SplitterModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出:

Angular PrimeNG Splitter组件

例子2：在这个例子中，我们将知道如何在分割器组件中使用layout属性。

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

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 { SplitterModule } from "primeng/splitter";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            SplitterModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Splitter组件