Angular PrimeNG StyleClass属性

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

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

Angular PrimeNG StyleClass属性：

pStyleClass。这个属性用来锁定要应用StyleClass的元素。它接受一个字符串值，可以是一个有效的CSS查询或一个目标关键词。
enterClass。这个属性定义了目标元素开始出现在屏幕上时要添加的类。
enterActiveClass。这个属性定义了在进入动画时要添加的类。
enterToClass。这个属性定义了当进入动画完成后要添加的类。
leaveClass。这个属性定义了目标元素开始从屏幕上隐藏时要添加的类。
leaveActiveClass。这个属性定义了离开动画时要添加的类。
leaveToClass。这个属性定义了离开动画完成后要添加的类。
hideOnOutsideClick:该属性说明当元素外部被点击时是否触发离开动画。
toggleClass : 当不需要进入或离开动画时，这个属性用于切换一个元素的类别。

pStyleClass属性的目标关键词：

@next:这个关键字用于锁定当前元素的下一个元素。
@prev：这个关键字用来针对当前元素的下一个元素。
@parent：这个关键字用来针对父元素。
@grandparent：这个关键词用来针对祖先（父系的父）元素。

语法:

<button 
     pButton
     label="..." 
     pStyleClass="@next" 
     leaveClass="..."
     leaveActiveClass="..." 
     leaveToClass="...">
</button>
<div class="..."> ... </div>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG StyleClass属性

例子1：这个例子展示了StyleClass的toggleClass属性的使用。当我们不想对一个元素应用任何进入或离开的动画时，toggleClass属性就会被使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Properties</h4>
  
<button pButton label="ToggleClass dark-mode" 
    pStyleClass="@next" 
    toggleClass="dark-mode">
</button>
  
<div class="content">
    GeeksforGeeks is a computer science
    portal for geeks. It offers articles
    on various computer science subjects
    like Data Structures, Algorithms,
    Compiler Design, Computer Networks, etc.
</div>

.content {
    background-color: rgb(112, 255, 119);
    width: 300px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
}
  
.dark-mode{
    background-color: rgb(9, 8, 8);
    color: white;
}

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 { }

运行应用程序的步骤：。

在项目的根目录下执行下面的命令来运行该应用程序。

ng serve --open

输出:

Angular PrimeNG StyleClass属性

例子2：这个例子展示了如何使用StyleClass属性添加进入和离开的动画。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Properties</h4>
  
<div class="block">
    <button pButton label="Show the Input" 
        class="mr-3" pStyleClass=".input" 
        enterClass="hidden"
        enterActiveClass="inAnimation">
    </button>
  
    <button pButton label="Hide the Input" 
        pStyleClass=".input" 
        leaveActiveClass="outAnimation" 
        leaveToClass="hidden">
    </button>
</div>
<input pInputText class="input" type="text" />

.content {
    background-color: rgb(112, 255, 119);
    width: 300px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
}
  
input{
    margin-top: 20px;
}
  
/* Enter animation */
@keyframes inAnim {
    0% {
        opacity: 0;
    }
  
    100% {
        opacity: 1;
    }
}
  
/* Leave Animation */
  
@keyframes outAnim {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
}
  
.inAnimation {
    animation: inAnim .5s linear;
}
  
.outAnimation {
    animation: outAnim .5s 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';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
        InputTextModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG StyleClass属性