水波

水波组件为宿主元素添加水波效果。

导入#


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>

自定义#

动画的默认样式会添加白色阴影。这可以使用 CSS 轻松自定义，CSS 会更改p-ink元素的颜色。

绿色

橙色

紫色


<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，以便屏幕阅读器忽略它。

键盘支持

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