Angular PrimeNG徽章造型

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

徽章组件通常被用作其他元素的状态指示器。它可以作为一个独立的组件使用，也可以使用BadgeModule提供的pBadge指令与其他元素一起使用。

Angular PrimeNG徽章造型类：

p-badge。该类应用于徽章元素。
p-overlay-badge。该类是徽章及其目标的包装器。
p-badge-dot: 当徽章元素没有价值时，该类将应用于徽章元素。
p-badge-success。该类被应用于徽章元素，具有成功的严重性。
p-badge-info。该类被应用于徽章元素，具有成功的严重性。
p-badge-warning。该类被应用于徽章元素，具有成功的严重性。
p-badge-danger。该类被应用于徽章元素，具有成功的严重性。
p-badge-lg。该类适用于具有大尺寸的徽章元素。
p-badge-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徽章造型

Project Structure

例子1：在这个例子中，我们使用p-badge类的background-color属性将徽章的背景颜色改为绿色。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Badge Styling</h3>
  
<p-badge value="2" 
         class="mr-2">
</p-badge>
<p-badge value="4" 
         class="mr-2">
</p-badge>
<p-badge value="6" 
         class="mr-2">
</p-badge>
<p-badge value="8">
</p-badge>

:host ::ng-deep .p-badge {
    background-color: 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 { BadgeModule } from 'primeng/badge';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        BadgeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG徽章造型

例子2：在这个例子中，我们使用p-badge-lg类针对大型徽章，并将其背景颜色改为红色。

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Badge Styling</h3>
  
<p-badge value="2" 
         class="mr-2" 
         size="large">
</p-badge>
<p-badge value="4" 
         class="mr-2">
</p-badge>
<p-badge value="6" 
         class="mr-2" 
         size="large">
</p-badge>
<p-badge value="8" 
         size="xlarge">
</p-badge>

:host ::ng-deep .p-badge.p-badge-lg {
    background-color: red;
}

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 { BadgeModule } from 'primeng/badge';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        BadgeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG徽章造型