You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Από την έκδοση v0.48.0, ξαναγράψαμε το σύστημα κίνησης κλικ με πολύ πιο συνεπείς συμπεριφορές. Αυτό μπορεί να αλλάξει τις συμπεριφορές των υπάρχοντων διαφανειών σας σε ακραίες περιπτώσεις. Ενώ αυτή η σελίδα δείχνει το νέο σύστημα κλικ, μπορείτε να βρείτε περισσότερες λεπτομέρειες σχετικά με την αναδιαμόρφωση στο [#1279](https://github.com/slidevjs/slidev/pull/1279).
11
+
5
12
### `v-click`
6
13
7
14
Για να εφαρμόσετε "κινήσεις click" σε στοιχεία, μπορείτε να χρησιμοποιήσετε την οδηγία `v-click` ή τα `<v-click>` components
8
15
9
16
```md
10
-
# Γεια
11
-
12
-
<!-- Χρήση component: αυτό θα είναι αόρατο μέχρι να πατήσετε "next" -->
13
-
<v-click>
14
-
15
-
Γεια σου Κόσμε
16
-
17
-
</v-click>
17
+
<!-- Χρήση component:
18
+
αυτό θα είναι αόρατο μέχρι να πατήσετε "next" -->
19
+
<v-click> Γεια σου **Κόσμε** </v-click>
18
20
19
-
<!-- Χρήση οδηγίας: αυτό θα είναι αόρατο μέχρι να πατήσετε "next" για δεύτερη φορά -->
20
-
<div v-click class="text-xl p-2">
21
-
22
-
Έι!
23
-
24
-
</div>
21
+
<!-- Χρήση directive:
22
+
αυτό θα είναι αόρατο μέχρι να πατήσετε "next" για δεύτερη φορά -->
23
+
<div v-click class="text-xl"> Έι! </div>
25
24
```
26
25
27
26
### `v-after`
28
27
29
-
Η χρήση του `v-after`είναι παρόμοια με το `v-click` αλλά θα κάνει το στοιχείο ορατό όταν ενεργοποιηθεί το προηγούμενο `v-click`.
28
+
Το `v-after`παρέχεται μόνο ως directive. Θα κάνει το στοιχείο ορατό όταν ενεργοποιηθεί το προηγούμενο `v-click`.
30
29
31
30
```md
32
-
<div v-click>Γεια σου</div>
33
-
<div v-after>Κόσμε</div>
31
+
<div v-click>Γεια σου</div>
32
+
<div v-after>Κόσμε</div>
34
33
```
35
34
36
-
Όταν κάνετε click στο κουμπί "next", τόσο το `Γεια σου` όσο και το `Κόσμε` θα εμφανιστούν μαζί.
35
+
Όταν πατήσετε "next", οι λέξεις `Γεια σου` και `Κόσμε` θα εμφανιστούν μαζί.
36
+
37
+
### Απόκρυψη μετά από κλικ
37
38
38
-
### `v-click-hide`
39
+
Προσθέστε έναν τροποποιητή `.hide` στο `v-click` ή στο `v-after` για να κάνετε το στοιχείο αόρατο μετά το κλικ, αντί να εμφανίζεται.
40
+
41
+
```md
42
+
<div v-click> Ορατό μετά από 1 κλικ </div>
43
+
<div v-click.hide> Κρυμμένο μετά από 2 κλικ </div>
44
+
<div v-after.hide> Κρυμμένο μετά από 2 κλικ </div>
45
+
```
39
46
40
-
Το ίδιο με το `v-click`, αλλά αντί να κάνει το στοιχείο να εμφανιστεί, κάνει το στοιχείο αόρατο μετά το click.
47
+
Για το στοιχείο `v-click`, μπορείτε να χρησιμοποιήσετε την ιδιότητα `hide` για να επιτύχετε το ίδιο αποτέλεσμα:
41
48
42
49
```md
43
-
<div v-click-hide>Γεια</div>
50
+
<v-click> Ορατό μετά από 1 κλικ </v-click>
51
+
<v-click hide> Κρυμμένο μετά από 2 κλικ </v-click>
44
52
```
45
53
46
54
### `v-clicks`
47
55
48
-
Το `v-clicks` παρέχεται μόνο ως component. Είναι μια συντομογραφία για την εφαρμογή της οδηγίας `v-click` σε όλα τα στοιχεία-παιδιά του. Είναι ιδιαίτερα χρήσιμο όταν δουλεύετε με λίστες.
56
+
Το `v-clicks` παρέχεται μόνο ως component. Είναι μια συντομογραφία για την εφαρμογή της οδηγίας `v-click` σε όλα τα στοιχεία-παιδιά του. Είναι ιδιαίτερα χρήσιμο όταν δουλεύετε με λίστες και πίνακες.
49
57
50
58
```md
51
59
<v-clicks>
52
60
53
61
- Στοιχείο 1
54
62
- Στοιχείο 2
55
63
- Στοιχείο 3
56
-
- Στοιχείο 4
57
64
58
65
</v-clicks>
59
66
```
60
67
61
68
Ένα στοιχείο θα γίνεται ορατό κάθε φορά που κάνετε click στο "next".
62
-
63
69
Δέχεται ένα prop `depth` για εμφωλευμένη λίστα:
64
70
65
71
```md
@@ -75,44 +81,108 @@
75
81
</v-clicks>
76
82
```
77
83
78
-
### Προσαρμοσμένος Αριθμός Clicks
84
+
Επίσης, μπορείτε να χρησιμοποιήσετε την ιδιότητα `every` για να καθορίσετε τον αριθμό των στοιχείων που θα εμφανίζονται μετά από κάθε κλικ:
79
85
80
-
Εξ ορισμού, το Slidev μετράει πόσα βήματα απαιτούνται πριν από τη μετάβαση στην επόμενη διαφάνεια. Μπορείτε να παρακάμψετε αυτή τη ρύθμιση περνώντας την επιλογή `clicks` frontmatter:
86
+
```md
87
+
<v-clicks every="2">
81
88
82
-
```yaml
83
-
---
84
-
# 10 click σε αυτή τη διαφάνεια, πριν προχωρήσετε στην επόμενη
85
-
clicks: 10
86
-
---
89
+
- Στοιχείο 1 (μέρος 1)
90
+
- Στοιχείο 1 (μέρος 2)
91
+
- Στοιχείο 2 (μέρος 1)
92
+
- Στοιχείο 2 (μέρος 2)
93
+
94
+
</v-clicks>
87
95
```
88
96
89
-
### Διάταξη
97
+
### Θέση
90
98
91
-
Περνώντας το δείκτη των click στις οδηγίες σας, μπορείτε να προσαρμόσετε τη σειρά της αποκάλυψης
99
+
Από προεπιλογή, οι κινήσεις κλικ πραγματοποιούνται μία προς μία. Μπορείτε να προσαρμόσετε τη θέση της κίνησης των στοιχείων χρησιμοποιώντας την ιδιότητα `at` ή το directive `v-click` με μία τιμή.
92
100
93
-
```md
94
-
<div v-click>1</div>
95
-
<div v-click>2</div>
96
-
<div v-click>3</div>
101
+
Όπως και το σύστημα διάταξης CSS, τα στοιχεία που κινούνται με κλικ μπορούν να είναι "σχετική" ή "απόλυτη":
102
+
103
+
#### Σχετική Θέση
104
+
105
+
Αυτή η πραγματική θέση των σχετικών στοιχείων υπολογίζεται με βάση τα προηγούμενα σχετικά στοιχεία:
106
+
107
+
~~~md
108
+
<div v-click> ορατό μετά από 1 κλικ </div>
109
+
<v-click at="+2"><div> ορατό μετά από 3 κλικ </div></v-click>
110
+
<div v-click.hide="'-1'"> κρυμμένο μετά από 2 κλικ </div>
111
+
112
+
```js {none|1|2}{at:'+5'}
113
+
1 // επισημαίνεται μετά από 7 κλικ
114
+
2 // επισημαίνεται μετά από 8 κλικ
97
115
```
116
+
~~~
117
+
118
+
> [!NOTE]
119
+
> Η προεπιλεγμένη τιμή του `v-click` είναι `'+1'` όταν δεν την καθορίζετε.
120
+
121
+
Στην πραγματικότητα, τα `v-after` είναι απλά συντομεύσεις για το `v-click` με την ιδιότητα `at`:
98
122
99
123
```md
100
-
<!-- η σειρά είναι αντίστροφη -->
101
-
<div v-click="3">1</div>
102
-
<div v-click="2">2</div>
103
-
<div v-click="1">3</div>
124
+
<!-- Οι ακόλουθες 2 χρήσεις είναι ισοδύναμες -->
125
+
<img v-after />
126
+
<img v-click="'+0'" />
127
+
128
+
<!-- Οι ακόλουθες 3 χρήσεις είναι ισοδύναμες -->
129
+
<img v-click />
130
+
<img v-click="'+1'" />
131
+
<v-click-gap size="1" /><img v-after />
104
132
```
105
133
106
-
```md
107
-
---
108
-
clicks: 3
109
-
---
134
+
:::info
135
+
Μόνο οι τιμές συμβολοσειράς που αρχίζουν με `'+'` ή `'-'` όπως `'+1'` αντιμετωπίζονται ως σχετικές θέσεις:
110
136
111
-
<!-- ορατό μετά από 3 clicks -->
112
-
<v-clicks at="3">
113
-
<div>Γεια</div>
114
-
</v-clicks>
137
+
| Τιμή | Είδος |
138
+
| -------------- | -------- |
139
+
|`'-1'`, `'+1'`| Σχετική |
140
+
|`+1` === `1`| Απόλυτη |
141
+
|`'1'`| Απόλυτη |
142
+
143
+
Επομένως, μην ξεχνάτε τα απλά εισαγωγικά για τις σχετικές τιμές.
144
+
:::
145
+
146
+
#### Απόλυτη Θέση
147
+
148
+
Η καθορισμένη τιμή είναι ο ακριβής αριθμός κλικ για την εμφάνιση του στοιχείου:
149
+
150
+
~~~md
151
+
<div v-click="3"> ορατό μετά από 3 κλικ </div>
152
+
<v-click at="2"><div> ορατό μετά από 2 κλικ </div></v-click>
153
+
<div v-click.hide="1"> κρυμμένο μετά από 1 κλικ </div>
154
+
155
+
```js {none|1|2}{at:3}
156
+
1 // επισημαίνεται μετά από 3 κλικ
157
+
2 // επισημαίνεται μετά από 4 κλικ
115
158
```
159
+
~~~
160
+
161
+
#### Μικτή Περίπτωση
162
+
163
+
Μπορείτε να συνδυάσετε τις απόλυτες και τις σχετικές θέσεις:
164
+
165
+
~~~md
166
+
<div v-click> ορατό μετά από 1 κλικ </div>
167
+
<div v-click="3"> ορατό μετά από 3 κλικ </div>
168
+
<div v-click> ορατό μετά από 2 κλικ </div>
169
+
<div v-click="'-1'"> ορατό μετά από 1 κλικ </div>
170
+
<div v-click="4"> ορατό μετά από 4 κλικ </div>
171
+
~~~
172
+
173
+
Το ακόλουθο παράδειγμα συγχρονίζει την επισήμανση των δύο τμημάτων κώδικα:
174
+
175
+
~~~md
176
+
```js {1|2}{at:1}
177
+
1 + 1
178
+
'α' + 'β'
179
+
```
180
+
181
+
```js {1|2}{at:1}
182
+
2
183
+
'αβ'
184
+
```
185
+
~~~
116
186
117
187
### Είσοδος & Έξοδος
118
188
@@ -124,6 +194,17 @@ clicks: 3
124
194
<div v-click="[2, 4]">Αυτό θα εμφανιστεί στο 2ο και 3ο κλικ και θα κρυφτεί ξανά μετά το 4ο.</div>
125
195
```
126
196
197
+
### Προσαρμοσμένη Συνολική Καταμέτρηση Κλικ
198
+
199
+
Από προεπιλογή, το Slidev μετράει πόσα βήματα απαιτούνται πριν από τη μετάβαση στην επόμενη διαφάνεια. Μπορείτε να παρακάμψετε αυτή τη ρύθμιση θέτοντας την επιλογή `clicks` frontmatter:
200
+
201
+
```yaml
202
+
---
203
+
# 10 κλικ σε αυτή τη διαφάνεια, πριν προχωρήσετε στην επόμενη
204
+
clicks: 10
205
+
---
206
+
```
207
+
127
208
### Μεταβάσεις Στοιχείων
128
209
129
210
Όταν εφαρμόζετε την οδηγία `v-click` στα στοιχεία σας, θα τους επισυνάψει το όνομα του class `slidev-vclick-target`. Όταν τα στοιχεία είναι κρυμμένα, θα επισυνάπτεται επίσης το όνομα του class `slidev-vclick-hidden`. Για παράδειγμα:
Copy file name to clipboardExpand all lines: guide/syntax.md
+11-35Lines changed: 11 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -121,20 +121,7 @@ function add(
121
121
```
122
122
~~~
123
123
124
-
Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση `lineNumbers: true` στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση `lines:true`. Σε περίπτωση που θέλετε να απενεργοποιήσετε την αρίθμηση για ένα συγκεκριμένο μπλοκ όταν ισχύει το `lineNumbers: true` μπορείτε να ορίσετε το `lines:false` για το συγκεκριμένο μπλοκ:
125
-
126
-
~~~md
127
-
```ts {2,3}{lines:true}
128
-
function add(
129
-
a: Ref<number> | number,
130
-
b: Ref<number> | number
131
-
) {
132
-
return computed(() => unref(a) + unref(b))
133
-
}
134
-
```
135
-
~~~
136
-
137
-
Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε μπλοκ κώδικα και να επισημάνετε τις γραμμές ανάλογα, η προεπιλεγμένη τιμή είναι 1:
124
+
Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση `lineNumbers: true` στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση `lines:true`. Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε code block και να επισημάνετε τις γραμμές ανάλογα, με προεπιλογή 1:
138
125
139
126
~~~md
140
127
```ts {6,7}{lines:true, startLine:5}
@@ -147,7 +134,7 @@ function add(
147
134
```
148
135
~~~
149
136
150
-
Για να αλλάξετε την επισήμανση σε πολλαπλά βήματα, μπορείτε να χρησιμοποιήσετε `|` για να τα διαχωρίσετε. Για παράδειγμα
137
+
Για να αλλάξετε την επισήμανση με πολλαπλά κλικ, μπορείτε να χρησιμοποιήσετε `|` για να τα διαχωρίσετε:
151
138
152
139
~~~md
153
140
```ts {2-3|5|all}
@@ -160,12 +147,12 @@ function add(
160
147
```
161
148
~~~
162
149
163
-
Αυτό θα επισημάνει πρώτα τα `a: Ref<number> | number` και `b: Ref<number> | number`, και μετά `return computed(() => unref(a) + unref(b))` μετά από ένα click, και τέλος, ολόκληρο το block. Μάθετε περισσότερα στον [οδηγό κινήσεων clicks](/guide/animations).
150
+
Αυτό θα επισημάνει πρώτα τα `a: Ref<number> | number` και `b: Ref<number> | number`, και μετά `return computed(() => unref(a) + unref(b))` μετά από ένα click, και τέλος, ολόκληρο το block.
164
151
165
-
Μπορείτε να ξεκινήσετε την επισήμανση με ένα ορισμένο click:
152
+
Μπορείτε να ορίσετε τον αριθμό γραμμής σε `hide` για να αποκρύψετε το code block ή σε `none` για να μην επισημάνετε καμία γραμμή:
166
153
167
154
~~~md
168
-
```ts {2-3|5|all}{at:0}
155
+
```ts {hide|none}
169
156
function add(
170
157
a: Ref<number> | number,
171
158
b: Ref<number> | number
@@ -175,24 +162,11 @@ function add(
175
162
```
176
163
~~~
177
164
178
-
Αυτό είναι ιδιαίτερα χρήσιμο όταν χρειάζεται να συγχρονίσετε διαφορετικές κινήσεις (για παράδειγμα, όταν χρησιμοποιείτε διάταξη `two-cols` και κινήσεις λίστας).
179
-
Ίσως χρειαστεί να ορίσετε τον [προσαρμοσμένο αριθμό κλικ](/guide/animations#πpοσαpμοσμένος-αpιθμός-clicks) για να λειτουργήσει σωστά η εξέλιξη των διαφανειών.
180
-
181
-
Για να παραλείψετε την επισήμανση οποιασδήποτε γραμμής, μπορείτε να ορίσετε τον αριθμό γραμμής σε `0`. Για παράδειγμα
182
-
183
-
~~~md {1}
184
-
```ts {0}
185
-
function add(
186
-
a: Ref<number> | number,
187
-
b: Ref<number> | number
188
-
) {
189
-
return computed(() => unref(a) + unref(b))
190
-
}
191
-
```
192
-
~~~
165
+
::: tip
166
+
Μάθετε περισσότερα στον [οδηγό κινήσεων κλικ](./animations#θεση).
167
+
:::
193
168
194
-
Αν ο κώδικας δεν χωράει σε μία διαφάνεια, μπορείτε να περάσετε μια επιπλέον επιλογή maxHeight που θα ορίσει σταθερό ύψος
195
-
και θα ενεργοποιήσει το scrolling
169
+
Αν ο κώδικας δεν χωράει σε μία διαφάνεια, μπορείτε να χρησιμοποιήσετε το `maxHeight` για να ορίσετε σταθερό ύψος και να ενεργοποιήσετε το scrolling:
196
170
197
171
~~~md {1}
198
172
```ts {2|3|7|12}{maxHeight:'100px'}
@@ -547,6 +521,8 @@ $$ {1|3|all}
547
521
$$
548
522
```
549
523
524
+
Οι επιλογές `at` και `finally` των [code blocks](#επισημανση-γραμμης) είναι επίσης διαθέσιμες για μπλοκ LaTeX.
525
+
550
526
## Διαγράμματα
551
527
552
528
Μπορείτε επίσης να δημιουργήσετε διαγράμματα / γραφήματα από περιγραφές κειμένου στο Markdown σας, με τη βοήθεια του [Mermaid](https://mermaid-js.github.io/mermaid).
0 commit comments