Angular PrimeNG StyleClass组件

Angular PrimeNG是一个用于Angular应用程序的开源框架。它有一套丰富的本地UI组件，可以用来制作有吸引力和可扩展的Web界面。在这篇文章中，我们将看到Angular PrimeNG StyleClass组件。

StyleClass用于在进入和离开组件的动画时管理CSS类，或在一个元素上切换类。StyleClass的属性列举如下。

Angular PrimeNG StyleClass组件属性：

pStyleClass。这是用目标元素来应用样式类。它接受一个有效的CSS查询或一个目标关键词。
enterClass。它定义了当目标元素开始出现在屏幕上时将会应用到的类别。
enterActiveClass。它定义了在输入动画中应用于目标元素的类。
enterToClass。它定义了当回车动画完成后将应用于目标元素的类。
leaveClass。它定义了当目标元素开始从屏幕上隐藏时将会应用到的类别。
leaveActiveClass。它定义了在离开动画中应用于目标元素的类。
leaveToClass。它定义了当离开动画完成后将应用于目标元素的类。
hideOnOutsideClick:这个布尔属性定义了当元素外部被点击时是否会触发离开动画。
toggleClass:这个属性用于切换一个元素的类别，而不需要任何动画。

pStyleClass属性的目标关键词：

@next:目标是当前元素的下一个元素。
@prev：针对当前元素的下一个元素。
@parent：针对父元素。
@grandparent：针对祖先（父辈的）元素。

语法:

<button 
     pButton
     label="..." 
     pStyleClass="#gfg" 
     leaveClass="..."
     leaveActiveClass="..." 
     leaveToClass="...">
</button>
<div id="gfg"> ... </div>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG StyleClass组件

Project Structure

运行以下命令。

ng serve --open

例子1：在这个例子中，我们使用StyleClass的toggleClass属性，通过切换该元素上的p-disabled类来启用和禁用一个文本输入。

<h2 style="color: green">
  GeeksforGeeks
</h2>
<h3>
  Angular PrimeNG StyleClass Component
</h3>
<h4>ToggleClass Demo</h4>
  
<button 
    pButton
    class="block mb-4" 
    label="Enable/Disable Input" 
    pStyleClass="#gfg" 
    toggleClass="p-disabled">
</button>
  
<input pInputText type="text" 
       id="gfg">

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent { }

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
        InputTextModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出 :

Angular PrimeNG StyleClass组件

实例2：本实例展示了如何使用StyleClass添加进入和离开的动画。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG StyleClass Component</h3>
<h4>Enter/Leave Animation Demo</h4>
  
<div class="mb-4">
    <button 
        pButton
        class="mr-4" 
        label="Hide Image" 
        pStyleClass="#gfg"
        leaveActiveClass="imageOutAnimClass" 
        leaveToClass="hidden">
    </button>
  
    <button 
        pButton 
        label="Show Image" 
        pStyleClass="#gfg"
        enterClass="hidden"
        enterActiveClass="imageInAnimClass">
    </button>
  
</div>
  
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo-200x200.png" 
     alt="gfg_logo"
     id="gfg"/>

/* ImageInAnim */
@keyframes imageInAnim {
    0%{
        opacity: 0;
    }
  
    100%{
        opacity: 1;
    }
}
  
/* ImageOutAnim */
@keyframes imageOutAnim {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
}
  
.imageInAnimClass{
    animation: imageInAnim 2s linear;
}
  
.imageOutAnimClass{
    animation: imageOutAnim 2s linear;
}

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 { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG StyleClass组件