Angular UI库|Primeng组件介绍

636 阅读2分钟

Primeng是一个流行的Angular框架UI库。这是由Primetek公司的Primefaces团队创建的。

Primetek为不同的语言创建了丰富的UI库:

  • Primefaces是一个用于JSF UI可重用组件的java库。
  • PrimeUI HTML5 JQuery UI框架
  • Primeng UI库是基于typecript语言的Angular框架。
  • PrimeReact是一个用于ReactJs的完整UI组件库。
  • PrimeVue是一个用于Vuejs的UI组件工具箱。

它在Apache许可下是开源的。

Angular是谷歌的一个流行的MVC框架,用于开发软件应用。有较少的免费UI库用于丰富的UI组件。它提供的UI控件包括输入控件,如按钮标签和数据表、树和UI主题。

它支持Angular 10、11和最新版本。它提供了npm库来集成到你的项目中。

Primeng的特点列表

  • 提供丰富的内置控件
  • 具有排序、过滤和分页功能的丰富的数据表格
  • 主题设计器
  • 支持所有的浏览器
  • 原生移动端
  • 开源和免费使用
  • 响应性的相同的代码基础在所有的设备上工作,从桌面到移动设备。
  • 支持内置的主题。还提供工具来创建/定制自己的主题。
  • 与REST API集成,以消费JSON格式的数据。

表格输入UI控件

输入UI控件用于设计UI表单以获取用户的输入。Primeng提供完整的表单输入控件集和部件,如文本框文本区下拉单选按钮、多选、日历旋转器

普通按钮和SplitButton也可用。

数据控件

有几个数据控件可以以表格格式和树形格式显示数据,即TurboTable, DataView and Tree and Tree table。还有Scheduler widget是以全日历模式显示事件。还有几个可用的组件,Datascroller、orderList、Carousel组件在滑块中。

图表组件

图表基本上用于以图表的形式显示数据。Priming charts基于ChartJS库。你需要先安装这个库来使用图表。

有条形图、线形图、饼图、PolarArea图、Doughnut图。

PrimeDesigner API

这是一个强大的设计师工具,可以在primeng风格的基础上设计自己的主题。它支持Sass风格,这不是免费的,但有许可证。

Primeng图标

这个库中使用的所有组件都在内部使用自定义图标库,称为primicons

这些图标被Primefaces和PrimeUI库使用。这个库还使用了font awesome icons库,以及这个库。

这个库可以在你的项目中以多种方式使用。

  • 使用Primeng与Angular CLI工具
  • 使用SystemJS库
  • 使用Primeng与web pack bundler

以下是Primeng组件及其模块的列表

组件名称模块
<p-accordion><p-accordionTab>手风琴组件
<p-toast><p-toast>[Primeng Toast] (primeng-angular-toast-example)
<p-tree><p-tree>树形模块
<p-table></p-table>表模块