Angular PrimeNG面板属性

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常容易。在这篇文章中，我们将了解Angular PrimeNG中面板组件的不同属性。

面板组件允许我们制作一个包含头和一些与该头相关的内容的元素。

Panel 属性:

header。它是面板的标题文本。它是字符串数据类型，默认值为空。
toggleable。它定义了面板的内容是否可以被展开和折叠。它是布尔数据类型，默认值是false。
collapsed：它定义了面板内容的初始状态。它是布尔数据类型，默认值是false。
style。它是组件的内联样式。它是字符串数据类型，默认值为空。
styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
expandIcon：它是切换按钮的扩展图标。它是字符串数据类型，默认值是pi-plus。
collapseIcon：它是切换按钮的折叠图标。它是字符串数据类型，默认值是pi pi-minus。
showHeader。它指定一个面板的标题是否不能显示。它是布尔数据类型，默认值为true。
transitionOptions。这是动画的过渡选项。它是字符串数据类型，默认值是400ms cubic-bezier（0.86, 0, 0.07, 1）。
toggler：它指定了是否用toggler元素来切换面板的内容。它是字符串数据类型，默认值是一个图标。
iconPos。它用于定义图标的位置。

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

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

步骤2：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第四步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：运行上述步骤中提到的命令后，它将看起来像如下。

Angular PrimeNG面板属性

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

例子1：我们正在创建一个显示Angular PrimeNG的UI 面板属性。

app.component.html:

<div style="margin:100px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Panel Properties</h3>
    <p-panel header="DSA Self Paced Course" 
        [toggleable]="true" [collapsed]="true" 
        collapseIcon="pi pi-angle-double-up"
        expandIcon="pi pi-angle-double-down">
        <p>
            Most popular course on DSA trusted by 
            over 75,000 students! Built with years 
            of experience by industry experts and 
            gives you a complete package of video 
            lectures, practice problems, quizzes, 
            discussion forums and contests. Start 
            Today!
        </p>
    </p-panel>
</div>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PanelModule } from "primeng/panel";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        PanelModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG面板属性

例子2：我们正在创建一个用户界面，显示上述面板的属性。

app.component.html

<div style="margin:100px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Panel Properties</h3>
    <p-panel header="Hi Geek!" [toggleable]="true" 
        [collapsed]="true" collapseIcon="pi pi-angle-double-up"
        expandIcon="pi pi-angle-double-down" iconPos="center">
        <p>
            Welcome to Geeks For Geeks!<br />Billions of Users, 
            Millions of Articles Published, Thousands Got Hired 
            by Top Companies and the numbers are still growing.
        </p>
    </p-panel>
</div>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PanelModule } from "primeng/panel";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        PanelModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG面板属性