learnAlpineJs/index.html at main · ghulam46/learnAlpineJs · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar Alpine JS</title>

    <!-- tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- alpine js -->
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <!-- 1. x-data sebagai data yang akan di berikan ke element tertentu
            data open bernilai false
    -->
    <div x-data="{ open: false }" class="mx-5 mt-5">
      <h1 class="font-semibold text-xl bg-slate-500 w-28 p-2 text-white">
        Alpine JS
      </h1>
      <!-- 2. menambahkan event ketika di klik @click data open bernilai true -->
      <button @click="open = true" class="mt-5 bg-orange-700 text-white p-3">
        Toggle
      </button>

      <!-- x-show untuk menampilkan element
             @click.outside berguna ketika menghilangkan element dropdown diluar element
             atau ketika klik di sembarang kecuali di element yg bersangkutan
        -->
      <div
        x-show="open"
        @click.outside="open = false"
        class="bg-orange-400 w-28 mt-1 p-3 text-black"
      >
        <div class="">Content1...</div>
        <div class="">Content2...</div>
        <div class="">Content3...</div>
      </div>
    </div>

    <!-- FITUR TAMBAH DATA -->
    <div
      class="mt-5 p-5"
      x-data="{
            count: 0,
            showAlert(){alert('HelloWorld!')}
        }"
    >
      <div class="" x-data="{pesan: 'Hello World'}">
        <h2 x-text="pesan"></h2>
        <br />
      </div>

      <button x-on:click="showAlert()" class="bg-blue-300 p-3">Tampilkan</button
      ><br /><br />

      <!-- x-on:click shorthand to @click -->
      <button class="bg-slate-400 p-3 rounded-sm" @click="count++">
        Increment
      </button>
      <span x-text="count" class="mx-3"></span>
    </div>

    <!-- x-init -->
    <!-- CARA 1 x-init -->
    <div class="" x-data="{ message: 'ini komponen alpine' }">
      <div class="" x-init="console.log('ini pesan dari x-init')"></div>
    </div>

    <!-- CARA 2 x-init didalam x-data -->
    <div
      class=""
      x-data="{
            message2: 'ini komponen alpine 2',
            init(){
                console.log('ini pesan dari attribut init di attribut x-data')
            }
        }"
    ></div>

    <div
      class=""
      x-data="{
            message3: 'ini komponen alpine 3'
        }"
    >
      <div
        x-init="$nextTick(() => { console.log('ini dieksekusi ketika komponen alpine yaitu message3 sudah selesai di render') })"
      ></div>
    </div>

    <!-- X-MODEL -->
    <h1>x-model</h1>
    <div x-data="{ message :  ' ' }">
      <input type="text" x-model="message" class="border-2 mb-3" />
      <span x-text="message"></span>
    </div>

    <div x-data="{ message :  ' ' }">
      <input type="text" x-model="message" class="border-2" />
      <button x-on:click="message='Foala...'" class="px-3 bg-gray-100">
        Change Message
      </button>
    </div>

    <div x-data="{ color :  ' ' }">
      <select x-model="color">
        <option value="" disabled>Select A Color</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
      </select>
      Color : <span x-text="color"></span>
    </div>
  </body>
</html>