Πώς να ορίσετε τον τύπο στυλ λίστας στο Tailwind

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

Αυτό το άρθρο θα παρέχει τη διαδικασία για τον ορισμό του τύπου στυλ λίστας στο Tailwind.

Πώς να ορίσετε τον τύπο στυλ λίστας στο Tailwind;

Το Tailwind παρέχει τρεις προεπιλεγμένους τύπους στυλ λίστας. Χρησιμοποιούνται για την παροχή των « σημάδι ” στυλ για στοιχεία λίστας. Οι τρεις προεπιλεγμένες κατηγορίες τύπων στυλ λίστας περιγράφονται ως εξής:

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

Η σύνταξη για τη χρήση των τύπων στυλ λίστας είναι η εξής:

Για καλύτερη κατανόηση, η επίδειξη που παρέχεται παρακάτω θα χρησιμοποιήσει τη σύνταξη που ορίζεται παραπάνω για να παρέχει διαφορετικά στυλ δεικτών για τη λίστα στοιχείων. Σε αυτό το παράδειγμα, τρία στοιχεία λίστας θα δημιουργηθούν και θα παρέχονται με τα διαφορετικά στυλ δείκτη χρησιμοποιώντας τις προεπιλεγμένες τάξεις στυλ λίστας στο Tailwind:

Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:

• ΕΝΑ '

  Το στοιχείο ' δημιουργείται με ένα ' xl 'μέγεθος γραμματοσειράς και ένα' τολμηρός ” βάρος γραμματοσειράς. Το περιεχόμενο κειμένου του στοιχείου τοποθετείται στο κέντρο χρησιμοποιώντας το ' κείμενο-κέντρο ” τάξη.

• Μετά από ένα διάλειμμα γραμμής, ένα '
  ' το στοιχείο δημιουργείται και παρέχεται με ένα ' καλώδιο ” τάξη. Αυτό θα δημιουργήσει ένα κοντέινερ που θα ευθυγραμμίσει τα θυγατρικά στοιχεία οριζόντια.
• Ο ' δικαιολογώ-κέντρο Η τάξη θα τοποθετήσει τα αντικείμενα στο κέντρο του δοχείου.
• Ο ' space-x-{μέγεθος} Η κλάση παρέχει τον οριζόντιο χώρο μεταξύ των στοιχείων.
• Ο ' bg-{color}-{number} Η κλάση θέτει το φόντο του κοντέινερ στο καθορισμένο χρώμα.
• Ο ' στρογγυλεμένο-lg Η τάξη κάνει τις γωνίες του δοχείου στρογγυλεμένες.
• Ο ' mx-4 Η κλάση παρέχει το οριζόντιο περιθώριο στο flex container.
• Ο ' σ-2 Η κλάση παρέχει padding στο flex container.
• Στη συνέχεια, δημιουργούνται τρία στοιχεία λίστας και παρέχονται με διαφορετικούς τύπους στυλ λίστας χρησιμοποιώντας το ' λίστα-{τύπος} ” τάξη.

Παραγωγή:

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

Χρήση της τάξης στυλ λίστας με τις παραλλαγές κατάστασης στο Tailwind

Η κλάση στυλ λίστας μπορεί να χρησιμοποιηθεί με τις προεπιλεγμένες παραλλαγές κατάστασης στο Tailwind για να γίνει η σχεδίαση πιο δυναμική. Χρησιμοποιώντας τις παραλλαγές αιώρησης, εστίασης και ενεργής κατάστασης, ο χρήστης μπορεί να αλλάξει το στυλ δείκτη των στοιχείων της λίστας κάθε φορά που ενεργοποιείται η καθορισμένη κατάσταση. Η σύνταξη για τη χρήση της κλάσης στυλ λίστας με παραλλαγές κατάστασης είναι η εξής:

Ακολουθεί ένα παράδειγμα χρήσης του τύπου στυλ λίστας με κατάσταση 'hover', όπου ο χρήστης μπορεί να αλλάξει το στυλ του δείκτη τοποθετώντας το δείκτη του ποντικιού πάνω από το μπλοκ λίστας:

Στον παραπάνω κωδικό, η λίστα παρέχεται με το « λίστα-δίσκος ” κατηγορία ως ο προεπιλεγμένος τύπος στυλ λίστας. Ωστόσο, χρησιμοποιώντας το « hover:list-decimal », ο τύπος στυλ λίστας θα αλλάξει όταν ο χρήστης τοποθετήσει τον κέρσορα του ποντικιού πάνω από το μπλοκ λίστας.

Παραγωγή:

Η παρακάτω έξοδος δείχνει ότι το στυλ του τύπου λίστας αλλάζει από μια λίστα με κουκκίδες σε μια αριθμημένη λίστα όταν ο κέρσορας τοποθετείται πάνω από το μπλοκ λίστας.

Χρήση της κλάσης στυλ λίστας με τα σημεία διακοπής στο Tailwind

Τα σημεία διακοπής χρησιμοποιούνται για τον ανταποκρινόμενο σχεδιασμό της διάταξης για διαφορετικά μεγέθη οθόνης. Τα πέντε προεπιλεγμένα σημεία διακοπής που παρέχονται από το Tailwind είναι τα sm, md, lg, xl και 2xl. Η ακόλουθη σύνταξη χρησιμοποιείται για την παροχή στην κατηγορία στυλ τύπου λίστας με ένα σημείο διακοπής:

Ακολουθεί ένα παράδειγμα χρήσης του τύπου στυλ λίστας με ένα ' md ” σημείο διακοπής, όπου το στυλ του δείκτη θα αλλάξει όταν το μέγεθος της οθόνης φτάσει στο σημείο διακοπής “md”:

Στον παραπάνω κωδικό, η λίστα παρέχεται με το « λίστα-δίσκος ” κατηγορία ως προεπιλεγμένο στυλ. Ωστόσο, χρησιμοποιώντας το « md:list-δεκαδικός Κατηγορία ο τύπος στυλ λίστας θα αλλάξει για το μέγεθος οθόνης 'md'.

Παραγωγή:

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

Αυτό αφορά τη ρύθμιση του Τύπου στυλ λίστας στο Tailwind.

συμπέρασμα

Το Tailwind παρέχει τρεις προκαθορισμένες κατηγορίες τύπων στυλ λίστας για την αλλαγή του στυλ καταχώρισης ενός στοιχείου. Ο ' λίστα-δίσκος Η κλάση παρέχει τις κουκκίδες για την καταχώριση των στοιχείων. Ο ' λίστα-δεκαδικός Η κλάση παρέχει τους αριθμούς για την καταχώριση των στοιχείων. Ο ' λίστα-κανένας Η κλάση δημιουργεί μια λίστα που δεν χρησιμοποιεί κανένα δείκτη στοιχείων. Αυτό το άρθρο παρέχει τη διαδικασία για τον ορισμό του τύπου στυλ λίστας στο Tailwind.