Alpine.js feature test

alpinejs-test.html

<script src="https://unpkg.com/alpinejs" defer></script>

<style>
  body{
    background-color: #444;
    color: #ddd;
  }
</style>


<h1>Számláló</h1>
<!--
x-text="" a szöveget módosítja
-->
<div x-data="{ counter : 0 }">
    <button @click="counter++">Add</button>
    <div x-text="counter"></div>
    <div>
</div>



<h1>Adat és szöveg azonos elemen</h1>
<p x-data="{ label: 'Hello' }" x-text="label"></p>



<h1>Toggle</h1>
<!--
x-data={ javascript objektum } ami állapotot tárol csak a gyerekek érik el
@event="javascript kifejezés" az event-re reagálunk
x-show=true/false mutat vagy nem mutat
x-transition opcionális, ease lesz így
bármely x-* lehet js kifejezés
-->
<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <span x-show="open" x-transition.duration.500ms>Content...</span>
</div>



<h1>Dropdown</h1>
<div x-data="{ open: false }">
    <button @click="open = true">Show</button>
    <div x-show="open" @click.outside="open = false">Contents... click outside to close (show button also outside)</div>
</div>



<h1>Visszaír</h1>
<!--
x-model egy input értékét a meglévő data elemhez rendeljük
-->
<div x-data="{ szoveg: '' }">
    <input type="text" x-model="szoveg">
    <div x-text="szoveg"></div>
</div>



<h1>Színesség</h1>
<!--
:attributum   egy meglévő data elemet redelünk egy ATTRIBÚTUMHOZ (pl class, style, disabled...)
-->
<style>.bgred{ background-color: red; }</style>
<button x-data="{ red: false }"
    :class="red ? 'bgred' : ''"
    @click="red = ! red"
>
    Toggle Red
</button>


<h1>Ciklus</h1>
<ul x-data="{adatok: ['egy','ketto','harom']}">
    <template x-for="a in adatok">
        <li x-text="a"></li>
    </template>
</ul>


<h1>HTML módosítás</h1>
<!--
x-text esetén a tag-ek is megjelennének
-->
<div x-data="{ title: '<p>Start Here</p>' }">
    <div x-html="title"></div>
</div>


<h1>Globális állapot és tab-ok</h1>
<!--
létrehozás: Alpine.store('elnevezés',{...})
-->
<script>
document.addEventListener('alpine:init', () => {
  Alpine.store('tabs', {
      current: 'first'
  })
})
</script>

<div x-data>
    <button @click="$store.tabs.current = 'first'">First Tab</button>
    <button @click="$store.tabs.current = 'second'">Second Tab</button>
    <button @click="$store.tabs.current = 'third'">Third Tab</button>
</div>

<div x-data>
  <div x-show="$store.tabs.current == 'first'"> first content</div>
  <div x-show="$store.tabs.current == 'second'"> second content </div>
  <div x-show="$store.tabs.current == 'third'"> third content </div>
</div>


<h1>Különböző tartalom különböző hash-re</h1>

<div x-data="{ 
  get gethash() { return window.location.hash; } 
}">
    Aktuális hash:<span x-text='gethash'></span>

    <div x-show="gethash == '#elso'"> első content</div>
    <div x-show="gethash == '#masodik'"> masodik content</div>
    <div x-show="gethash == '#harmadik'"> harmadik content</div>
</div>

<template x-for="h in ['#elso','#masodik','#harmadik']">
    <a :href="h" x-text="h"></a>
</template>