リップル

リップルコンポーネントは、ホスト要素にリップル効果を追加します。

インポート#


import { Ripple } from 'primereact/ripple';

設定ドキュメント#

まず、リップルをグローバルに有効にする必要があります。設定APIで詳細を確認してください。


//_app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component }) {
    const value = {
        ripple: true,
        ...
    };

    return (
        <PrimeReactProvider value={value}>
            <App />
        </PrimeReactProvider>
    );
}

基本#

リップルは、コンポーネントを子として追加し、要素にp-rippleクラスを適用することで有効になります。

クリックしてください


<div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
    Click Me
    <Ripple />
</div>

カスタム#

アニメーションのデフォルトのスタイルは、白のシェードを追加します。これは、p-ink要素の色を変更するCSSを使用して簡単にカスタマイズできます。

緑

オレンジ

紫


<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Green
    <Ripple
        pt={{
            root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Orange
    <Ripple
        pt={{
            root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Purple
    <Ripple
        pt={{
            root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
        }}
    />
</div>

アクセシビリティ#

スクリーンリーダー

リップル要素には、aria-hidden属性がtrueに設定されているため、スクリーンリーダーによって無視されます。

キーボードサポート

コンポーネントには、インタラクティブな要素が含まれていません。