alpinejs-screen
alpinejs-screen copied to clipboard
Published
20 hours ago •
victoryoalli
victoryoalli
An Alpine JS Screen Plugin lets you programmatically monitor changes to the size of the screen
Alpine.js plugin Screen
An Alpine JS Screen Plugin lets you programmatically monitor changes to the size of the screen
Instalation
Via script include
<script src="/js/screen.min.js" defer></script>
<script src="/js/alpine.js" defer></script>
Via CDN
<!-- Alpine Plugins -->
<script src="https://unpkg.com/@victoryoalli/[email protected]/dist/screen.min.js" defer></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Via NPM
npm i @victoryoalli/alpinejs-screen
import Alpine from 'alpinejs'
import screen from '@victoryoalli/alpinejs-screen'
Alpine.plugin(screen)
window.Alpine = Alpine
window.Alpine.start()
x-screen
Directive
<div x-data x-screen="alert('screen resized')"></div>
$width and $height
Magic helpers
-
$widthThis magic helper will return window.outerWidth -
$heightThis magic helper will return window.outerHeight
Example
Using $width magic helper
<html>
<script src="/js/screen.min.js" defer></script>
<script src="/js/alpine.js" defer></script>
<div x-screen="isMobile = ($width<1024)">
<span x-show="isMobile"> MOBILE </span>
</div>
</html>
Metadata
21
Stars
0
Forks
Watchers
Owner
victoryoalli
Metadata
An Alpine JS Screen Plugin lets you programmatically monitor changes to the size of the screen