Angular PrimeNG Button Text Buttons组件

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。在这篇文章中，我们将看到Angular PrimeNG Button Text Buttons组件。

按钮组件是用来在点击时执行一些动作的。文本按钮是具有透明背景的按钮，点击时显示边框。要创建一个文本按钮，可以使用p-button-text类。除了p-button-text类之外，还可以使用p-button-plain类来使文本变得简单，并删除任何严重程度。

Angular PrimeNG Button Text Buttons 组件属性：

label。按钮组件的标签属性用于设置按钮的内部文本。
icon。按钮组件的图标属性被用来设置按钮中的图标。

Angular PrimeNG Button Text Buttons组件样式：

p-button-text。该类用于将一个按钮转换为透明背景的文本按钮。
p-button-plain。这个类可以在p-button-text类的基础上使用，使文字变得有规律，并删除任何严重程度。

语法:

<button pButton 
    type="button" 
    label=" ... " 
    class="p-button-text">
</button>

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

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

ng new appname

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

cd appname

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

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

按照上述步骤，项目结构将看起来像这样。

Angular PrimeNG Button Text Buttons组件

Project Structure

例子1：这个例子展示了使用p-button-text类来创建一个简单的文本按钮。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h4>Angular PrimeNG Text Button Component</h4>
</div>
<div class="buttons">
    <button 
        pButton 
        type="button" 
        label="Simple Text Button" 
        class="p-button-text"
    ></button>
    <button 
        pButton 
        type="button" 
        label="Text Button with icon" 
        icon="pi pi-check" 
        class="p-button-text"
    ></button>
</div>

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

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 { AppComponent } from './app.component';
import {ButtonModule} from 'primeng/button'
  
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

**运行以下命令以查看输出。

ng serve --open

输出:

Angular PrimeNG Button Text Buttons组件

例子2：在这个例子中，我们使用了p-button-plain类和p-button-text类，使按钮的文字变得有规律，并去除任何严重程度。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h4>Angular PrimeNG Text Button Component</h4>
</div>
<div class="buttons">
    <button 
        pButton 
        type="button" 
        label="With p-button-plain Class" 
        class="p-button-text p-button-plain"
    ></button>
    <button 
        pButton 
        type="button" 
        label="Without p-button-plain Class"  
        class="p-button-text"
    ></button>
</div>

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

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 { AppComponent } from './app.component';
import {ButtonModule} from 'primeng/button'
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

**运行以下命令以查看输出。