Angular PrimeNG Panel 常规属性

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用Panel Regular。我们还将学习属性，以及在代码中使用的语法。

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

语法:

<p-panel header="....">
    <p>.....</p>
</p-panel>

Angular PrimeNG面板常规属性：

• header。它是面板的标题文本。它是字符串数据类型，默认值为空。

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

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

ng new appname

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

cd appname

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

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

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

运行应用程序的步骤：运行以下命令。

ng serve --open

例子1：下面是演示使用Angular PrimeNG Panel Regular的基本例子。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Panel Regular</h5>
<p-panel header="GeeksforGeeks">
    <p>
        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.
    </p>
</p-panel>

• app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {}

• 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({
  imports: [
      BrowserModule, 
      BrowserAnimationsModule, 
      PanelModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

例子2：下面是另一个例子，演示了使用图像的Angular PrimeNG Panel Regular。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Panel Regular</h5>
<p-panel header="GeeksforGeeks">
    <p>
           <img alt="gfg" height="200px" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
    </p>
</p-panel>

• app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {}

• 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({
  imports: [
      BrowserModule, 
      BrowserAnimationsModule, 
      PanelModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出: