StyleClass

StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.

Import #


import { StyleClassModule } from 'primeng/styleclass';

Toggle Class #

StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or keywords including @next, prev, parent, grandparent


<p-button 
    label="Toggle p-disabled" 
    pStyleClass="@next" 
    toggleClass="p-disabled" />
<input type="text" pInputText class="block mt-3" />

Animation #

Classes to apply during enter and leave animations are specified using the enterFromClass, enterActiveClass, enterToClass, leaveFromClass, leaveActiveClass,leaveToClassproperties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked, or enable hideOnEscape to close the popup by listening escape key.


<div>
    <p-button 
        label="Show" 
        class="mr-2" 
        pStyleClass=".box" 
        enterFromClass="hidden" 
        enterActiveClass="fadein" />
    <p-button 
        label="Hide" 
        pStyleClass=".box" 
        leaveActiveClass="fadeout" 
        leaveToClass="hidden" />
</div>

<div class="hidden animation-duration-500 box">
    <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">
        Content
    </div>
</div>

StyleClass API

API defines helper props, events and others for the PrimeNG StyleClass module.

StyleClass #

StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.

Properties #

Defines the input properties of the component.

name	type	default	description
selector	string	null	Selector to define the target element. Available selectors are '@next', '@prev', '@parent' and '@grandparent'.
enterClass	string	null	Style class to add when item begins to get displayed.
enterFromClass	string	null	Style class to add when item begins to get displayed.
enterActiveClass	string	null	Style class to add during enter animation.
enterToClass	string	null	Style class to add when item begins to get displayed.
leaveClass	string	null	Style class to add when item begins to get hidden.
leaveFromClass	string	null	Style class to add when item begins to get hidden.
leaveActiveClass	string	null	Style class to add during leave animation.
leaveToClass	string	null	Style class to add when leave animation is completed.
hideOnOutsideClick	boolean	false	Whether to trigger leave animation when outside of the element is clicked.
toggleClass	string	null	Adds or removes a class when no enter-leave animation is required.
hideOnEscape	boolean	false	Whether to trigger leave animation when escape key pressed.