Angular PrimeNG图像指示器模板制作
Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件,人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中,我们将看到Angular PrimeNG图像指示器模板。
图像组件用于向用户展示一张具有预览和基本转换功能的图像。在预览模式下,当图像被用户悬停时,默认会显示一个眼睛图标。这一行为可以通过使用指标模板来改变,在这里我们可以定义自定义内容。
Angular PrimeNG图像指示器模板:
- indicator:指示器模板用于定制叠加内容,当我们将鼠标悬停在启用了预览功能的图片上时,该内容是可见的。
语法:
创建Angular应用程序并安装模块:
第1步:使用以下命令创建一个Angular应用程序。
第2步 。在创建你的项目文件夹即myapp后,使用以下命令移动到它。
第3步在你给定的目录中安装PrimeNG。
项目结构:完成上述步骤后,其结构将如下所示。
Project Structure
实例1:这是图像指标模板的基本实例。这里,默认的眼睛图标被替换为 “pi-box “图标。
输出:
实例2:这是指标模板化的另一个例子。在这里,我们在指标模板上添加了一个图标和一个段落。
输出: