- Notifications
You must be signed in to change notification settings - Fork0
Alpine v3.x plugin to manually manage components at different breakpoints
License
wrsdesign/alpinejs-breakpoints
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
AAlpine.js plugin and magic method that helps components respond to 📱 💻 🖥 breakpoint changes.
You can include the CDN build of this plugin as a<script> tag, just make sure to include it before Alpinejs file.
<scriptdefersrc="https://unpkg.com/alpinejs-breakpoints"></script><scriptdefersrc="https://unpkg.com/alpinejs"></script>
You can install Intersect from NPM for use inside your bundle like so:
npm install alpinejs-breakpoints
Then initialize it from your bundle:
importAlpinefrom'alpinejs'importbreakpointfrom'alpinejs-breakpoints'Alpine.plugin(breakpoint)Alpine.start()
First define the breakpoints for all screen sizes you want, as in the example below:
:root {--breakpoint:'unset';}@media screenand (min-width:567px) {:root {--breakpoint:'sm'; }}@media screenand (min-width:900px) {:root {--breakpoint:'md'; }}@media screenand (min-width:1200px) {:root {--breakpoint:'lg'; }}@media screenand (min-width:1600px) {:root {--breakpoint:'2xl'; }}
An example of markup for a component that reacts to screen size changes.
<divx-data="{ text: null }"x-text="text"x-breakpoint=" if($isBreakpoint('lg+')) text = 'Large screen and above' if($isBreakpoint('md-')) text = 'Medium screen and below'"></div>
The plugin monitors changes to the--breakpoint variable throughx-effect, with each change using the$isBreakpoint() magic method, you can check the current breakpoint and call the desired behavior.
$isBreakpoint() method takes a breakpoint string from your css and optional+ or- modifier.
Example:
$isBreakpoint('xl')<!-- will work only on [xl] screen --> $isBreakpoint('lg+')<!-- will work on [lg xl 2xl] (lg and above) screens --> $isBreakpoint('md-')<!-- will work on [md sm unset] (md and below) screens -->// The default breakpoints array:// ['unset', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']//// You can change default breakpoints array:window.AlpineBreakpointPluginBreakpointsList=['mobile','tablet','desktop']
About
Alpine v3.x plugin to manually manage components at different breakpoints
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.