极客教程Angular PrimeNG p-button属性
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架被用来做响应式网站，非常方便。本文将向我们展示如何在Angular PrimeNG中对Tooltip组件进行造型。
一个按钮通常用于在点击时执行一些动作。PrimeNG库中的按钮有不同的形状、大小和许多其他属性。
p-button的属性：
- type。它用于定义按钮的类型。它是字符串类型，其默认值为空。
- label。它用于添加按钮的文本。它是字符串类型的，其默认值为空。
- icon。它用于添加图标的名称。它是字符串类型的，其默认值为空。
- iconPos。它用于指示图标的位置。它是字符串类型的，其默认值是左。
- style。它用于设置组件的内联风格。它是字符串类型，其默认值为空。
- styleClass。它用于定义组件的风格类。它是字符串类型，其默认值为空。
- badge。它用于定义徽章的值。它是字符串类型的，其默认值为空。
- badgeClass。它用于定义徽章的样式。它是字符串类型的，其默认值为空。
- disabled:它用于禁用按钮。它是布尔类型的，其默认值是false。
- loading。它用于设置按钮的加载状态为真或假。它是布尔类型的，其默认值是false。
- loadingIcon: 它被用来改变默认的加载按钮图标。它是字符串类型的，其默认值是pi-spinner pi-spin。
- onClick。它用于在点击按钮时执行回调。它属于事件类型，其默认值为空。
- onFocus: 它用于在按钮的焦点上执行回调。它属于事件类型，其默认值为空。
- onBlur: 它用于在按钮失去焦点时执行回调。它属于事件类型，其默认值为空。
- ariaLabel。它用于定义一个字符串，自动完成当前元素的属性。它是字符串类型的，其默认值为空。
方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG的p-button属性。
创建Angular项目和安装模块：
第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行界面。
npm install -g angular-cli
第2步：现在我们将创建一个angular项目。
ng new project_name
第3步：在创建你的react项目后，进入文件夹执行不同的操作。
cd project_name
第4步：创建Angular应用程序后，使用以下命令安装所需的模块。
npm install primeng --save
npm install primeicons --save
项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到一个类似于下图的项目结构。用户所做的新组件或代码修改，我们将在源文件夹中完成。
Project Structure
运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。
ng serve --open
例子1：我们正在创建一个用户界面，显示上述的按钮的属性。
- app.component.html
<div style="margin:100px; text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Button
Properties of p-Button
</h3><br />
<p>Disabled Button:</p>
<p-button label="Disabled"
icon="pi pi-ban" [disabled]="true">
</p-button>
<p>Button with Loading state: </p>
<p-button label="Loading.."
[loading]="true">
</p-button>
<br /><br />
<p-button label="Loading.."
[loading]="true" iconPos="right">
</p-button>
<br /><br />
<p> Button with Loading state & Custom icon:</p>
<p-button loadingIcon="pi pi-spin pi-sun"
[loading]="true">
</p-button>
</div>
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
输出：现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。
实例2：我们正在创建一个用户界面，显示上述**p按钮的属性。
- app.component.html
<div style="margin:100px; text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Button
Properties of p-Button
</h3><br />
<p>Button with Badge:</p>
<p-button label="Users" badge="8"
styleClass="p-button-success"
badge="100" badgeClass="p-badge-warning">
</p-button>
<br /><br />
<p>Button onClick Event:</p>
<p-button label="Click here"
icon="pi pi-arrow-circle-right" iconPos="right"
(onClick)="handleClick($event)">
</p-button>
</div>
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ButtonModule } from "primeng/button";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
handleClick(e: any) {
console.log("Button clicked")
}
}
输出：现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。
