Tương tự như bất kỳ thuộc tính nào khác, bạn có thể chỉ định các lớp với một thuộc tính JavaScript. Ở đây, chúng ta có thể thêm một lớp flipped vào thẻ:
App.svelte
<button
class="card {flipped ? 'flipped' : ''}"
on:click={() => flipped = !flipped}
>Điều này hoạt động như dự kiến — nếu bạn click vào thẻ bây giờ, nó sẽ lật.
Tuy nhiên, chúng ta có thể làm cho nó đẹp hơn. Thêm hoặc xóa một lớp dựa trên một vài điều kiện là một mẫu thiết kế phổ biến trong phát triển UI đến mức mà Svelte đã bao gồm một chỉ thị đặc biệt để đơn giản hóa nó:
App.svelte
<button
class="card"
class:flipped={flipped}
on:click={() => flipped = !flipped}
>Chỉ thị này có nghĩa là 'thêm lớp flipped mỗi khi flipped là trị đúng'.
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
<script>
let flipped = false;
</script>
<div class="container">
Lật cái thẻ
<button
class="card"
on:click={() => flipped = !flipped}>
<div class="front">
<span class="symbol">♠</span>
</div>
<div class="back">
<div class="pattern"></div>
</div>
</button>
</div>
<style>
.container {display: flex;
flex-direction: column;
gap: 1em;
height: 100%;
align-items: center;
justify-content: center;
perspective: 100vh;
}
.card {position: relative;
aspect-ratio: 2.5 / 3.5;
font-size: min(1vh, 0.25rem);
height: 80em;
background: var(--bg-1);
border-radius: 2em;
transform: rotateY(180deg);
transition: transform 0.4s;
transform-style: preserve-3d;
padding: 0;
user-select: none;
cursor: pointer;
}
.card.flipped {transform: rotateY(0);
}
.front, .back {display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
backface-visibility: hidden;
border-radius: 2em;
border: 1px solid var(--fg-2);
box-sizing: border-box;
padding: 2em;
}
.front {background: url(./svelte-logo.svg) no-repeat 5em 5em, url(./svelte-logo.svg) no-repeat calc(100% - 5em) calc(100% - 5em);
background-size: 8em 8em, 8em 8em;
}
.back {transform: rotateY(180deg);
}
.symbol {font-size: 30em;
color: var(--fg-1);
}
.pattern {width: 100%;
height: 100%;
background-color: var(--bg-2);
/* pattern from https://projects.verou.me/css3patterns/#marrakesh */
background-image:
radial-gradient(var(--bg-3) 0.9em, transparent 1em),
repeating-radial-gradient(var(--bg-3) 0, var(--bg-3) 0.4em, transparent 0.5em, transparent 2em, var(--bg-3) 2.1em, var(--bg-3) 2.5em, transparent 2.6em, transparent 5em);
background-size: 3em 3em, 9em 9em;
background-position: 0 0;
border-radius: 1em;
}
</style>