リップルディレクティブは、ホスト要素にリップル効果を追加します。
リップルは、ボタンなどのサポートされているコンポーネントのオプションのアニメーションです。デフォルトでは無効になっており、PrimeVueセットアップ中にアプリのエントリーファイル（例：main.js）で有効にする必要があります。
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
リップルは、インポートして任意の名前で構成する必要がある独自のコンポーネントおよび標準要素での使用方法について説明します。グローバル構成はapp.directive関数で行います。
import Ripple from 'primevue/ripple';
app.directive('ripple', Ripple);
まず、リップルをグローバルに有効にする必要があります。詳細については、構成APIを参照してください。
mounted() {
this.$primevue.config.ripple = true;
}
リップルを有効にするには、ターゲットにp-rippleクラスを追加し、v-プレフィックスを使用してディレクティブをアタッチします。
<div v-ripple class="ripple-box">Default</div>
アニメーションのデフォルトスタイルでは、白のシェードが追加されます。これは、p-ink要素の色を変更するCSSを使用して簡単にカスタマイズできます。
<div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
<div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
<div v-ripple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">Purple</div>
リップル要素には、スクリーンリーダーによって無視されるようにaria-hidden属性がtrueとして設定されています。
コンポーネントにはインタラクティブな要素は含まれていません。