Angular PrimeNG AvatarGroup的样式设计

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG风格的AvatarGroup.

AvatarGroup组件是用来将头像分组的。PrimeNG AvatarGroup组件只有一个名为p-avatar-group的结构样式类。这个类将被应用于头像组容器元素，可以根据我们的需要来改变CSS属性。

语法:

<p-avatarGroup>
   <p-avatar icon="..."></p-avatar>
   <p-avatar icon="..."></p-avatar>
   ...
</p-avatarGroup>

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

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

ng new appname

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

cd appname

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

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

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

Project Structure

例子1：在这个例子中，我们使用p-avatar-group样式类改变了头像组容器的背景颜色。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG AvatarGroup Styling</h3>
  
<p-avatarGroup>
    <p-avatar 
        icon="pi pi-star" 
        shape="circle" 
        size="large">
    </p-avatar>
    <p-avatar 
        icon="pi pi-user" 
        shape="circle" 
        size="large">
    </p-avatar>
    <p-avatar 
        icon="pi pi-key" 
        shape="circle" 
        size="large">
    </p-avatar>
</p-avatarGroup>

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';
import { AvatarGroupModule } from 'primeng/avatargroup';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AvatarModule,
        AvatarGroupModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

.p-avatar-group{
    padding: 30px;
    background-color: green;
}

输出:

例子2：这是另一个例子，说明使用p-avatar-group样式类来修改avatar组容器的各种CSS属性。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG AvatarGroup Styling</h3>
  
<p-avatarGroup>
    <p-avatar 
        icon="pi pi-star" 
        shape="circle" 
        size="large">
    </p-avatar>
    <p-avatar 
        icon="pi pi-user" 
        shape="circle" 
        size="large">
    </p-avatar>
    <p-avatar 
        icon="pi pi-key" 
        shape="circle" 
        size="large">
    </p-avatar>
</p-avatarGroup>

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';
import { AvatarGroupModule } from 'primeng/avatargroup';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AvatarModule,
        AvatarGroupModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

.p-avatar-group{
    padding: 30px;
    background-color: orange;
    border: 10px dashed green;
    border-radius: 25px;
}

输出: