Angular PrimeNG avatar的风格

Angular PrimeNG是一个用于Angular应用程序的交互式UI组件的集合。开发人员可以使用这些组件在短时间内制作出漂亮的、响应式的网页界面，因为大多数组件都实现了所有必要的功能。在这篇文章中，我们将讨论Angular PrimeNG的Avatar造型。

头像组件用于使用图标、图像或标签来代表一个人或实体。使用头像可以使设计更加吸引人，让人眼前一亮。

Angular PrimeNG avatar造型类：

p-avatar: 该类应用于头像的容器元素。
p-avatar-image。在图像模式下，该类被应用于头像的容器元素。
p-avatar-circle。当头像呈圆形时，该类将应用于头像的容器元素。
p-avatar-text。这个类别适用于头像的文本。
p-avatar-icon。这个类别适用于头像的图标。
p-avatar-lg。当头像的尺寸较大时，该类将应用于头像的容器元素。
p-avatar-xl: 当头像的尺寸超大时，该类将应用于头像的容器元素。

语法:

// In app.component.css

:host ::ng-deep .Styling-Class {
    // CSS styling
}

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

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

ng new appname

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

cd appname

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

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG风格的avatar

Project Structure

例子1：在这个例子中，我们使用p-avatar类来沿着所有的avatar组件应用一个边框。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Styling of Avatar</h3>
  
<p-avatar label="V" 
          shape="circle" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="P" 
          shape="circle" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="S" 
          shape="circle" 
          class="mr-2">
</p-avatar>

:host ::ng-deep .p-avatar {
    border: 2px solid green;
}

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

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

输出:

Angular PrimeNG风格的avatar

例子2：在这个例子中，我们把圆形头像的背景颜色改为绿色，其他的改为红色。这里我们使用了p-avatar和p-avatar-circle造型类。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Styling of Avatar</h3>
  
<p-avatar label="V" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="P" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="S" 
          shape="circle" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="O" 
          shape="circle" 
          class="mr-2">
</p-avatar>
  
<p-avatar label="P" 
          class="mr-2">
</p-avatar>

:host ::ng-deep .p-avatar{
    background-color: red;
    color: white;
}
:host ::ng-deep .p-avatar.p-avatar-circle{
    background-color: green;
    color: white;
}

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

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

输出:

Angular PrimeNG风格的avatar