Created
September 3, 2024 00:38
-
-
Save sejutaimpian/4e23fb45ad22c37ac9b1360712457440 to your computer and use it in GitHub Desktop.
Access AlpineJS Data From Outside
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
| <!DOCTYPE html> | |
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Access AlpineJS Data From Outside</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'selector', | |
| theme: { | |
| extend: { | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| [x-cloak] { | |
| display: none !important; | |
| } | |
| </style> | |
| <!-- plugin alpineJS, myScript, core alpineJS --> | |
| <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> | |
| </head> | |
| <body class="mx-auto antialiased bg-gray-100 max-w-7xl dark:bg-gray-900" x-data="{isDark: true}" | |
| :class="{'dark': isDark}" id="toggle"> | |
| <section class="relative flex items-center justify-center bg-blue-100 min-h-48 dark:bg-blue-900"> | |
| <label for="defaultToggle" class="inline-flex items-center gap-3 cursor-pointer"> | |
| <input id="defaultToggle" type="checkbox" class="sr-only peer" role="switch" x-model="isDark" /> | |
| <span | |
| class="text-sm font-medium trancking-wide text-slate-700 peer-checked:text-black peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-slate-300 dark:peer-checked:text-white">Toggle</span> | |
| <div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-slate-300 bg-slate-100 after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-slate-700 after:transition-all after:content-[''] peer-checked:bg-blue-700 peer-checked:after:bg-slate-100 peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-slate-800 peer-focus:peer-checked:outline-blue-700 peer-active:outline-offset-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:border-slate-700 dark:bg-slate-800 dark:after:bg-slate-300 dark:peer-checked:bg-blue-600 dark:peer-checked:after:bg-slate-100 dark:peer-focus:outline-slate-300 dark:peer-focus:peer-checked:outline-blue-600" | |
| aria-hidden="true"></div> | |
| </label> | |
| <div class="absolute inset-x-0 bottom-0 flex items-center gap-3 py-2 justify-evenly"> | |
| <button type="button" @click="isDark = !isDark" | |
| class="px-4 py-2 text-sm font-medium tracking-wide text-center transition bg-blue-700 cursor-pointer whitespace-nowrap rounded-xl text-slate-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-blue-600 dark:text-slate-100 dark:focus-visible:outline-blue-600">Normal</button> | |
| <button type="button" @click="toggleisDark($data)" | |
| class="px-4 py-2 text-sm font-medium tracking-wide text-center transition bg-blue-700 cursor-pointer whitespace-nowrap rounded-xl text-slate-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-blue-600 dark:text-slate-100 dark:focus-visible:outline-blue-600">Passing | |
| $data</button> | |
| </div> | |
| </section> | |
| <section class="inset-x-0 bottom-0 flex items-center gap-3 py-2 justify-evenly"> | |
| <button type="button" id="vanilla" | |
| class="px-4 py-2 text-sm font-medium tracking-wide text-center transition bg-blue-700 cursor-pointer whitespace-nowrap rounded-xl text-slate-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-blue-600 dark:text-slate-100 dark:focus-visible:outline-blue-600">Vanilla | |
| JS</button> | |
| <button type="button" x-data="{ | |
| toggleisDark2() { | |
| Alpine.$data(document.querySelector('#toggle')).isDark = !Alpine.$data(document.querySelector('#toggle')).isDark; | |
| } | |
| }" @click="toggleisDark2" | |
| class="px-4 py-2 text-sm font-medium tracking-wide text-center transition bg-blue-700 cursor-pointer whitespace-nowrap rounded-xl text-slate-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-blue-600 dark:text-slate-100 dark:focus-visible:outline-blue-600">Component | |
| Lain</button> | |
| </section> | |
| <script> | |
| // Cara vanilla js | |
| const toggle = document.querySelector('#toggle'); | |
| const vanilla = document.querySelector('#vanilla'); | |
| vanilla.addEventListener('click', () => { | |
| Alpine.$data(toggle).isDark = !Alpine.$data(toggle).isDark; | |
| }); | |
| // Cara passing $data | |
| function toggleisDark(data) { | |
| data.isDark = !data.isDark; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment