Very small libary to use without compilation or extra problems muche beter then jquery you can add it via script tag and use it. Small file. Alpine is "reactive" in the sense that when you change a piece of data, everything that depends on that data "reacts" automatically to that change.
https://alpinejs.dev/start-here#building-a-dropdown
Vue js is really standard right now everything is easy to use from
https://tailwindui.com/
But are also very interesting components to find with modern forms. I can reuse it for applications and upload of CV and application on jobsite.
https://github.com/ditdot-dev/vue-flow-form/
https://github.com/ditdot-dev/vue-flow-form/blob/master/src/assets/css/themes/theme-green.css
We will go through very small example with Alpine and see which components for which objectives are needed. It could be that we use it in production
We start with a tutorial at https://alpinejs.dev/start-here
Minimal code
<html><head>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script></head><body><h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body></html>
Then we'll try a counter...
<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span></div>
Ok, it looks good.
Menu
Then we can test menu with a component
My final goal is to use a Tailwind UI without the overkill of Vue or React. So that I can still stay in my confortable static pages which I can publish on a fast host for static pages.
First test to create a menu with Alpinesjs
You need only a view lines of code to make menu working.
<div x-data="{ open: false }"> Above menu
@click="open = false" In button to open or close menu
x-show="open" Menu div it self.
<div x-data="{ isOpen: false }" class="relative">
<button type="button" @click="isOpen = !isOpen" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
Options
</button>
<div
x-show="isOpen"
x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75 transform"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs">Test menu</div></div></div>
Then full menu for Tailwind UI would look like this....
If you use TailwindUI templates then you have to use HTML version and add alpine in menu tage.
For example:
<div x-show="open" x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75 transform"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.outside="open = false"
class="absolute inset-x-0 top-0 z-30 origin-top-right transform p-2 transition md:hidden"
>
To see a full example you can go here....
See full code example.. Very nice.. Implemented very quickly.
https://alpinejs-tailwind-ui.glitch.me
I don't know how is it for production but for development is almost perfect.... I do two script tags in head and everything just works. Minimal code. For a menu is perfect in my opinion to put together a few marketing pages of content.
I will continue to build homepage with this interesting technology and it may also come into production.
Comments
Post a Comment