波紋

波紋指令會將波紋效果新增至主機元素。

導入 #

波紋是支援元件（例如按鈕）的選用動畫。預設為停用，需要在您的應用程式的進入檔案 (例如 main.js) 中，在 PrimeVue 設定期間啟用。


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>

自訂 #

動畫的預設樣式會新增白色陰影。這可以使用 CSS 輕鬆自訂，以變更 p-ink 元素的顏色。

需要在設定器中開啟波紋選項，才能顯示此示範。

綠色

橘色

紫色


<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，因此會被螢幕閱讀器忽略。

鍵盤支援

元件不包含任何互動元素。

波紋