Σύρσιμα Στοιχεία

Τα σύρσιμα στοιχεία σας δίνουν τη δυνατότητα να μετακινείτε, να αλλάζετε το μέγεθος και να περιστρέφετε στοιχεία σέρνοντάς τα με το ποντίκι. Αυτό είναι χρήσιμο για τη δημιουργία αιωρούμενων στοιχείων στις διαφάνειές σας.

Χρήση Οδηγίας

Δεδομένα από το frontmatter

---
dragPos:
  square: Left,Top,Width,Height,Rotate
---

<img v-drag="'square'" src="https://sli.dev/logo.png">

Δεδομένα από την τιμή της οδηγίας

WARNING

Το Slidev χρησιμοποιεί regex για την ενημέρωση της τιμής θέσης στο περιεχόμενο της διαφάνειας. Αν αντιμετωπίζετε προβλήματα, χρησιμοποιήστε το frontmatter για να ορίσετε τις τιμές.

<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">

Χρήση Component

Δεδομένα από το frontmatter

---
dragPos:
  foo: Left,Top,Width,Height,Rotate
---

<v-drag pos="foo" text-3xl>
  <carbon:arrow-up />
  Χρησιμοποιήστε το component `v-drag` για να έχετε ένα μετακινούμενο container!
</v-drag>

Δεδομένα από props

<v-drag pos="Left,Top,Width,Height,Rotate" text-3xl>
  <carbon:arrow-up />
  Χρησιμοποιήστε το component `v-drag` για να έχετε ένα μετακινούμενο container!
</v-drag>

Αυτόματο ύψος

Μπορείτε να ορίσετε το Height σε NaN (αν χρησιμοποιείτε την οδηγία) ή _ (αν χρησιμοποιείτε το component) για να κάνετε το ύψος του μετακινούμενου στοιχείου να προσαρμόζεται αυτόματα στο περιεχόμενό του.

Δημιουργήστε ένα Σύρσιμο Στοιχείο

Όταν δημιουργείτε για πρώτη φορά ένα σύρσιμο στοιχείο, δεν χρειάζεται να καθορίσετε την τιμή της θέσης (αλλά πρέπει να καθορίσετε το όνομα της θέσης αν θέλετε να χρησιμοποιήσετε το frontmatter). Το Slidev θα δημιουργήσει αυτόματα την αρχική τιμή θέσης για εσάς.

Controls

• Κάντε διπλό click στο σύρσιμο στοιχείο για να αρχίσετε να το μετακινείτε.
• Μπορείτε επίσης να χρησιμοποιήσετε τα πλήκτρα βέλους για να μετακινήσετε το στοιχείο.
• Κρατήστε πατημένο το Shift κατά τη διάρκεια της σύρσης για να διατηρήσετε την αναλογία διαστάσεων.
• Κάντε click έξω από το σύρσιμο στοιχείο για να σταματήσετε τη σύρση.

Σύρσιμο Βέλος

Το component <v-drag-arrow> δημιουργεί ένα component βέλους που μπορεί να μετακινηθεί. Χρησιμοποιήστε το ως εξής:

<v-drag-arrow />

Και θα λάβετε ένα σύρσιμο στοιχείο βέλους. Τα άλλα props είναι τα ίδια με το στοιχείο Arrow.