Scribd Logo
Upload

Welcome to Scribd!

  • Alpine JS

    Uploaded by

    Jamir Hossain
    17 views3 pages

    Original Title

    AlpineJS

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views3 pages

    Alpine JS

    Uploaded by

    Jamir Hossain

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-
    ratio,line-clamp"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
    rel="stylesheet">
    </head>
    <body>
    <div class="prose">
    <!-- ... -->
    </div>
    </body>
    </html>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></


    script>
    <script defer
    src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script>

    npm install alpinejs

    import Alpine from 'alpinejs'


    window.Alpine = Alpine
    Alpine.start()

    <script src="{{ asset('js/app.js') }}" defer></script>

    <div
    x-data="{
    search: '',

    items: ['foo', 'bar', 'baz'],

    get filteredItems() {
    return this.items.filter(
    i => i.startsWith(this.search)
    )
    }
    }"
    >
    <input x-model="search" placeholder="Search...">

    <ul>
    <template x-for="item in filteredItems" :key="item">
    <li x-text="item"></li>
    </template>
    </ul>
    </div>
    x-data="{ megaMenuOpen: false }" @mouseenter="megaMenuOpen = true"
    @mouseleave="megaMenuOpen = false"

    x-bind:class="{ 'rotate-90': megaMenuOpen }"

    <button @mouseenter="hovering = true" @mouseleave="hovering = false" x-


    bind:class="{ 'bg-blue-500': hovering, 'bg-gray-300': !hovering }">Hover
    me</button>

    Transition
    -----------

    x-transition: enter --- enter-start enter-end


    x-transition:leave --- leave-start leave-end

    x-transition:enter="transition-transform origin-top ease-out duration-300"


    x-transition:enter-start="scale-0"
    x-transition:enter-end="scale-100"
    x-transition:leave="transition-transform origin-top ease-in duration-300"
    x-transition:leave-start="scale-100"
    x-transition:leave-end="scale-0"

    x-show="megaMenuOpen"
    x-transition:enter="transition-transform origin-top ease-out duration-
    300"
    x-transition:enter-start="scale-0"
    x-transition:enter-end="scale-100"
    x-transition:leave="transition-transform origin-top ease-in duration-300"
    x-transition:leave-start="scale-100"
    x-transition:leave-end="scale-0"
    class="absolute left-0 mt-2 bg-white p-4 shadow-lg w-96"

    x-show="megaMenuOpen"
    x-transition:enter="transition-opacity ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-in duration-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="grid grid-cols-4 gap-4"
    x-show="megaMenuOpen"
    x-transition:enter="transition-transform ease-out duration-300"
    x-transition:enter-start="translate-y-8"
    x-transition:enter-end="translate-y-0"
    x-transition:leave="transition-transform ease-in duration-300"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-8"

    You might also like