Angular PrimeNG Chip样式

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG中的Chip Styling。

芯片组件在标签、图标和图像的帮助下表示实体。Chip Styling可以用来根据你的应用程序的设计来设计Chip组件。

Angular PrimeNG Chip样式：

p-chip。该类代表容器元素。
p-chip-image。这是启用图像模式时的容器元素。
p-chip-text。该类适用于文本组件的文本。
pi-chip-remove-icon。这个类别适用于芯片的移除图标。

语法:

// In _app.component.html_
<p-chip 
    label="..." 
    styleClass="my-chip"
    icon="...">
</p-chip>

// In _styles.css_
.p-chip.my-chip {
    background-color: green;
    color: white;
}

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

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

ng new newapp

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

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

Angular PrimeNG芯片造型

实例1：本实例显示了如何使用芯片造型来改变芯片的颜色和背景色。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Styling</h3>
  
<p-chip label="Basic Custom Chip" 
        styleClass="my-chip1">
</p-chip>
  
<p-chip label="Custom Styled Chip with Image" 
        image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220915000203/download-200x200.png"
        styleClass="my-chip2">
</p-chip>
  
<p-chip label="Custom Styled Chip with Icon" 
        styleClass="my-chip3" 
        icon="pi pi-cog">
</p-chip>

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

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

p-chip{
    margin-top: 20px;
    display: block;
}
  
.p-chip.my-chip1 {
    background-color: red;
    color: white;
}
  
.p-chip.my-chip2 {
    background-color: blue;
    color: white;
}
  
.p-chip.my-chip3 {
    background-color: green;
    color: white;
}

输出:

Angular PrimeNG芯片造型

例子2：这个例子显示了如何改变border-radius以及如何在芯片上应用一个边框。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Styling</h3>
  
<p-chip label="Small Border Radius" 
        styleClass="my-chip1">
</p-chip>
  
<p-chip label="Medium Border Radius" 
        icon="pi pi-user" 
        styleClass="my-chip2">
</p-chip>
  
<p-chip label="Large Border Radius" 
        styleClass="my-chip3" 
        icon="pi pi-cog">
</p-chip>
  
<p-chip label="Different Border Color" 
        styleClass="my-chip4" 
        icon="pi pi-search">
</p-chip>

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

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

p-chip{
    margin-top: 20px;
    display: block;
}
  
.p-chip.my-chip1 {
    background-color: red;
    border-radius: 5px;
    color: white;
}
  
.p-chip.my-chip2 {
    background-color: blue;
    border-radius: 10px;
    color: white;
}
  
.p-chip.my-chip3 {
    background-color: green;
    color: white;
}
  
.p-chip.my-chip4 {
    background-color: orange;
    border: 5px solid green;
    color: white;
}