alpine-js/attributebindexample.html at master · yanikkumar/alpine-js · 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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine JS</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        .bold {
            font-weight: bold;
        }

        .progress {
            height: 25px;
            width: 300px;
            background-color: #ccc;
        }

        .progress-inner {
            height: 25px;
            background-color: slategray;
        }
    </style>
</head>
<body>
<div x-data="{
  selected: [],
  people: [
  {id: 1, name: 'John'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Alex'},
  ]
}"
>
    <!--    <span x-text="selected"></span>-->
    <template x-for="person in people">
        <div>
            <input type="checkbox" x-bind:id="`person_${person.id}`" x-bind:value="person.id"
                   x-model.number="selected"/>
            <span x-text="person.name" x-bind:class="{'bold': selected.includes(person.id)}"></span>
        </div>
    </template>
</div>

<hr>

<div x-data="{
progress: 50,
increase() {
        this.progress+=1
},
init(){
let interval = setInterval(()=>{
    if(this.progress == 99) {
    clearInterval(interval)
    }
    this.increase()
    }, 100)
}
}"
>
    <div class="progress">
        <div class="progress-inner" x-bind:style="`width:${progress}%`">
            <span x-text="`${progress}%`" style="color: white"></span>
        </div>
    </div>
    <button @click="increase">Increase Progress</button>
</div>
</body>
</html>