Ωστόσο, αυτό το άρθρο θα επεξεργαστεί δύο συγκεκριμένες κατηγορίες που είναι τα αναλογικά σχήματα και τα σχήματα πίνακα. Αυτά χρησιμοποιούνται για το στυλ των αριθμητικών τιμών στο Tailwind και τη διευθέτηση και αναπαράσταση των αριθμητικών δεδομένων με τρόπο που είναι ελκυστικός για τη σχεδίαση του εγγράφου.
Αυτό το άρθρο θα αναλύσει τα αναλογικά και τα πινακοειδή ψηφία στο Tailwind CSS χρησιμοποιώντας το ακόλουθο περίγραμμα:
- Πώς να χρησιμοποιήσετε αναλογικά στοιχεία στο Tailwind CSS;
- Πώς να χρησιμοποιήσετε Πίνακες Φιγούρες στο Tailwind CSS;
- Διαφορά μεταξύ αναλογικών και πινάκων ψηφίων
Πώς να χρησιμοποιήσετε αναλογικά στοιχεία στο Tailwind CSS;
Η κλάση αναλογικών ψηφίων θα αντιστοιχίσει στο στοιχείο μια σύμβαση όπου κάθε αριθμός δεν έχει το ίδιο πλάτος.
Σύνταξη
Η σύνταξη για τη χρήση των αναλογικών ψηφίων στο Tailwind είναι η εξής:
< div τάξη = 'αναλογικά αριθμητικά' >
< div / >
Στην παραπάνω παρεχόμενη σύνταξη, το « αναλογικά-αριθμ Πρέπει να παρέχεται κλάση στο στοιχείο για να χρησιμοποιεί αναλογικούς αριθμούς.
Ας δούμε ένα πρακτικό παράδειγμα αναλογικών μεγεθών.
Στον παρακάτω κώδικα, δύο « Π Τα στοιχεία περιέχονται σε ένα div ' στοιχείο που χρησιμοποιεί την κλάση αναλογικών ψηφίων:
< div τάξη = 'proportal-nums text-center bg-slate-200 text-xl' >< Π > 121212 < / Π >
< Π > 838383 < / Π >
< / div >
Η επεξήγηση του παραπάνω κωδικού είναι η εξής:
- Ο ' div ' το στοιχείο χρησιμοποιεί το ' αναλογικά-αριθμ ” κλάση που θα εφαρμόσει την ιδιότητα του αναλογικού αριθμού στους αριθμούς.
- Ο ' κείμενο-κέντρο ” Η τάξη τοποθετεί το κείμενο στο κέντρο του στοιχείου.
- Ο ' bg-{color}-{number} Η κλάση είναι υπεύθυνη για το χρώμα φόντου του στοιχείου.
- Ο ' text-xl Η τάξη ” παρέχει ένα πολύ μεγάλο μέγεθος γραμματοσειράς για το κείμενο.
- Στη συνέχεια, δύο» Π Δημιουργούνται στοιχεία που περιέχουν διαφορετικούς αριθμούς.
Παραγωγή
Μπορεί να φανεί στην έξοδο ότι αριθμοί στο δεύτερο ' Π Το στοιχείο έχει ελαφρώς μεγαλύτερο πλάτος από το πρώτο. Αυτό οφείλεται στην κατηγορία των αναλογικών αριθμών:
Πώς να χρησιμοποιήσετε Πίνακες Φιγούρες στο Tailwind CSS;
Τα σχήματα του πίνακα στο Tailwind αντιστοιχίζουν τη σύμβαση σε ένα στοιχείο όπου κάθε αριθμός έχει το ίδιο μέγεθος πλάτους. Αυτό δημιουργεί μια συμμετρική αναπαράσταση που μοιάζει με πίνακα των αριθμών.
Σύνταξη
Η σύνταξη για τη χρήση των σχημάτων του πίνακα είναι η εξής:
< div τάξη = 'πίνακας-αριθμοί' >< div / >
Στην παραπάνω παρεχόμενη σύνταξη, το « πίνακας-αριθμ Η κλάση παρέχεται στο στοιχείο για να χρησιμοποιήσει τα σχήματα του πίνακα.
Ας δούμε πώς το ' πίνακας-αριθμ ” επηρεάζουν τις αριθμητικές τιμές σε ένα έγγραφο HTML. Για αυτήν την επίδειξη, δύο ' Π ' με αριθμητικές τιμές δημιουργούνται και περιέχονται σε ένα ' div ' στοιχείο που χρησιμοποιεί την κλάση των σχημάτων του πίνακα:
< div τάξη = ' tabular-nums text-center bg-slate-200 text-xl' >< Π > 121212 < / Π >
< Π > 838383 < / Π >
< / div >
Στον παραπάνω κώδικα, το « πίνακας-αριθμ «Η τάξη παρέχεται στο « div ' στοιχείο που θα αποδώσει το στυλ των πινάκων σχημάτων στο παιδί ' Π ” στοιχεία.
Παραγωγή:
Μπορεί να φανεί στην παραπάνω έξοδος ότι οι αριθμητικές τιμές και στα δύο στοιχεία είναι τέλεια ευθυγραμμισμένες λόγω των ίδιων μεγεθών πλάτους των ψηφίων.
Πληροφορίες μπόνους: Διαφορά μεταξύ αναλογικών και πινακοποιημένων ψηφίων στο Tailwind CSS
Ας δούμε μια επίδειξη που διαφοροποιεί την επίδραση των κατηγοριών πινάκων και αναλογικών ψηφίων στις αριθμητικές τιμές. Σε αυτήν την επίδειξη, στα στοιχεία θα εκχωρηθεί η κατηγορία αναλογικών ψηφίων ως προεπιλογή. Στη συνέχεια, χρησιμοποιώντας την κατάσταση αιώρησης, στα στοιχεία θα εκχωρηθεί η κλάση πινακικών σχημάτων:
< div τάξη = 'proportal-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< Π > 121212 < / Π >
< Π > 838383 < / Π >
< / div >
Στον παραπάνω κώδικα φαίνεται ότι το « div ' το στοιχείο παρέχεται με το ' αναλογικά-αριθμ ”, που θα είναι η προεπιλεγμένη σύμβαση που θα ακολουθήσουν οι αριθμητικές τιμές.
Ομοίως, λόγω της « hover:tabular-nums », οι αριθμητικές τιμές θα ακολουθούν τη σύμβαση των σχημάτων του πίνακα κάθε φορά που ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω από το στοιχείο «div».
Παραγωγή
Στη δεδομένη έξοδο, το πλάτος των αριθμητικών τιμών αλλάζει όταν ο χρήστης τοποθετεί το ποντίκι πάνω από το στοιχείο. Αυτό παρέχει την οπτική διαφορά μεταξύ των αναλογικών και των πινάκων στο Tailwind:
Όλα αυτά αφορούν τα αναλογικά και πινακοειδή στοιχεία στο Tailwind.
συμπέρασμα
Για να χρησιμοποιήσετε αναλογικούς αριθμούς στο Tailwind, το ' αναλογικά-αριθμ Χρησιμοποιείται η κλάση. Τα αναλογικά ψηφία χρησιμοποιούν τη σύμβαση όπου κάθε αριθμητική τιμή έχει διαφορετικό μέγεθος πλάτους. Για να χρησιμοποιήσετε τα σχήματα του πίνακα στο Tailwind, το ' πίνακας-αριθμ Χρησιμοποιείται η κλάση. Τα σχήματα του πίνακα χρησιμοποιούν τη σύμβαση όπου κάθε αριθμητική τιμή έχει το ίδιο μέγεθος πλάτους. Αυτό το άρθρο παρέχει τη διαδικασία για τη χρήση των αναλογικών και πινάκων ψηφίων στο Tailwind.