角度的PrimeNG分流器水平

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

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

Angular PrimeNG分割器的水平属性：

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

语法:

<p-splitter [style]="..." [minSizes]="..." 
    [panelSizes]="..." layout="...">
    <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

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

角度的PrimeNG分流器水平

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

<div style="text-align: center">
  <h2 style="color:green">GeeksforGeeks</h2>
  <h5>PrimeNG Splitter Horizontal</h5>
</div>
  
<p-splitter
  [style]="{ height: '200px' }"
  styleClass="p-mb-5"
  layout="horizontal">
    <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 {}

输出:

角度的PrimeNG分流器水平

例子2：这是另一个例子，说明了如何使用Angular PrimeNG Splitter Horizontal，内容是一张图片。

<div style="text-align: center">
  <h2 style="color:green">GeeksforGeeks</h2>
  <h5>PrimeNG Splitter Horizontal</h5>
</div>
  
<p-splitter
      [style]="{ height: '400px' }"
      styleClass="p-mb-5"
      layout="horizontal">
    <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 {}

输出:

角度的PrimeNG分流器水平