波纹

波纹指令为宿主元素添加波纹效果。

导入 #

波纹是受支持的组件（如按钮）的可选动画。它默认禁用，需要在您的应用程序的入口文件 (例如 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 轻松自定义，该 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，以便屏幕阅读器忽略它。

键盘支持

组件不包含任何交互元素。

波纹