oleg
/
alpine
镜像来自 https://github.com/alpinejs/alpine.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
							<html>
    <script src="/../../packages/collapse/dist/cdn.js" defer></script>
    <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <table>
        <tr>
            <td><code>x-on:click.away</code></td>
            <td>
                <div x-data="{ show: false }">
                    <button @click="show = true">Show</button>

                    <h1 x-show="show" @click.away="show = false">h1</h1>

                    <h2>h2</h2>
                  </div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-transition</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-transition:enter only (should see no blip)</code></td>
            <td>
                <main x-data="{ open: true }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition:enter.duration.500ms>
                        Hello 👋
                    </div>

                    <div x-show="!open">
                        There 👋
                    </div>
                </main>
            </td>
        </tr>

        <tr>
            <td><code>x-transition with dynamic classes</code></td>
            <td>
                <div x-data="{ open: false, props: {
                    ['x-transition:enter']() { return `transition ease-out duration-300`; },
                    ['x-transition:enter-start']() { return `opacity-0 transform scale-90`; },
                    ['x-transition:enter-end']() { return `opacity-100 transform scale-100`; },
                    ['x-transition:leave']() { return `transition ease-in duration-300`; },
                    ['x-transition:leave-start']() { return `opacity-100 transform scale-100`; },
                    ['x-transition:leave-end']() { return `opacity-0 transform scale-90`; },
                 }}">
                    <button @click="open = !open">Toggle</button>
                    <div x-bind="props" x-show="open">Hello 👋</div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-transition</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open">
                        <div x-show="open" x-transition.duration.250ms>
                            <h1>Hello 👋</h1>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-transition.opacity</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition.opacity>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-transition.scale</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition.scale>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>


        <tr>
            <td><code>x-transition.duration.1000ms</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition.duration.1000ms>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>

        <tr style="border-bottom: 1px solid black;">
            <td><code>x-transition.leave only with @click.outside</code></td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" @click.outside="open = false" x-transition.out.duration.1000ms>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div><code>x-transition:enter.opacity.duration.500ms</code></div>
                <div><code>x-transition:leave.scale.duration.250ms</code></div>
            </td>
            <td>
                <div x-data="{ open: false }">
                    <button @click="open = ! open">Toggle</button>

                    <div x-show="open" x-transition:enter.opacity.duration.500ms x-transition:leave.scale.duration.250ms>
                        Hello 👋
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div><code>x-transition:enter.delay.0ms x-transition:leave.delay.250ms</code></div>
                <div><code>x-transition:enter.delay.100ms x-transition:leave.delay.100ms</code></div>
                <div><code>x-transition:enter.delay.250ms x-transition:leave.delay.0ms</code></div>
            </td>
            <td>
                <div x-data="{ open: false }">
                    <button @mouseenter="open = true" @mouseleave="open = false">Toggle (mouseover)</button>

                    <div style="display: flex;" x-show="open">
                        <div x-show="open" x-transition:enter.delay.0ms x-transition:leave.delay.250ms>Hello 👋</div>
                        <div x-show="open" x-transition:enter.delay.100ms x-transition:leave.delay.100ms>Hello 👋</div>
                        <div x-show="open" x-transition:enter.delay.250ms x-transition:leave.delay.0ms>Hello 👋</div>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td><code>x-collapse with no overflow hidden when expanded</code></td>
            <td>
                <div x-data="{ show: false }">
                    <button @click="show = !show">Show</button>

                    <div x-show="show" x-collapse.duration.2000ms>
                        <div class="ring-2 ring-offset-2 ring-red-400 py-10 bg-gray-200">my red ring should be fully visible</div>
                    </div>
                  </div>
                </div>
            </td>
        </tr>
    </table>
</html>