✨ Help support the maintenance of this package by sponsoring me.
alpine-ripple is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive x-ripple.
- Alpine.js v3.x
- Tailwind CSS (only required if you want to use custom color classes on the directive)
Include the following <script> and <link> tags in the <head> of your document, just before Alpine.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@wilkr/[email protected]/dist/alpine-ripple.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/@wilkr/[email protected]/dist/alpine-ripple.min.js"
defer
></script>npm i -S @wilkr/alpine-rippleAdd the x-ripple directive to your project by importing the package.
import Alpine from "alpinejs";
import Ripple from "@wilkr/alpine-ripple";
Alpine.plugin(Ripple);
window.Alpine = Alpine;
window.Alpine.start();Import the package styles into your css.
@import "@wilkr/alpine-ripple/dist/alpine-ripple.css";Add the x-ripple directive to any element, which in most cases will be a <button>.
<button x-data x-ripple>Click me</button>This will result in a ripple effect when the button is clicked. By default, the ripple will be white, but this can be changed globally or on a per-element basis.
More documentation can be found here: https://randallwilk.dev/docs/alpine-ripple
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
alpine-ripple is heavily inspired from:
The MIT License (MIT). Please see License File for more information.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent