Angular PrimeNG表单ToggleButton样式设计

Angular PrimeNG是PrimeTek开发的一个开源的前端UI框架，用于开发高效和可扩展的angular应用程序。在他们的项目中使用PrimeNG可以帮助开发者减少开发时间，并专注于其他重要的应用领域。在这篇文章中，我们将看到Angular PrimeNG表单ToggleButton的样式。

ToggleButton组件是用来接受用户输入的布尔值的。它的标签可以通过onLabel和offLabel属性根据其当前状态进行改变。ToggleButton只触发一个事件，即onChange。

Angular PrimeNG Form ToggleButton造型类：

• p-togglebutton。它是ToggleButton的容器元素。
• p-button-icon-left。它是ToggleButton的左边图标元素。
• p-button-icon-right：它是ToggleButton的右边图标元素。
• p-button-text。它是ToggleButton的文本元素。

语法:

// app.component.html
<p-toggleButton
    [onLabel]="'...'"
    [offLabel]="'...'"
    ...
    [(ngModel)]="...">
</p-toggleButton>

// app.component.css
:host ::ng-deep .structural-class{
    // Custom CSS
}

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

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

ng new appname

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

cd appname

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

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Project Structure

例子1：在这篇文章中，我们使用了”p-togglebutton“造型类来改变togglebutton的颜色为绿色。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Styling Component
</h3>
  
<p-toggleButton 
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [(ngModel)]="isOn">
</p-toggleButton>

• app.component.css:

:host ::ng-deep .p-highlight.p-togglebutton,
:host ::ng-deep .p-highlight.p-togglebutton:hover {
    background: green;
    border: none;
    color: white;
}
  
:host ::ng-deep .p-togglebutton:focus {
    box-shadow: 0 0 0 0.2rem #07c700fb;
}

• app.component.ts:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    isOn = false;
}

• app.module.ts:

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

输出:

例子2：在这篇文章中，我们使用了ToggleButton组件的图标样式类来改变标签左边和右边的图标的颜色和大小。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    ToggleButton Styling Component
</h3>
  
<h3>Default ToggleButton</h3>
<p-toggleButton 
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [onIcon]="'pi pi-check'"
    [offIcon]="'pi pi-times'"
    [(ngModel)]="isOn_1">
</p-toggleButton>
  
<h3>Custom ToggleButton</h3>
<p-toggleButton
    class="tbCustom"
    [onLabel]="'Switched On'"
    [offLabel]="'Switched Off'"
    [onIcon]="'pi pi-check'"
    [offIcon]="'pi pi-times'"
    [(ngModel)]="isOn_2">
</p-toggleButton>

• app.component.css:

:host ::ng-deep .tbCustom .p-button-icon-left {
    color: red !important;
    font-weight: 700;
    font-size: 40px;
}

• app.component.ts:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    isOn_1 = false;
    isOn_2 = false;
}

• app.module.ts:

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

输出: