Source: https://primereact.org/styleclass/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API

StyleClass

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

Import#

import { StyleClass } from 'primereact/styleclass';

Copy

Toggle Class#

StyleClass is bind to the element that triggers the click event with the nodeRef property that points to the ref of the element. 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

Toggle p-disabled

<StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
<Button ref={toggleBtnRef} label="Toggle p-disabled" />
<InputText />

Copy

Animation#

Classes to apply during enter and leave animations are specified using the enterClassName, enterActiveClassName, enterToClassName, leaveClassName, leaveActiveClassName,leaveToClassName properties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked.

ShowHide

Content

<StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
    <Button ref={openBtnRef} label="Show" className="mr-2" />
</StyleClass>

<StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
    <Button ref={closeBtnRef} severity="secondary" label="Hide" />
</StyleClass>

<div className="hidden animation-duration-500 box">
    <div className="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>

Copy

Import
Toggle Class
Animation

PrimeReact 10.9.7 by PrimeTek