Angular PrimeNG BlockUI组件
Angular PrimeNG是一个开源框架,它拥有丰富的原生Angular UI组件,这些组件被用来做伟大的造型,这个框架被用来制作响应式网站,非常容易。在这篇文章中,我们将了解如何在Angular PrimeNG中使用BlockUI组件。
BlockUI组件:它用于阻止组件或整个页面。
属性:
- blocked : 它用于控制阻塞状态。它是布尔数据类型,默认值是false。
- target : 它用于定义本地ng-template变量的名称,指向另一个组件。它是字符串数据类型,默认值为文档。
- baseZIndex : 它用于定义分层中使用的基础Z指数值。它是数字数据类型,默认值是0。
- autoZIndex : 它用于是否自动管理分层。它是布尔数据类型,默认值为true。
- styleClass : 它用于定义组件的风格类别。它是字符串数据类型,默认值是false。
Styling:
- p-blockui:它是遮挡元素。
- p-blockui-document:它是全屏模式下的遮挡元素。
创建Angular应用程序和模块安装。
- 第1步:使用以下命令创建一个Angular应用程序。
- 第2步:在创建你的项目文件夹即appname后,使用以下命令移动到它。
- 第3步:在你给定的目录中安装PrimeNG。
项目结构:它将看起来像如下。
例子1:这是一个基本的例子,展示了如何使用blockUI组件。
输出:
例子2:在这个例子中,我们将知道如何在消息组件中阻止一个面板。
输出: