Skip to content
用来实现点击波纹效果 https://sowhitesocoll.github.io/dodo-ripple/
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
src
.babelrc
.gitignore
.npmignore
README.md
index.html
main.js
package.json
webpack.config.js
yarn.lock

README.md

功能

可以用来实现点击时的波纹效果

演示

https://sowhitesocoll.github.io/dodo-ripple/

使用

安装

yarn add 'dodo-ripple'

RippleBlock的用法

import { RippleBlock } from 'dodo-ripple'

const Button = (
  <RippleBlock className="btn">
    Click Here
  </RippleBlock>
)

withRipple的用法

import { withRipple } from 'dodo-ripple'

const Button = withRipple(
  <button className="btn">Click Here</button>
)

只使用Ripple

import { Ripple } from 'dodo-ripple'

class Button extends React.Component {
  $ripple = React.createRef()

  handleMouseDown = e => {
    this.$ripple.current.createRipple(e)
    this.props.onMouseDown && this.props.onMouseDown(e)
  }

  render() {
    const { children, className, ...rest } = this.props

    return (
      <button 
        {...rest}
        className={classnames('btn', 'do-ripple-block', className)} 
        onMouseDown={this.handleMouseDown} 
      >
        <span className="do-ripple-content">{children}</span>
        <Ripple ref={this.$ripple} rippleColor="#39f"/>
      </button>
    )
  }
}
  • �如果使用第二种方式的话记得要给外层添加.do-ripple-block,同时也要给内容添加 .do-ripple-content,否则会出现样式问题

例子中的相关样式

.btn {
  padding: 12px 50px;
  border: 1px solid #ddd;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  font: 400 18px system-ui;
  vertical-align: middle;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;

  &:active,
  &:focus {
    outline: none;
  }
}
You can’t perform that action at this time.