Angular PrimeNG avatar的属性

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG的Avatar属性。

头像组件是用来用标签、图标和图像表示人的头像的。头像的使用增加了设计的简单性，并使其对用户友好。

Angular PrimeNG头像属性：

label。它定义了在头像中显示的文本。它的类型是字符串，默认值是空。
icon:它定义了在头像中显示的图标。它的类型是字符串，默认值是空。
img。它用于定义图像的URL，以显示为头像。它的类型是字符串，默认值是空。
size。它告诉人们头像的大小。接受的值是 “大 “和 “xlarge”。
shape。它告诉头像的形状。可接受的值是 “方形 “和 “圆形”。
style。它是该组件的内联样式。
styleClass。这是该组件的风格类。

语法:

<p-avatar 
    icon="pi pi-star" 
    shape="circle" 
    size="large"
    ...
    >
</p-avatar>

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

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

ng new appname

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

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构。按照上述步骤，项目结构将看起来像这样。

阿凡达的Angular PrimeNG属性

Project Structure

例子1：在这个例子中，我们使用头像的icon和size属性来显示头像的图标。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Avatar Properties</h3>
  
<p-avatar icon="pi pi-cog" size="large">
</p-avatar>
<p-avatar icon="pi pi-lock" size="large">
</p-avatar>
<p-avatar icon="pi pi-lock-open" size="large">
</p-avatar>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent { }

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

输出:

阿凡达的Angular PrimeNG属性

例子2：在这个例子中，我们使用了头像的shape属性来使头像变圆，使用label属性来使用文本作为头像。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Avatar Properties</h3>
  
<p-avatar label="V" size="large" shape="circle">
</p-avatar>
<p-avatar label="P" size="large" shape="circle">
</p-avatar>
<p-avatar label="S" size="large" shape="circle">
</p-avatar>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent { }

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

输出:

阿凡达的Angular PrimeNG属性