欢迎来到Introzo百科

Introzo百科

当前位置：网站首页 > 技术 > Angular PrimeNG 面板组件

Angular PrimeNG 面板组件

日期：2023-09-29 20:33

Angular PrimeNG 是一个开源框架，具有一组丰富的本机 Angular UI 组件，可用于出色的样式设置，并且该框架可用于非常轻松地制作响应式网站。在本文中，我们将学习如何在 Angular PrimeNG 中使用面板组件。我们还将了解将在代码中使用的属性、事件和样式及其语法。

面板组件： 它允许我们创建一个包含标题以及与该标题相关的一些内容的元素。

特点：

标题：面板的标题文本。它是字符串数据类型，默认值为空。
可切换： 定义面板内容是否可以展开和折叠。它是一个布尔数据类型，默认值为 false。
折叠： 它定义面板内容的初始状态。它是一个布尔数据类型，默认值为 false。
样式：是组件的内联样式。它是字符串数据类型，默认值为空。
styleClass： 组件的样式类。它是字符串数据类型，默认值为空。
expandIcon： 这是切换按钮的展开图标。它是字符串数据类型，默认值为 pi pi-plus。
collapseIcon： 这是切换按钮的折叠图标。它是字符串数据类型，默认值为 pi pi-minus。
showHeader： 指定是否无法显示面板标题。它是布尔数据类型，默认值为 true。
transitionOptions： 动画的过渡选项。它是字符串数据类型，默认值为 400ms 三次贝塞尔曲线 (0.86, 0, 0.07, 1)。
切换器：指定切换器元素是否切换面板内容。它是字符串数据类型，默认值为图标。

活动：

onBeforeToggle： 是内容切换前触发的回调。
onAfterToggle： 是内容切换后触发的回调。

风格：

p-panel：它是一个容器元素。
p-panel-titlebar： 这是标题部分。
p-panel-title：面板 的标题文本。
p-panel-titlebar-toggler：它是切换图标。
p-panel-content：面板的内容。

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

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

新建appname

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

cd appname

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

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

项目结构：它看起来像这样：

示例 1： 这是一个基本示例，展示了如何使用面板组件。

app.component.html

GeeksforGeeks
PrimeNG 面板组件


Angular PrimeNG是一个使用的框架
用 Angular 创建组件
具有出色的样式和这个框架
非常容易使用并且习惯
制作响应式网站。

app.component.ts

从'@angular/core'导入{组件}；

@成分（{
选择器：'我的应用程序'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
导出类 AppComponent {}

app.module.ts

导入 { NgModule } from "@angular/core";
从“@angular/platform-browser”导入{BrowserModule}；
导入 { 浏览器动画模块 }
来自“@angular/platform-browser/animations”；

从“./app.component”导入{AppComponent}；
从“primeng/panel”导入{PanelModule}；

@NgModule({
导入：[浏览器模块，
浏览器动画模块，
面板模块],
声明：[AppComponent]，
引导程序：[AppComponent]，
})
导出类 AppModule {}

app.component.html

GeeksforGeeks
PrimeNG 面板组件


Angular PrimeNG是一个使用的框架
使用 Angular 创建组件
很棒的样式，这个框架是非常容易使用并用于制作
响应式网站。

app.component.ts

从'@angular/core'导入{组件}；

@成分（{
选择器：'我的应用程序'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
导出类 AppComponent {}

app.module.ts

从“@angular/core”导入{NgModule}；
从“@angular/platform-browser”导入{BrowserModule}；
导入 { 浏览器动画模块 }
来自“@angular/platform-browser/animations”；

从“./app.component”导入{AppComponent}；
从“primeng/panel”导入{PanelModule}；

@NgModule({
导入：[浏览器模块，
浏览器动画模块，
面板模块],
声明：[AppComponent]，
引导程序：[AppComponent]，
})
导出类 AppModule {}

app.component.ts

从 '@angular/core' 导入 { Component };

@成分（{
选择器：'我的应用程序'，
templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
导出类 AppComponent {}

app.module.ts

从“@angular/core”导入{NgModule}；
从“@angular/platform-browser”导入{BrowserModule}；
导入 { 浏览器动画模块 }
来自“@angular/platform-browser/animations”；

从“./app.component”导入{AppComponent}；
从“primeng/panel”导入{PanelModule}；

@NgModule({
导入：[浏览器模块，
浏览器动画模块，
面板模块],
声明：[AppComponent]，
引导程序：[AppComponent]，
})
导出类 AppModule {}

输出：

示例 2：在此示例中，我们将了解如何在面板组件中使用 可切换 属性。

app.component.html

GeeksforGeeks
PrimeNG 面板组件


Angular PrimeNG是一个使用的框架使用 Angular 创建组件
很棒的样式，这个框架是
非常容易使用并用于制作
响应式网站。

app.component.ts

从'@angular/core'导入{组件}；

@成分（{
选择器：'我的应用程序'，
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
导出类 AppComponent {}

app.module.ts

从“@angular/core”导入{NgModule}；
从“@angular/platform-browser”导入{BrowserModule}；
导入 { 浏览器动画模块 }
来自“@angular/platform-browser/animations”；

从“./app.component”导入{AppComponent}；
从“primeng/panel”导入{PanelModule}；

@NgModule({
导入：[浏览器模块，
浏览器动画模块，
面板模块],
声明：[AppComponent]，
引导程序：[AppComponent]，
})
导出类 AppModule {}

输出：

参考： https://www.introzo.com/primeng/showcase/#/panel

最近发表

猜你喜欢

Angular PrimeNG 面板组件

app.component.html

GeeksforGeeks

PrimeNG 面板组件

app.component.ts

app.module.ts

app.component.html

GeeksforGeeks

PrimeNG 面板组件

app.component.ts

app.module.ts

app.component.ts

app.module.ts

app.component.html

GeeksforGeeks

PrimeNG 面板组件

app.component.ts

app.module.ts

相关文章