Αυτό το άρθρο θα εξηγήσει πώς να χρησιμοποιείτε διαγώνια κλάσματα στο Tailwind.
Πώς να χρησιμοποιήσετε διαγώνια κλάσματα στο Tailwind CSS;
Η κλάση διαγώνιου κλάσματος στο Tailwind είναι μια προκαθορισμένη αριθμητική παραλλαγή γραμματοσειράς που κάνει τον αριθμητή και τον παρονομαστή μικρότερους και τα χωρίζει με κάθετο. Αυτό κάνει τον αριθμό του κλάσματος να φαίνεται διαφορετικός από το υπόλοιπο κείμενο.
Σύνταξη
Η σύνταξη της χρήσης του ' διαγώνιο-κλάσματα » η τάξη έχει ως εξής:
< div τάξη = 'διαγώνιο-κλάσματα' >
< div / >
Όπως μπορείτε να δείτε από την παραπάνω σύνταξη, ο προγραμματιστής πρέπει να παρέχει ' διαγώνιο-κλάσματα ' στο ' τάξη ” χαρακτηριστικό του στοιχείου.
Ας χρησιμοποιήσουμε την κλάση «διαγώνιο-κλάσματα» ως πρακτικό παράδειγμα. Στην παρακάτω επίδειξη, ο χρήστης μπορεί να δει τη διαφορά μεταξύ των κανονικών και των διαγώνιων κλασμάτων:
< div τάξη = 'bg-slate-200 text-center text-lg' >< Π >Κανονικά κλάσματα: 3 / 5 6 / 3 6 / 5 < / Π >
< Π τάξη = 'διαγώνιο-κλάσματα' >Διαγώνια κλάσματα: 3 / 5 6 / 3 6 / 5 < / Π >
< / div >
Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:
- Ο ' div ' το στοιχείο δημιουργείται και παρέχεται ως χρώμα φόντου χρησιμοποιώντας το ' bg-{color}-{number} ” τάξη.
- Στη συνέχεια, παρέχεται στο κείμενο ένα μεγάλο μέγεθος γραμματοσειράς και ευθυγραμμίζεται στο κέντρο του στοιχείου χρησιμοποιώντας το « text-lg ' και ' κείμενο-κέντρο ” τάξεις αντίστοιχα.
- Στη συνέχεια, δύο» Δημιουργούνται στοιχεία, όπου το δεύτερο παρέχεται με το διαγώνιο-κλάσματα ” τάξη.
Παραγωγή:
Η διαφορά μεταξύ του διαγώνιου κλάσματος και του κανονικού κλάσματος φαίνεται ξεκάθαρα στην παραπάνω έξοδο.
Χρήση κλάσης διαγώνιων κλασμάτων με σημεία διακοπής
Τα σημεία διακοπής χρησιμοποιούνται ως ερωτήματα πολυμέσων στο Tailwind. Υπάρχουν πέντε προεπιλεγμένα σημεία διακοπής με καθορισμένα ελάχιστα πλάτη. Αυτά τα σημεία διακοπής μπορούν να χρησιμοποιηθούν με οποιαδήποτε τάξη στο Tailwind για τη δημιουργία διατάξεων σχεδίασης με απόκριση και δυναμική.
Για να χρησιμοποιήσετε το « διαγώνιο-κλάσματα ” τάξη με σημείο διακοπής στο Tailwind, χρησιμοποιείται η ακόλουθη σύνταξη:
{ πρόθεμα σημείου διακοπής } : διαγώνιος-κλάσμαΟ παρακάτω πίνακας παρέχει το ελάχιστο πλάτος για διαφορετικά σημεία διακοπής στο Tailwind:
| Πρόθεμα σημείου διακοπής | Ελάχιστο Πλάτος |
|---|---|
| sm | 640 εικονοστοιχεία |
| md | 768 εικονοστοιχεία |
| lg | 1024 εικονοστοιχεία |
| xl | 1280 px |
| 2xl | 1536 εικονοστοιχεία |
Ας χρησιμοποιήσουμε σημεία διακοπής με το ' διαγώνιο-κλάσματα ” τάξη για να κατανοήσει πρακτικά τη χρήση τους:
< div τάξη = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Στον παραπάνω κώδικα, παρέχεται ένα στοιχείο div στο ' md:διαγώνιος-κλάσματα ' κλάση που θα αλλάξει τη γραμματοσειρά των αριθμητικών κλασμάτων όταν το ' md ” έχει επιτευχθεί το σημείο διακοπής.
Παραγωγή
Όπως μπορείτε να δείτε στην έξοδο, οι κλασματικοί αριθμοί παρέχονται με τη γραμματοσειρά διαγώνιου κλάσματος όταν το ' md ” επιτυγχάνεται το σημείο διακοπής:
Χρήση της κλάσης διαγώνιων κλασμάτων με καταστάσεις ουράνιου ανέμου
Το Tailwind παρέχει προεπιλογή ' πολιτείες ” προκειμένου να παρέχονται ιδιότητες σχεδίασης σε ένα στοιχείο όταν ενεργοποιείται αυτή η συγκεκριμένη κατάσταση. Αυτό κάνει τη διάταξη σχεδίασης πιο ελκυστική και δυναμική. Για να χρησιμοποιηθεί η κλάση 'διαγώνια-κλάσματα' με κατάσταση στο Tailwind, χρησιμοποιείται η ακόλουθη σύνταξη:
{ κατάσταση } : διαγώνιος-κλάσμαΗ προεπιλεγμένη κατάσταση που παρέχεται από το Tailwind είναι η εξής:
- Φτερουγίζω: Όταν ο χρήστης τοποθετεί τον κέρσορα πάνω από το στοιχείο.
- Συγκεντρώνω: Όταν ο χρήστης εστιάζει σε ένα στοιχείο με πλοήγηση σε αυτό.
- Ενεργός: Όταν ο χρήστης ενεργοποιεί ένα στοιχείο κάνοντας κλικ σε αυτό.
- Καθιστώ ανίκανο: Όταν ο χρήστης δεν επιτρέπεται να ενεργοποιήσει ένα στοιχείο.
Η παρακάτω επίδειξη παρέχει ένα πρακτικό παράδειγμα χρήσης του « διαγώνιο-κλάσματα 'τάξη με το ' φτερουγίζω δηλώνει στο Tailwind:
< div τάξη = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Ο ' div ' το στοιχείο στον παραπάνω κωδικό παρέχεται από ένα ' hover:διαγώνιος-κλάσματα ” κλάση που θα αλλάξει την κανονική γραμματοσειρά των αριθμών των κλασμάτων στη γραμματοσειρά διαγώνιου κλάσματος.
Παραγωγή
Όπως μπορείτε να δείτε στην έξοδο, η αριθμητική γραμματοσειρά του αριθμού κλάσματος αλλάζει καθώς ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω του:
Αυτό αφορά τη χρήση της κλάσης διαγώνιου κλάσματος στο Tailwind CSS.
συμπέρασμα
Για να χρησιμοποιήσετε τα διαγώνια κλάσματα στο Tailwind CSS, χρησιμοποιήστε το ' διαγώνιος-κλάσμα ” τάξη. Αυτή η κλάση θα χωρίσει τον αριθμητή και τον παρονομαστή με κάθετο και θα τα κάνει μικρά. Οι χρήστες μπορούν επίσης να χρησιμοποιήσουν την κλάση 'διαγώνια κλάσματα' με τα προεπιλεγμένα σημεία διακοπής και καταστάσεις στο Tailwind για να κάνουν τη σχεδίαση πιο δυναμική. Αυτό το άρθρο παρέχει τη διαδικασία για τη χρήση των διαγώνιων κλασμάτων στο Tailwind.