Angular PrimeNG 头像样式指南

Angular PrimeNG 是一个为 Angular 应用打造的丰富 UI 组件集。作为开发者，我们可以利用这些组件快速构建美观且响应式的 Web 界面，因为大多数组件已经内置了所有必要的功能。在本文中，我们将一起探讨 Angular PrimeNG 头像组件的样式定制。
头像组件 通常使用图标、图片或标签来代表一个人或实体。在设计中使用头像可以让界面更具吸引力和视觉愉悦感。
Angular PrimeNG 头像样式类：

• p-avatar: 此类应用于头像的容器元素。
• p-avatar-image: 当头像处于图片模式时，此类应用于其容器元素。
• p-avatar-circle: 当头像形状为圆形时，此类应用于其容器元素。
• p-avatar-text: 此类应用于头像的文本内容。
• p-avatar-icon: 此类应用于头像的图标。
• p-avatar-lg: 当头像尺寸较大时，此类应用于其容器元素。
• p-avatar-xl: 当头像尺寸超大时，此类应用于其容器元素。

语法：

// 在 app.component.css 中

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

创建 Angular 应用并安装模块：
步骤 1： 使用以下命令创建一个 Angular 应用。

ng new appname

步骤 2： 创建项目文件夹（即 appname）后，使用以下命令进入该目录。

cd appname

步骤 3： 最后，在指定目录中安装 PrimeNG。

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

项目结构： 完成上述步骤后，项目结构将如下所示：

!image项目结构

示例 1： 在这个示例中，我们使用了 p-avatar 类来为所有头像组件添加边框。

app.component.html


CODEBLOCK_f470fbef


app.component.css


CODEBLOCK_ad19c3ba


app.component.ts


CODEBLOCK_a2f65c25


app.module.ts


CODEBLOCK_fb4a8cb6

输出：

!image

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

app.component.html


CODEBLOCK_7d32086e


app.component.css


CODEBLOCK_ad9c832c


app.component.ts


CODEBLOCK_be94cca2


app.module.ts


“

import { NgModule } from ‘@angular/core‘;

import { BrowserModule } from ‘@angular/platform-browser‘;

import { HttpClientModule } from ‘@angular/common/http‘;

import { BrowserAnim