https://github.com/xianjie-li/click-effect

material + win click effect
https://github.com/xianjie-li/click-effect

Last synced: 6 days ago
JSON representation

material + win click effect

• Host: GitHub
• URL: https://github.com/xianjie-li/click-effect
• Owner: xianjie-li
• License: mit
• Created: 2019-09-01T14:44:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-14T09:09:36.000Z (about 4 years ago)
• Last Synced: 2024-12-17T08:14:30.788Z (11 days ago)
• Language: JavaScript
• Size: 201 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

## Introduce

md + windows 点击风格的实现。所有事件代理于document，支持动态创建的元素，可随意与mvvm库搭配使用。兼容手机和pc。

Md + windows Click implementation of the style. All events are delegated to the document, supporting dynamically created elements, and can be used with the mvvm library at will. Compatible with mobile phones and PCs.

## demo

[![Edit bk-click-effect (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bk-click-effect-forked-r3k42?fontsize=14&hidenavigation=1&theme=dark)




## Install

```

yarn add @lxjx/click-effect

// or 

npm install @lxjx/click-effect

// browser

src="./dist/index.umd.min.js"

```




## Example

```jsx

import ClickEffect from "@lxjx/fr-click-effect";

new ClickEffect({

  /* default match className ↓ */

  // effect: "m78-effect",	// primary className

  // disabled: "__disabled",	

  // disabledwinStyle: "__md",	// disabled windows style effect

  // disabledMdStyle: "__win"	// disabled material style effect

});

// tpl



    
base

    
base

    
base

    
base

    
base

    


        has block

            


                

    


        white

    

    
only win style

    
only md style

    
disabled

    
red

    
orange

    
yellow

    
green

    
cyan

    
blue

    
purple



// add theme

.fr-effect.__myRed .fr-effect-ripple{

  background: red;

}

red


```