Diego Ibáñez diegoibanezr
diegoibanezr
/ alpinejs-parallax.js
Created
January 16, 2025 03:01
— forked from kevnk/alpinejs-parallax.js
Parallax directive for alpinejs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Installation and setup: | |
| * 0. Install AlpineJS: `npm i -S alpinejs` | |
| * 1. Make sure AlpineJS is running by adding `x-data` attribute on opening `<body>` tag | |
| * 2. Add `x-parallax="path/to/image.jpg"` on element to add parallax bg image | |
| * | |
| * PS. this code was partially generated from ChatGPT 4 | |
| */ | |
| // Helper function to load an image and return its natural dimensions |
diegoibanezr
/ toggle-switch.blade.php
Last active
December 30, 2024 14:19
AlpineJS Toggle Switch Component (Laravel / Livewire, Blade, AlpineJS, TailwindCSS)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- | |
| Example | |
| <x-toggle-switch :checked="$originalState" x-on:toggle="$wire.updateState()" wire:model="form.option" id="switch-input" /> | |
| --}} | |
| @props(['checked' => false, 'disabled' => false]) | |
| @php | |
| $attrs = ['name', 'x-model', 'wire:model', 'wire:model.live', 'value', 'id']; | |
| @endphp |