样式类

StyleClass 在进入/离开动画期间声明式地管理 CSS 类，或者只是为了切换元素上的类。

导入#


import { StyleClass } from 'primereact/styleclass';

切换类#

StyleClass 与触发点击事件的元素绑定，通过 nodeRef 属性指向元素的 ref。要更改样式的目标元素通过 selector 定义属性，该属性接受任何有效的 CSS 选择器或关键字，包括 @next, prev, parent, grandparent。


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

动画#

在进入和离开动画期间应用的类使用 enterClassName, enterActiveClassName, enterToClassName, leaveClassName, leaveActiveClassName,leaveToClassName 指定属性。此外，如果目标是覆盖层，则如果单击弹出窗口外部，hideOnOutsideClick 将有助于隐藏目标。


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