alpine-ripple
Usage
X-Ripple-Focus
On this page
Introduction
The x-ripple-focus
directive can be attached to an element to provide a pulsating ripple effect when the element is focused. This directive is compatible
with the x-ripple
directive, and can be used in conjunction with it.
<button x-data x-ripple-focus>Focus me</button>
When this button is focused, it will show a pulsating ripple effect.
{note} For the
x-ripple-focus
directive to work, you must have thex-data
directive applied to the element as well, or the element must be inside the scope of anx-data
directive.
Options
Certain aspects of the ripple focus effect can be customized for this package. Some options can be set [globally via CSS](/docs/alpine-ripple/v1/usage d/global-customization), or on a per-element basis.
Color
By default, the ripple focus color is white, which should work in most cases. However, if you want to change the color, you can do so with a color
modifier.
<button x-data x-ripple-focus.color.#000>Focus me</button>
This will result in a black ripple focus effect when the button is focused. If you're using Tailwind, you may define a color class and use that instead.
<button x-data x-ripple-focus.color.green-500>Focus me</button>
This will result in the ripple focus element getting the !bg-green-500
class added to it. !
is added to the class to specify that it is important,
so it overrides any other styles. to prevent Tailwind from puring your color classes, you should be sure to add them to your safelist
in your
tailwind.config.js
file if you're not using them anywhere else.
{note} If you're using the
x-ripple-focus
directive in conjunction with thex-ripple
directive, the color of the ripple focus effect will default to the color of the ripple effect unless you specify a color for the ripple focus effect.
Other Options
The rest of the options for the ripple focus effect are only able to be changed globally via CSS. See the X-Ripple-Focus section for more information.