diff --git a/Source/package-lock.json b/Source/package-lock.json index 9217857..a18fb78 100644 --- a/Source/package-lock.json +++ b/Source/package-lock.json @@ -1,6 +1,6 @@ { "name": "fluent-reveal-effect", - "version": "0.5.3", + "version": "0.9.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/Source/package.json b/Source/package.json index 3fb49e6..75e82d1 100644 --- a/Source/package.json +++ b/Source/package.json @@ -1,6 +1,6 @@ { "name": "fluent-reveal-effect", - "version": "0.9.0", + "version": "0.9.1", "description": "Reveal Effect (Fluent Design)", "main": "../Dist/js/[name].js", "scripts": { diff --git a/source/README.md b/source/README.md new file mode 100644 index 0000000..32c7ee2 --- /dev/null +++ b/source/README.md @@ -0,0 +1,105 @@ +# Reveal Effect library (Fluent Design System) +Apply reveal effect to border and background of elements. + +![Screenshot](https://github.com/d2phap/fluent-ui/raw/master/docs/screenshot.png) + +### Demo +https://d2phap.github.io/fluent-reveal-effect/ + +## Install +Run the command +``` +npm i fluent-reveal-effect@latest +``` + +## Usage + +### Import the library +```js +import { FluentRevealEffect } from "fluent-reveal-effect" +``` + + +### Basic CSS +```css +.btn { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; + padding: 1rem 2rem; + background-color: #333; + color: #fff; + border: 0; + + transition: all 200ms ease; +} +.btn-border { + display: inline-block; + margin: 5px; +} +.btn-border .btn { + display: block; + margin: 2px; +} +``` + + +### Apply background effect +#### HTML mockup +```html + +``` +#### JavaScript +```js +FluentRevealEffect.applyEffect(".btn", { + lightColor: "rgba(255,255,255,0.1)", + gradientSize: 150 +}) +``` + +#### Enable Ripple click effect +````js +FluentRevealEffect.applyEffect(".btn", { + clickEffect: true +}) +```` + +### Apply border and background effect +#### HTML mockup +```html +