Angular PrimeNG按钮样式

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG中的按钮样式。

PrimeNG中的按钮组件是用来在被点击时执行一个动作的。按钮组件有3个结构风格类。p-button, p-button-icon , 和 p-button-label 。这些类将分别应用于按钮、图标和标签，并且可以根据我们的需要来改变这些元素的属性。

Angular PrimeNG按钮造型属性：

• label。按钮的标签属性用于设置其文本。
• 图标。图标属性用于设置按钮的图标。

Angular PrimeNG按钮造型类：。

• p-button。这个类是由PrimeNG库应用于按钮的。
• p-button-icon。该类由PrimeNG库应用于按钮图标。
• p-button-label。该类由PrimeNG库应用于按钮标签。

语法:

<button pButton type="button" label="..." icon="..."></button>

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

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

ng new appname

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

cd appname

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

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

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

Project Structure

例子1：在这个例子中，我们使用p-button-label类来改变Button标签的字体大小。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Styling</h3> 
</div>
<div class="example-container">
    <button pButton type="button" 
            label="Hello" 
            icon="pi pi-check">
    </button>
</div>

div.header,
div.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
.header h2 {
  margin-bottom: 0;
  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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  declarations: [AppComponent],
  imports: [ButtonModule, 
              BrowserModule, 
              BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

button .p-button-label {
    font-size: 40px;
}

• 运行以下命令。

ng serve --open

输出:

例子2：在这个例子中，我们使用p-button-icon类来改变按钮图标的字体大小和颜色。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Styling</h3>
</div>
<div class="example-container">
    <button pButton type="button" 
            label="Hello" 
            icon="pi pi-check">
    </button>
</div>

div.header,
div.example-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
.header h2 {
  margin-bottom: 0;
  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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  declarations: [AppComponent],
  imports: [ButtonModule, 
              BrowserModule, 
              BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

button .p-button-icon {
    font-size: 30px;
    color: red;
}

输出: