Pointer events utilities Since v1.1.0+
Halfmoon comes with utility classes which can be used to set the pointer-events property of elements.
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Halfmoon comes with utility classes which can be used to set the pointer-events property of elements.
The following table shows the available classes for setting the pointer-events property:
Class | Description |
---|---|
.pointer-events-auto | Sets the pointer-events: auto property |
.pointer-events-none | Sets the pointer-events: none property |
The above classes work in the following ways:
You can see a common use case for these utilities in the example below: preventing the second logo image from being draggable or selectable (using .pointer-events-none).
<!-- Pointer events auto (default, so class is redundant here) -->
<img src="..." class="img-fluid pointer-events-auto" alt="...">
<!-- Pointer events none (image not draggable or selectable) -->
<img src="..." class="img-fluid pointer-events-none" alt="...">
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .