Angular PrimeNG SplitButton的严重性

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用于很好的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG SplitButton Severity。

SplitButton组件在一个组件中结合了一个按钮和一个下拉菜单。下拉菜单被用来显示用户可以执行的一系列动作。PrimeNG为我们提供了不同颜色的SplitButton来表示不同的严重程度。有7个严重程度级别。初级（默认）、中级、成功、信息、警告、帮助和危险。

Angular PrimeNG SplitButton严重性属性：

label。标签属性用于设置分割按钮的文本。
icon:图标属性用于设置分割按钮的图标。

Angular PrimeNG SplitButton Severity Styling：

p-button-secondary: 该类用于将一个分割按钮的严重程度设置为二级。
p-button-success。这个类是用来设置分割按钮的严重程度为成功。
p-button-danger。该类用于将一个分割按钮的严重程度设置为危险。
p-button-help。该类用于将一个分割按钮的严重程度设置为帮助。
p-button-info:该类用于将一个分割按钮的严重性等级设置为信息。
p-button-warning。这个类是用来设置分割按钮的严重程度为警告。

语法:

<p-splitButton 
    label="..." 
    styleClass="..." 
    [model]="...">
</p-splitButton>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG SplitButton的严重性

Project Structure

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

ng serve --open

例子1：下面的例子显示了secondary ，success ，和info严重性分割按钮的使用。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG SplitButton Severity</h3>
</div>
<div class="buttons">
    <p-splitButton 
        label="Primary SplitButton" 
        icon="pi pi-check" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Secondary SplitButton" 
        styleClass="p-button-secondary" 
        icon="pi pi-hashtag" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Success SplitButton" 
        styleClass="p-button-success" 
        icon="pi pi-circle" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Info SplitButton" 
        styleClass="p-button-info" 
        icon="pi pi-star" 
        [model]="items">
    </p-splitButton>
</div>

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

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  items: MenuItem[] = [
    { 
      label: 'Home', 
      icon: 'pi pi-home', 
      url: 'https://geeksforgeeks.org' 
    },
    {
      label: 'Practice',
      icon: 'pi pi-bolt',
      url: 'https://practice.geeksforgeeks.org',
    },
    {
      label: 'Courses',
      icon: 'pi pi-book',
      url: 'https://practice.geeksforgeeks.org/courses',
    },
    { 
      separator: true 
    },
    { 
      label: 'Logout', 
      icon: 'pi pi-user', 
      url: 'https://geeksforgeeks.org' 
    },
  ];
}

import { NgModule } from '@angular/core';
import { BrowserModule } 
  from '@angular/platform-browser';
import { BrowserAnimationsModule } 
  from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SplitButtonModule } from 'primeng/splitbutton';
  
@NgModule({
  imports: [
    BrowserModule, 
    SplitButtonModule, 
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG SplitButton的严重性

例子2：这个例子显示了警告、帮助和危险严重程度分割按钮的使用。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG SplitButton Severity</h3>
</div>
<div class="buttons">
    <p-splitButton 
        label="Primary SplitButton" 
        icon="pi pi-check" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Warning SplitButton" 
        styleClass="p-button-warning" 
        icon="pi pi-hashtag" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Help SplitButton" 
        styleClass="p-button-help" 
        icon="pi pi-circle" 
        [model]="items">
    </p-splitButton>
    
    <p-splitButton 
        label="Danger SplitButton" 
        styleClass="p-button-danger" 
        icon="pi pi-star" 
        [model]="items">
    </p-splitButton>
</div>

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

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
  items: MenuItem[] = [
    { 
        label: 'Home', 
        icon: 'pi pi-home', 
        url: 'https://geeksforgeeks.org' 
    },
    { 
        label: 'Practice', 
        icon: 'pi pi-bolt', 
        url: 'https://practice.geeksforgeeks.org' 
    },
    { 
        label: 'Courses', 
        icon: 'pi pi-book', 
        url: 'https://practice.geeksforgeeks.org/courses' 
    },
    { 
        separator: true },
    { 
        label: 'Logout', 
        icon: 'pi pi-user', 
        url: 'https://geeksforgeeks.org' 
    },
  ];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
  from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {SplitButtonModule} from 'primeng/splitbutton'
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SplitButtonModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
  
export class AppModule { }

输出:

Angular PrimeNG SplitButton的严重性