Angular PrimeNG Button凸起按钮组件

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

一个Button组件被用来在点击时执行一些动作。凸起的按钮使用盒状阴影属性从网页上凸起一点。凸起的按钮给用户一种点击的感觉，因为当我们点击它时，它就会下降。p-button-raised类可以用来制作一个凸起的按钮。

Angular PrimeNG Button Raised Buttons 组件属性：

label。按钮组件的这个属性用于设置按钮的文本。

Angular PrimeNG Button Raised Buttons 组件样式：

p-button-raised。该类用于创建一个凸起的按钮。
p-button-rounded。该类用于使按钮的边框变圆。

语法:

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

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG Button凸起按钮组件

Project Structure

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

ng serve --open

例子1：这个例子展示了使用p-button-raised类来创建一个普通的凸起按钮和一个凸起的文本按钮。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button Raised 
      Buttons Component
    </h3>
</div>
  
<div class="buttons">
    <button pButton 
        type="button" 
        label="Raised Button" 
        class="p-button-raised">
    </button>
    
    <button pButton 
        type="button" 
        label="Raised Text Button" 
        class="p-button-raised 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 { }

输出:

Angular PrimeNG Button凸起按钮组件

例子2：在这个例子中，我们使用p-button-rounded类和p-button-raised类来创建一个圆形的凸起按钮。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
      Angular PrimeNG Button 
      Raised Buttons Component
    </h3>
</div>
  
<div class="buttons">
    <button pButton 
        type="button" 
        label="Raised Rounded Button" 
        class="p-button-raised p-button-rounded">
    </button>
  
    <button pButton 
        type="button" 
        label="Raised Rounded Text Button" 
        class="p-button-raised p-button-text 
        p-button-rounded">
    </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 { }

输出:

Angular PrimeNG Button凸起按钮组件