StyleClass

StyleClass は、エンター/リーブアニメーション中、または要素へのクラスの切り替えに、CSSクラスを宣言的に管理します。

インポート#


import { StyleClass } from 'primereact/styleclass';

クラスの切り替え#

StyleClass は、要素のrefを指すnodeRefプロパティを使用して、クリックイベントをトリガーする要素にバインドされます。スタイリングを変更するターゲット要素は、selectorプロパティで定義され、@next、prev、parent、grandparentを含む任意の有効なCSSセレクターまたはキーワードを受け入れます。


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