-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-alpine.html
139 lines (125 loc) · 5.2 KB
/
demo-alpine.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alpine.js demo</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<!-- Pikaday date picker -->
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
.red {
color: red;
}
</style>
</head>
<body>
<main>
<h1>Alpine.js demo examples</h1>
<p>See also <a href="https://alpinejs.dev/components">ready-made components</a> (most are paid)</p>
<h2>Simple counter</h2>
<p>x-data : Declare an object that you will track; with dynamic properties (can be empty)<br/>
@click shorthand for x-on:click (like Vue) : listen for a click event<br/>
x-text : bind a <strong>property</strong> (or any js expression) to the element</p>
<div x-data="{ count: 0 }">
<button @click="count++">+</button>
<button @click="count--">-</button>
<span x-text="count"></span>
</div>
<h2>Update letter count (x-model)</h2>
<p>x-model : bind a property in two directions (instead of one way using :value)<br/>
:class shorthand for x-bind:class : bind any html attribute (class, disabled,...)</p>
<div x-data="{ tweet: 'Say something'}">
<textarea x-model="tweet"></textarea>
<div x-text="tweet.toUpperCase()"></div>
<div x-text="tweet.length" :class=" tweet.length > 20 ? 'red' : '' "></div>
</div>
<h2>Update input field, in two directions (x-model)</h2>
<p>Equivalent for x-model</p>
<form x-data="{ name: 'John Doe' }">
<input type="text"
x-model="name"
>
<!-- is equivalent to: -->
<input type="text"
:value="name"
@input="name = $event.target.value"
>
<p x-text="name"></p>
</form>
<h2>Init, and control third party library</h2>
<p>Version 1</p>
<!-- use x-init to call exteral library -->
<div x-data="{}" x-init="new Pikaday({ field: $refs.input })">
<input type="text" x-ref="input">
</div>
<p>Version 2, all code on same element</p>
<!-- all on same element; x-data is empty; $el is magic method (this element) -->
<input type="text" x-data x-init="new Pikaday({ field: $el })">
<h2>Dropdown, show/hide (useful for mobile devices, click away to hide, including on button)</h2>
<p>Show / hide with little animation (transition)<br>
Click away from content to hide, including clicking again on the button. Or hit Escape.<br>
See also <a href="https://alpinejs.dev/plugins/collapse">Collapse plugin</a>, <a
href="https://alpinejs.dev/plugins/anchor">Anchor plugin</a>.</p>
<p>Version 1</p>
<!-- Using @click.away and @keydown.escape.window modifiers-->
<div x-data="{ open: false }">
<button @click="open = true">Show dropdown</button>
<div x-show="open" x-transition @click.away=" open = false " @keydown.escape.window=" open = false ">Dropdown
content
</div>
</div>
<p>Version 2, extracted function and method</p>
<div x-data="dropdown()">
<button @click="show()">Show dropdown</button>
<div x-show="open" x-transition @click.away=" open = false " @keydown.escape.window=" open = false ">Dropdown
content
</div>
</div>
<script>
function dropdown() {
return {
open: false,
show() {
this.open = true;
}
}
}
</script>
<p>Version 3, a simple toggle with change of button text</p>
<div x-data="{ show: false }">
<button @click="show = ! show" x-text="show ? 'Hide' : 'Show'"></button>
<div x-show="show">
<a href="/" style="display: block;">Home</a>
<a href="/" style="display: block;">About</a>
<a href="/" style="display: block;">Contact</a>
</div>
</div>
<h2>Simple calculator</h2>
<!-- Add numbers -->
<!-- x-.model.number otherwise concatenation of strings-->
<input type="text" x-model.number="first"> <input type="text" x-model.number="second"> =
<output x-text="first + second"></output>
<h2>Simple tabs</h2>
<div x-data="{ currentTab: 'first'}">
<button @click="currentTab = 'first'" :class="{ 'active' : currentTab === 'first'}">First</button>
<button @click="currentTab = 'second'" :class="{ 'active' : currentTab === 'second'}">First</button>
<button @click="currentTab = 'third'" :class="{ 'active' : currentTab === 'third'}">First</button>
<div style="border: 1px dotted grey; padding: 1rem">
<div x-show="currentTab === 'first'">
<p>First tab</p>
</div>
<div x-show="currentTab === 'second'">
<p>Second tab</p>
</div>
<div x-show="currentTab === 'third'">
<p>Third tab</p>
</div>
</div>
</div>
</main>
</body>
</html>