https://github.com/rawilk/alpine-ripple
Ripple effect (materialize) for Alpine.js.
https://github.com/rawilk/alpine-ripple
alpinejs ripple-effect
Last synced: 4 months ago
JSON representation
Ripple effect (materialize) for Alpine.js.
- Host: GitHub
- URL: https://github.com/rawilk/alpine-ripple
- Owner: rawilk
- License: mit
- Created: 2022-12-15T20:41:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T00:22:57.000Z (over 1 year ago)
- Last Synced: 2025-04-08T01:24:53.874Z (over 1 year ago)
- Topics: alpinejs, ripple-effect
- Language: JavaScript
- Homepage: https://randallwilk.dev/docs/alpine-ripple
- Size: 920 KB
- Stars: 19
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
> ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/rawilk).
# alpine-ripple
`alpine-ripple` is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive `x-ripple`.
## Requirements
- Alpine.js v3.x
- Tailwind CSS (only required if you want to use custom color classes on the directive)
## Installation
### CDN
Include the following `` and `<link>` tags in the `<head>` of your document, just before Alpine.
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@wilkr/alpine-ripple@1.x.x/dist/alpine-ripple.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/@wilkr/alpine-ripple@1.x.x/dist/alpine-ripple.min.js"
defer
>
```
### NPM
```bash
npm i -S @wilkr/alpine-ripple
```
Add the `x-ripple` directive to your project by importing the package.
```js
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.
```css
@import "@wilkr/alpine-ripple/dist/alpine-ripple.css";
```
## Usage
Add the `x-ripple` directive to any element, which in most cases will be a ``.
```html
Click me
```
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.
## Documentation
More documentation can be found here: https://randallwilk.dev/docs/alpine-ripple
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please email randall@randallwilk.dev instead of using the issue tracker.
## Credits
- [Randall Wilk](https://github.com/rawilk)
- [All Contributors](../../contributors)
`alpine-ripple` is heavily inspired from:
- [alHasandev/tailwind-button](https://github.com/alHasandev/tailwind-button)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.