极客教程Angular PrimeNG Splitter嵌套面板
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来进行伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Splitter Nested Panels。我们还将了解属性、事件和造型，以及代码中使用的语法。
Splitter组件允许用户使用Splitter分割两个元素，并分别利用它和调整面板大小。嵌套式Splitter面板可用于结合2个以上的面板，以创建一个先进的布局结构。
Angular PrimeNG Splitter Nested Panels属性：
- panelSizes。它用于指定面板的初始尺寸。它是数字数据类型，默认值为空。
- layout:它用于设置面板的方向。它是字符串数据类型，默认值为水平。
- style。它用于指定组件的内联风格。它是对象数据类型，默认值为空。
- minSizes:它用于指定元素的最小尺寸。它是数字数据类型，默认值为空。
语法:
<p-splitter [style]="..." [panelSizes]="...">
<ng-template pTemplate>
...
</ng-template>
<ng-template pTemplate>
<p-splitter layout="..." [panelSizes]="...">
<ng-template pTemplate>
...
</ng-template>
<ng-template pTemplate>
...
</ng-template>
</p-splitter>
</ng-template>
</p-splitter>
</div>
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
例子1：这是一个基本的例子，说明了如何使用Angular PrimeNG Splitter Nested Panels。
<div style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<h5>PrimeNG Splitter Nested Panels</h5>
</div>
<p-splitter
[style]="{ height: '250px' }"
[panelSizes]="[20, 80]"
[minSizes]="[10, 50]"
styleClass="mb-5">
<ng-template pTemplate>
<div class="col flex align-items-center
justify-content-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>
<p-splitter layout="vertical" [panelSizes]="[15, 85]">
<ng-template pTemplate>
<div class="flex align-items-center
justify-content-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>
<p-splitter [panelSizes]="[30, 70]">
<ng-template pTemplate>
<div class="col flex align-items-center
justify-content-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="col flex align-items-center
justify-content-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>
</ng-template>
</p-splitter>
</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 Nested Panels与一些不同的[ panelSizes]和内容作为一个图像。
<div style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<h5>PrimeNG Splitter Nested Panels</h5>
</div>
<p-splitter
[style]="{ height: '600px' }"
[panelSizes]="[20, 80]"
[minSizes]="[10, 50]"
styleClass="mb-5">
<ng-template pTemplate>
<div class="col flex align-items-center
justify-content-center">
<img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807104303/dsaselfpacedcourseoverviewimage-300x289.png" />
</div>
</ng-template>
<ng-template pTemplate>
<p-splitter layout="vertical" [panelSizes]="[15, 85]">
<ng-template pTemplate>
<p-splitter [panelSizes]="[30, 70]">
<ng-template pTemplate>
<div class="col flex align-items-center
justify-content-center">
<img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807104255/completeinterviewpreparationcourseoverviewimage-300x289.png" />
</div>
</ng-template>
<ng-template pTemplate>
<div class="col flex align-items-center
justify-content-center">
<img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807130625/testseries-300x289.png" />
</div>
</ng-template>
</p-splitter>
</ng-template>
<ng-template pTemplate>
<div class="flex align-items-center
justify-content-center">
<img alt="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807130734/cppstl-300x289.png" />
</div>
</ng-template>
</p-splitter>
</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 {}
输出:
