Download the PHP package lukeraymonddowning/alpinimations without Composer
On this page you can find all versions of the php package lukeraymonddowning/alpinimations. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lukeraymonddowning/alpinimations
More information about lukeraymonddowning/alpinimations
Files in lukeraymonddowning/alpinimations
Package alpinimations
Short Description Streamline your animations by using these simple blade includes in your components!
License MIT
Homepage https://github.com/lukeraymonddowning/alpinimations
Informations about the package alpinimations
Alpinimations
Clean up your Alpine JS animations.
Table of Contents
- About Alpinimations
- Installation
- Usage
- Available animations
- Tailwind UI
- Dropdowns
- Menus
- Modals
- Notifications
- Slideovers
- Tailwind UI
- Contributing
- Code of conduct
- License
About Alpinimations
Alpinimations helps you clean up your Laravel blade files when using Alpine JS. Alpine has a super powerful animation system, but it can often bloat your HTML. This package bundles common animations into small blade files that you can include in your HTML.
We currently support all Tailwind UI animations and will be adding animations from more places over time.
Installation
To install the package, simply run composer require lukeraymonddowning/alpinimations
in the terminal from the root of
your Laravel project.
If you'd like to edit the animation files, you can publish the views by running
php artisan vendor:publish --tag=alpinimations
.
Usage
Using Alpinimations couldn't be simpler. Let's take a super awesome Tailwind UI component, the slideover. After copying over the HTML from the Tailwind UI component library, you'll have something like this:
Note that Tailwind UI includes the animations we should apply. These animations are included out of the box with Alpinimations. Let's sweeten up our component with Alpine:
Note how we can use the @anim
blade directive to include all the necessary alpine animation directives. A list of all Tailwind UI animations available can be found below.
We can go even further here. As most animations are coupled with x-show
, Alpinimations includes an @xshow
blade directive. Check it out:
Suuuuuper clean.
Available animations
Tailwind UI
Dropdowns
tailwindui.dropdown.panel
- Can apply to all dropdown components. Tailwind UI docs
Menus
tailwindui.menu.card
- Can apply to mobile menus such as seen in Tailwind UI hero mobile menus. Tailwind UI docstailwindui.menu.flyout
- Works with all flyout menus. Tailwind UI docstailwindui.menu.off-canvas
- For those swanky mobile sidebar menus. Tailwind UI docstailwindui.menu.overlay
- For any overlay backgrounds needed when menus are displayed, especially in mobile. Tailwind UI docs
Modals
tailwindui.modal.overlay
- The overlay that shows behind a modal when it is displayed. Tailwind UI docstailwindui.modal.panel
- The actual panel/card that shows the modal content. Tailwind UI docs
Notifications
tailwindui.notification.panel
- The container for the notification. Tailwind UI docs
Select Boxes
tailwindui.select.popover
- The option menu popover. Tailwind UI docs
Slideovers
tailwindui.slideover.close-button
- The close button for a slideover. This could apply to any close button. Tailwind UI docstailwindui.slideover.overlay
- The background overlay that applies to certain slideovers. Tailwind UI docstailwindui.slideover.panel
- The actual slideover panel/card that will contain your content. Tailwind UI docs
Contributing
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the Laravel documentation.
Code of Conduct
In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.
License
The Laravel framework is open-sourced software licensed under the MIT license.