Skip to content

Latest commit

 

History

History
65 lines (49 loc) · 1.35 KB

README.md

File metadata and controls

65 lines (49 loc) · 1.35 KB
Raw

Alpine.js plugin Screen

GitHub release (latest by date)

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

  • $width This magic helper will return window.outerWidth

  • $height This 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>