Ripple 水波纹组件

为内部提供一个实现点击增加点击水波扩散效果的容器,ripple 组件 支持传入 className 添加到容器上,同时支持设置中心扩散和扩散半径系数,组件在 touchStart 时触发水波纹,注意元素必须定义宽度和高度。

示例

代码节选自:yis-demo/src/pages/components/ripple/index.js
export default class Rippledemo extends PageCore {
    render(){
        return (
            <Page>
                <Ripple className={styles.container}>
                    <div> 123456 </div>
                </Ripple>
            </Page>
        )
    }
}

样式变量

    /* 动画时长 */
    --ripple-duration: 880ms;
    /* 动画初始时透明度 */
    --ripple-final-opacity: 0.3;

参数

参数名 类型 必选 默认值 描述
className string 根节点上的 class 名称
rippleCenter boolean × false 从目标元素中间扩散
rippleSpread number × 1 指定相对于目标元素宽度的扩散倍数

rippleFactory 水波纹高阶组件

当为已提供的组件增加水波纹时,可以使用高阶组件封装,参数与水波纹组件是一致的。

示例

代码节选自:yis-demo/src/pages/components/ripple/index.js
const RippleTestCenter = RippleFactory(Test, {
    className: styles.container,
    rippleCenter: true,
    rippleSpread: 2
});
export default class Rippledemo extends PageCore {
    render(){
        return (
            <Page>
                <RippleTestCenter />
            </Page>
        )
    }
}

参数

参数名 类型 必选 默认值 描述
WrapperedComponent Component 需要添加ripple的组件
rippleCenter boolean × 从目标元素中间扩散
rippleSpread number × 1 指定相对于目标元素宽度的扩散倍数
className string × 根节点上的 class 名称