组件

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 名称