Angular PrimeNG ToggleButton组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用ToggleButton组件。

ToggleButton组件用于制作一个用户可以通过点击它来切换的按钮。

属性:

onLabel。它用于设置开启状态的标签。它的数据类型为字符串，默认值为空。
offLabel:它用于设置关闭状态的标签。它是字符串数据类型，默认值为空。
onIcon: 它用于设置开机状态的图标。它的数据类型为字符串，默认值为空。
offIcon: 它用于设置关闭状态的图标。它是字符串数据类型，默认值为空。
iconPos。它用于设置图标的位置，有效值是 “左 “和 “右”。它是字符串数据类型，默认值是左。
style。它用于设置元素的内联风格。它是字符串数据类型，默认值为空。
styleClass : 它用于设置元素的风格类别。它是字符串数据类型，默认值为空。
disabled : 它指定该元素应该被禁用。它是一个布尔数据类型，默认值是false。
tabindex : 它用于设置元素在标签顺序中的索引。它是数字数据类型，默认值为空。
inputId。它是底层输入元素的ID标识符。它是字符串数据类型，默认值为空。
ariaLabel。它用于定义输入元素的标签字符串，它是字符串数据类型，默认值为空。

事件:

onChange：它是一个回调，在状态改变时被触发。

样式:

p-togglebutton。它是一个风格化的容器元素
p-button-icon-left。它是一个造型Icon元素。
p-button-icon-right: 它是一个造型Icon元素。
p-button-text。它是一个风格化的Label元素。

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

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

    ng new appname

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

    cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG ToggleButton组件

实例1：这是一个基本的例子，展示了如何使用ToggleButton组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ToggleButton Component</h5>
<p-toggleButton
  [(ngModel)]="checked1"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="Enabled Button">
</p-toggleButton>
  
<p-toggleButton
  [(ngModel)]="checked2"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  [disabled]
  onLabel="ToggleButton Component"
  offLabel="Disabled Button">
</p-toggleButton>

import { Component } from "@angular/core";
import { SelectItem, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
  
  checked1: boolean = false;
  
  checked2: boolean = false;
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { ToggleButtonModule } from "primeng/togglebutton";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToggleButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG ToggleButton组件

例2：在这个例子中，我们将知道如何在toggleButton组件中使用iconPos属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ToggleButton Component</h5>
<p-toggleButton
  [(ngModel)]="checked1"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="GeeksforGeeks"
  iconPos="right">
</p-toggleButton>
  
<p-toggleButton
  [(ngModel)]="checked2"
  onIcon="pi pi-caret-left"
  offIcon="pi pi-caret-right"
  onLabel="ToggleButton Component"
  offLabel="GeeksforGeeks">
</p-toggleButton>

import { Component } from "@angular/core";
import { SelectItem, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
  
  checked1: boolean = false;
  
  checked2: boolean = false;
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { ToggleButtonModule } from "primeng/togglebutton";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToggleButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG ToggleButton组件