Angular PrimeNG图像指示器模板制作

Angular PrimeNG图像指示器模板制作

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件,人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中,我们将看到Angular PrimeNG图像指示器模板。

图像组件用于向用户展示一张具有预览和基本转换功能的图像。在预览模式下,当图像被用户悬停时,默认会显示一个眼睛图标。这一行为可以通过使用指标模板来改变,在这里我们可以定义自定义内容。

Angular PrimeNG图像指示器模板:

  • indicator:指示器模板用于定制叠加内容,当我们将鼠标悬停在启用了预览功能的图片上时,该内容是可见的。

语法:

<p-image 
    src="..."
    [preview]="..." 
    alt="...">

    <ng-template pTemplate="indicator">
        ...
    </ng-template>
</p-image>
HTML

创建Angular应用程序并安装模块:

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

ng new myapp
JavaScript

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

cd myapp
JavaScript

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

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

项目结构:完成上述步骤后,其结构将如下所示。

Angular PrimeNG图像指示器模板制作

Project Structure

实例1:这是图像指标模板的基本实例。这里,默认的眼睛图标被替换为 “pi-box “图标。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
  
    <ng-template pTemplate="indicator">
        <i 
            class="pi pi-box" 
            style="font-size: 24px;">
        </i>
    </ng-template>
</p-image>
HTML
import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent { }
JavaScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }
JavaScript

输出:

Angular PrimeNG图像指示器模板制作

实例2:这是指标模板化的另一个例子。在这里,我们在指标模板上添加了一个图标和一个段落。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
  
    <ng-template pTemplate="indicator">
        <i class="pi pi-external-link mr-2"></i>
        <div><p>Preview Image</p></div>
    </ng-template>
</p-image>
HTML
import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent { }
JavaScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }
JavaScript

输出:

Angular PrimeNG图像指示器模板制作

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程