Angular PrimeNG Splitter最小尺寸

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

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

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

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

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

<div style="text-align: center">
    <h2 style="color:green">GeeksforGeeks</h2>
    <h5>PrimeNG Splitter Minimum Sizes</h5>
</div>
  
<p-splitter [style]="{ height: '150px' }" 
    [panelSizes]="[30, 70]" 
    [minSizes]="[20,30]">
       <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 {}

输出:

例子2：这是另一个例子，说明了如何使用Angular PrimeNG Splitter Minimum Sizes与一些不同的[minSizes]值和内容作为一个图像。

<div style="text-align: center">
  <h2 style="color:green">GeeksforGeeks</h2>
  <h5>PrimeNG Splitter Minimum Sizes</h5>
</div>
  
<p-splitter [panelSizes]="[60, 40]" 
     [minSizes]="[20, 40]">
    <ng-template pTemplate>
      <div class="p-col 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-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 {}

输出: