1.0.5 • Published 1 month ago
alpinejs-overlap v1.0.5
Alpine JS Overlap
Check if an element is overlapping another 🥞
Install
With a CDN
<script
defer
src="https://unpkg.com/alpinejs-overlap@latest/dist/overlap.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
With a Package Manager
yarn add -D alpinejs-overlap
npm install -D alpinejs-overlap
import Alpine from 'alpinejs'
import overlap from 'alpinejs-overlap'
Alpine.plugin(overlap)
Alpine.start()
Example
<div class="relative">
<div id="TargetEl" class="w-32 h-32 bg-teal-700 rounded-lg"></div>
<div
x-data="{ isOverlap: $overlap('#TargetEl') }"
x-on:resize.window="isOverlap = $overlap('#TargetEl')"
:class="{ 'bg-red-700': isOverlap, 'bg-teal-700': !isOverlap }"
class="absolute inset-y-0 right-0 grid w-32 h-32 rounded-lg place-content-center"
>
<p
x-text="isOverlap ? 'Overlapping' : 'Will Overlap'"
class="text-sm font-medium text-white"
></p>
</div>
</div>
In this example we check for an initial overlap and then use Alpine JS
resize.window
listener to check while resizing the window.
See the example in action on Check Elements are Overlapping - HyperJS.
Stats