Angular PrimeNG 徽章组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Badge组件。

徽章组件：它用于将文本作为状态指示器或数字作为徽章来表示。

属性：

value : 它用于定义在徽章中显示的值。它是字符串数据类型，默认值为空。
severity : 它用于设置徽章的严重性类型。它是字符串数据类型，默认值为空。
size : 它用于定义徽章的大小，有效选项是 “large “和 “xlarge”。它是字符串数据类型，默认值为空。
style : 它用于设置组件的内联风格。它是一个对象数据类型，默认值为空。
styleClass : 它用于定义组件的风格类别。它是字符串数据类型，默认值为空。

Styling:

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: 它是超大的徽章元素。

创建Angular应用程序和模块安装。

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

    ng new appname

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

    cd appname

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

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

项目结构：它将看起来像如下。

Angular PrimeNG 徽章组件

例子1：这是一个基本的例子，说明如何使用徽章组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<div class="badges">
  <p-badge [value]="89" styleClass="p-mr-2" severity="success"></p-badge>
  <p-badge [value]="26" styleClass="p-mr-2" severity="info"></p-badge>
  <p-badge [value]="65" styleClass="p-mr-2"></p-badge>
  <p-badge [value]="33" styleClass="p-mr-2" severity="danger"></p-badge>
  <p-badge [value]="12" styleClass="p-mr-2" severity="warning"></p-badge>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { BadgeModule } from "primeng/badge";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            BadgeModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

输出:

Angular PrimeNG 徽章组件

例子2：在这个例子中，我们将知道如何在消息组件中插入一个图标。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<i
  class="pi pi-bars p-mr-3"
  pBadge
  style="font-size: 2rem"
  value="10"
  styleClass="p-mr-5">
</i>
<i
  class="pi pi-chevron-left p-mr-3"
  pBadge
  severity="danger"
  style="font-size: 2rem"
  value="34">
</i>
<i
  class="pi pi-chevron-right"
  pBadge
  severity="success"
  style="font-size: 2rem"
  value="47">
</i>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BadgeModule,
    ButtonModule,
    BadgeModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

输出:

Angular PrimeNG 徽章组件