@wilkr/alpine-ripple

1.1.2 • Public • Published

Help support the maintenance of this package by sponsoring me.

alpine-ripple

GitHub tag (latest by date) Npm downloads GitHub stars

social image

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 <script> and <link> tags in the <head> of your document, just before Alpine.

<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
></script>

NPM

npm i -S @wilkr/alpine-ripple

Add 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";

Usage

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.

Documentation

More documentation can be found here: https://randallwilk.dev/docs/alpine-ripple

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email randall@randallwilk.dev instead of using the issue tracker.

Credits

alpine-ripple is heavily inspired from:

License

The MIT License (MIT). Please see License File for more information.

Package Sidebar

Install

npm i @wilkr/alpine-ripple

Weekly Downloads

0

Version

1.1.2

License

MIT

Unpacked Size

74.2 kB

Total Files

20

Last publish

Collaborators

  • wilkr