1<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
1<div x-data="{ open: false }">
2 <button @click="open = true">Open Dropdown</button>
3
4 <ul
5 x-show="open"
6 @click.away="open = false"
7 >
8 Dropdown Body
9 </ul>
10</div>
1<div x-data="{ open: false }">
2 <button @click="open = true">Open Dropdown</button>
3
4 <ul
5 x-show="open"
6 @click.away="open = false"
7 >
8 Dropdown Body
9 </ul>
10</div>
11<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
1<div x-data="{ tab: 'foo' }">
2 <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
3 <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
4
5 <div x-show="tab === 'foo'">Вкладка Foo</div>
6 <div x-show="tab === 'bar'">Вкладка Bar</div>
7</div>
1< script src = " https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/dist/alpine.min.js " defer > </ script >
1<html> <head> ... <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> ...</html>