极客教程Angular PrimeNG按钮的属性pButton
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架被用来做响应式网站，非常方便。本文将向我们展示如何在Angular PrimeNG中设计Tooltip组件。
一个按钮通常用于在点击时执行一些动作。PrimeNG库中的按钮有不同的形状、大小和许多其他属性。
pButton的属性：
- 标签。它用于添加按钮的文本。
- 图标。它用于添加图标的名称。
- iconPos。它用于指示图标的位置。
- 载入。用来表示按钮的加载状态。
- loadingIcon: 它用于表示加载按钮的图标。
方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG Button pButton的属性。
创建Angular项目和安装模块：
第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。
npm install -g angular-cli
步骤2：现在我们将创建一个angular项目。
ng new project_name
第3步：在创建你的react项目后，进入文件夹执行不同的操作。
cd project_name
第四步：创建Angular应用程序后，使用以下命令安装所需的模块。
npm install primeng --save
npm install primeicons --save
项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到一个类似于下图的项目结构。用户所做的新组件或代码修改，我们将在源文件夹中完成。
Project Structure
运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。
ng serve --open
例子1：我们正在创建一个用户界面，显示pButton的上述属性。
- app.component.html
<div style="margin:100px; text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Button
Properties of pButton
</h3><br />
<p>Button with Label: </p>
<button pButton type="button" label="Label"
class="p-button-lg p-button-raised
p-button-text p-button-success">
</button>
<br /><br />
<p> Icon Button:</p>
<button pButton type="button" icon="pi pi-check"
class="p-button-lg p-button-raised
p-button-rounded p-button-text p-button-success">
</button>
<p>Button with Label and Icon: </p>
<button pButton type="button"
label="Sign Up" icon="pi pi-user"
class="p-button-lg p-button-success ">
</button><br /><br />
<button pButton type="button" label="Log In"
icon="pi pi-check-circle" iconPos="right"
class="p-button-lg p-button-success ">
</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/，你会看到以下输出。
pButton的属性
示例2：我们正在创建一个用户界面，显示pButton的上述属性。
- app.component.html
<div style="margin:100px; text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Button
Properties of pButton
</h3><br />
<p>Button with Loading state: </p>
<button pButton type="button"
label="Loading.." [loading]="true"
class="p-button-lg p-button-raised
p-button-text p-button-success">
</button>
<br /><br />
<button pButton type="button" label="Loading.."
[loading]="true" iconPos="right"
class="p-button-lg p-button-raised
p-button-text p-button-success">
</button>
<br /><br />
<p> Button with Loading state & Custom icon:</p>
<button pButton type="button"
loadingIcon="pi pi-spin pi-sun" [loading]="true"
class="p-button-lg p-button-rounded
p-button-success">
</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/，你会看到以下输出。
pButton的属性