Angular PrimeNG头像组件

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

Avatar 组件：用于将人表示为图标、图像或标签。

头像属性：

• label ：用于定义要显示的文本。它是字符串数据类型，默认值为空。
• icon ：用于定义要显示的图标。它是字符串数据类型，默认值为空。
• image ：用于定义要显示的图像。它是字符串数据类型，默认值为空。
• size ：用于设置元素的大小，有效选项为“large”和“xlarge”。它是字符串数据类型，默认值为空。
• shape ：用于设置元素的形状，有效选项为“方形”和“圆形”。它是字符串数据类型，默认值为正方形。
• style ：用于设置组件的内联样式。它是对象数据类型，默认值为空。
• styleClass ：用于定义组件的样式类。它是字符串数据类型，默认值为空。

AvatarGroup 的属性：

• style ：在这里，在这种情况下，也用于设置组件的内联样式。它是对象数据类型，默认值为空。
• styleClass ：在这里，在这种情况下，也用于定义组件的样式类。它是字符串数据类型，默认值为空。

头像造型：

• p-avatar ：它是容器元素。
• p-avatar-image ：它是图像模式下的容器元素。
• p-avatar-circle：是圆形的容器元素。
• p-avatar-text ：它是头像的文本元素。
• p-avatar-icon : 头像的样式图标。
• p-avatar-lg : 大尺寸的容器元素。
• p-avatar-xl：它是xlarge尺寸的容器元素。

AvatarGroup 的样式：

• p-avatar-group：用于元素的容器。

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

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

  ng new appname

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

  cd appname

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

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

项目结构：它将如下所示：

示例 1：这是展示如何使用头像组件的基本示例。

app.component.html

GeeksforGeeks
PrimeNg Avatar Component



  

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            AvatarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出：

示例 2：在此示例中，我们将制作带有图标的圆形头像。

app.component.html

  
Circle shaped avatar with icon
  

    
    
  
  

    
    
  
  

    
    
  
  

    
  

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            AvatarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出：

参考： https://primefaces.org/primeng/showcase/#/avatar