Angular PrimeNG

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来做响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Button Sizes.。

一个按钮通常用于在点击时执行一些动作。PrimeNG库中的按钮有不同的尺寸。除了默认尺寸外，还有两种尺寸可用。小和大。

Angular PrimeNG按钮尺寸造型：

p-button-sm:这个类是用来使按钮的尺寸变小。
p-button。该类将按钮的尺寸设置为常规尺寸。
p-button-lg。这个类是用来使按钮的尺寸变大。

语法:

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

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG按钮尺寸

例子1：这是一个基本的例子，展示了Button组件的三种尺寸。

<div class="header">
  <h2>GeeksforGeeks</h2>
  <h4>Angular PrimeNG Button Sizes</h4>
</div>
  
<div class="buttons">
  <button pButton type="button" 
    label="Small Sized Button" 
    class="p-button-sm">
  </button>
  
  <button pButton type="button" 
    label="Default Sized Button" 
    class="p-button">
  </button>
  
  <button pButton type="button" 
    label="Large Sized Button" 
    class="p-button-lg">
  </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按钮尺寸

例子2：这个例子显示了圆形按钮组件的不同尺寸。

<div class="header">
  <h2>GeeksforGeeks</h2>
  <h4>Angular PrimeNG Rounded Button Sizes</h4>
</div>
  
<div class="buttons">
  <button pButton type="button" 
     label="Small Sized Button" 
     class="p-button-sm p-button-rounded">
  </button>
  
  <button pButton type="button" 
     label="Default Sized Button" 
     class="p-button p-button-rounded">
  </button>
  
  <button pButton type="button" 
     label="Large Sized Button" 
     class="p-button-lg 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按钮尺寸