Angular PrimeNG垂直Splitter

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Splitter Vertical。我们还将学习属性、事件和造型，以及代码中使用的语法。

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

Angular PrimeNG Splitter Vertical属性：

panelSizes。它用于指定面板的初始尺寸。它是数字数据类型，默认值为空。
layout:它用于设置面板的方向。它是字符串数据类型，默认值为水平。
style。它用于指定组件的内联风格。它是对象数据类型，默认值为空。
minSizes:它用于指定元素的最小尺寸。它是数字数据类型，默认值为空。

语法:

<p-splitter [style]="..." [minSizes]="..." 
      [panelSizes]="..." layout="vertical">
     <ng-template pTemplate>
         ...
     </ng-template>

     <ng-template pTemplate>
         ...
     </ng-template>
</p-splitter>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG垂直Splitter

例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG Splitter Vertical。

<div style="text-align: center">
 <h2 style="color:green">GeeksforGeeks</h2>
 <h5>PrimeNG Splitter Vertical</h5>
</div>
  
<p-splitter
 [style]="{ height: '200px' }"
 styleClass="p-mb-5"
 layout="vertical">
   <ng-template pTemplate>
     <div class="p-col p-d-flex p-ai-center 
       p-jc-center">
       Angular PrimeNG is an open-source 
       framework with a rich set of native 
       Angular UI components that are used 
       for great styling and this framework
       is used to make responsive websites 
       with very much ease.
     </div>
   </ng-template>
  
   <ng-template pTemplate>
     <div class="p-col p-d-flex p-ai-center 
       p-jc-center">
       Angular PrimeNG is an open-source 
       framework with a rich set of native 
       Angular UI components that are used 
       for great styling and this framework
       is used to make responsive websites 
       with very much ease.
     </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：这是另一个例子，说明了如何使用Angular PrimeNG Splitter Vertical，内容为图像。

<div style="text-align: center">
  <h2 style="color:green">GeeksforGeeks</h2>
  <h5>PrimeNG Splitter Vertical</h5>
</div>
  
<p-splitter
    [style]="{ height: '650px', width: '650px'}"
    styleClass="p-mb-5"
    layout="vertical">
    <ng-template pTemplate>
      <div class="p-col p-d-flex 
                  p-ai-center p-jc-center">
        <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807104303/dsaselfpacedcourseoverviewimage-300x289.png" />
      </div>
    </ng-template>
  
    <ng-template pTemplate>
      <div class="p-col p-d-flex 
                  p-ai-center p-jc-center">
        <img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807104255/completeinterviewpreparationcourseoverviewimage-300x289.png"
        />
      </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