Αυτό το άρθρο θα παρέχει τη διαδικασία για τη ρύθμιση της εικόνας σε στυλ λίστας ενός μπλοκ λίστας στο Tailwind.
Πώς να ορίσετε την κατηγορία εικόνας στυλ λίστας στο Tailwind;
Η κλάση εικόνας στυλ λίστας χρησιμοποιείται για την παροχή μιας εικόνας ως δείκτη λίστας στο Tailwind. Από προεπιλογή, το Tailwind παρέχει μόνο το ' λίστα-εικόνα-κανένας κλάση που μπορεί να χρησιμοποιηθεί μόνο για την αφαίρεση οποιουδήποτε δείκτη εικόνας που είχε οριστεί προηγουμένως για μια λίστα.
Σύνταξη
Η σύνταξη για τη χρήση της κλάσης εικόνας στυλ λίστας στο Tailwind είναι η εξής:
< ul τάξη = 'list-image-[url({Image Url})]' > < / ul >
Αυτή η σύνταξη παρέχει την καθορισμένη εικόνα ως δείκτη για το στοιχείο της λίστας.
< ul τάξη = 'list-image-none' > < / ul >
Αυτή η σύνταξη αφαιρεί τυχόν εικόνες που είχαν οριστεί προηγουμένως ως δείκτη για ένα στοιχείο λίστας.
Ας χρησιμοποιήσουμε την προαναφερθείσα σύνταξη για να χρησιμοποιήσουμε μια εικόνα ως δείκτη σε μια μη ταξινομημένη λίστα. Σε αυτήν την επίδειξη, ο χρήστης έχει μια εικόνα με το όνομα ' handpointer.png ” υπάρχει στον ίδιο φάκελο έργου Tailwind. Σε περίπτωση που η εικόνα υπάρχει σε κάποιον άλλο φάκελο, ο χρήστης πρέπει να παρέχει την πλήρη διαδρομή προς την κλάση εικόνας στυλ λίστας. Θα χρησιμοποιήσουμε αυτήν την εικόνα ως δείκτη λίστας χρησιμοποιώντας την κλάση 'list-image'.
< div τάξη = 'Flex justify-center' >
< ul τάξη = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
ΔΕΙΓΜΑΤΙΚΗ ΛΙΣΤΑ
< ότι >Αυτό είναι το πρώτο στοιχείο< / ότι >
< ότι >Αυτό είναι το δεύτερο στοιχείο< / ότι >
< ότι >Αυτό είναι το Τρίτο Στοιχείο< / ότι >
< / ul >
< / div >
Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:
- ΕΝΑ ' ' το στοιχείο δημιουργείται και παρέχεται με το ' καλώδιο ” κλάση που ευθυγραμμίζει τα αντικείμενα οριζόντια σε ένα κοντέινερ.
- Ο ' δικαιολογώ-κέντρο ” η τάξη ευθυγραμμίζει τα παιδικά αντικείμενα στο κέντρο του δοχείου.
- Στη συνέχεια, το «
- Παρέχεται με το « λίστα-μέσα ” κλάση που θα τοποθετήσει τον καθορισμένο δείκτη στοιχείων λίστας μέσα στο μπλοκ λίστας.
- Ο ' list-image-[url({Image Url})] Η κλάση χρησιμοποιείται για την παροχή μιας εικόνας ως δείκτη στοιχείου λίστας στο στοιχείο.
- Ο ' space-y-{number} Η κλάση ” παρέχει τον κατακόρυφο χώρο μεταξύ των στοιχείων της λίστας.
- Ο ' στρογγυλεμένο-μδ Η κλάση κάνει τις γωνίες του μπλοκ λίστας στρογγυλεμένες.
- Ο ' bg-{color}-{number} Η κλάση ' χρησιμοποιείται για την παροχή του χρώματος φόντου στο μπλοκ λίστας.
- Ο ' σ-2 Η κλάση παρέχει το περίγραμμα στο στοιχείο λίστας.
- Τρία στοιχεία λίστας δημιουργούνται χρησιμοποιώντας το ' <αυτό> ετικέτες '.
Παραγωγή:
Μπορεί να φανεί στην έξοδο, ότι μια εικόνα δείκτη χεριού έχει οριστεί ως δείκτης για τα στοιχεία της λίστας:
Χρήση παραλλαγών κατάστασης με κατηγορία εικόνας στυλ λίστας στο Tailwind
Το Tailwind παρέχει διάφορες παραλλαγές κατάστασης, όπως αιώρηση, εστίαση και ενεργό που βοηθά στη δημιουργία διαδραστικών σχεδίων. Για να χρησιμοποιήσετε μια κλάση εικόνας τύπου λίστας με αυτές τις καταστάσεις, χρησιμοποιείται η ακόλουθη σύνταξη:
< ul τάξη = '{state}:list-image-{none OR image url}' > < / ul >Ας χρησιμοποιήσουμε τη σύνταξη που ορίστηκε παραπάνω για να χρησιμοποιήσουμε την ιδιότητα εικόνας σε στυλ λίστας με το ' φτερουγίζω ” πολιτεία στο Tailwind. Σε αυτήν την επίδειξη, η λίστα θα παρέχεται με μια εικόνα ως δείκτη λίστας. Ωστόσο, χρησιμοποιώντας το « φτερουγίζω ” κατάσταση, η εικόνα θα αφαιρεθεί.
< div τάξη = 'Flex justify-center' >
< ul τάξη = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ΔΕΙΓΜΑΤΙΚΗ ΛΙΣΤΑ
< ότι >Αυτό είναι το πρώτο στοιχείο< / ότι >
< ότι >Αυτό είναι το δεύτερο στοιχείο< / ότι >
< ότι >Αυτό είναι το Τρίτο Στοιχείο< / ότι >
< / ul >
< / div >Στον παραπάνω κώδικα, το « hover:list-image-none Η κλάση αφαιρεί την εικόνα που είχε οριστεί προηγουμένως ως δείκτη λίστας.
Παραγωγή:
Στην παρακάτω έξοδο, η εικόνα σε στυλ λίστας επαναφέρεται σε ' κανένας ' όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω του. Λόγω αυτού, η εικόνα που χρησιμοποιήθηκε ως δείκτης λίστας αφαιρέθηκε.
Χρήση σημείων διακοπής με κατηγορία εικόνας στυλ λίστας στο Tailwind
Τα σημεία διακοπής είναι προκαθορισμένα ερωτήματα πολυμέσων για τα στοιχεία στο Tailwind. Χρησιμοποιούνται για να κάνουν τη σχεδίαση να ανταποκρίνεται σε διάφορα μεγέθη οθόνης. Αυτά τα σημεία διακοπής περιλαμβάνουν sm, md, lg, xl και 2xl. Για να χρησιμοποιήσετε μια κλάση εικόνας τύπου λίστας με σημείο διακοπής, χρησιμοποιείται η ακόλουθη σύνταξη:
< ul τάξη = '{breakpoint}:list-image-{none OR image url}' > < / ul >Ας χρησιμοποιήσουμε τη σύνταξη που ορίστηκε παραπάνω για να αλλάξουμε τον δείκτη της λίστας από ένα ' εικόνα ' προς την ' κανένας ' χρησιμοποιώντας ένα σημείο διακοπής. Σε αυτό το παράδειγμα, ο δείκτης εικόνας θα αφαιρεθεί μόλις το μέγεθος της οθόνης αυξήσει το πλάτος του ' md ” σημείο διακοπής:
< div τάξη = 'Flex justify-center' >
< ul τάξη = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ΔΕΙΓΜΑΤΙΚΗ ΛΙΣΤΑ
< ότι >Αυτό είναι το πρώτο στοιχείο< / ότι >
< ότι >Αυτό είναι το δεύτερο στοιχείο< / ότι >
< ότι >Αυτό είναι το Τρίτο Στοιχείο< / ότι >
< / ul >
< / div >Στον παραπάνω κώδικα, το « md:list-image-none Η κλάση ' αφαιρεί τον δείκτη της λίστας εικόνων όταν το μέγεθος της οθόνης φτάσει το ' md 'σημείο διακοπής.
Παραγωγή:
Στην παρακάτω έξοδο, ο δείκτης εικόνας αφαιρείται όταν το μέγεθος της οθόνης φτάσει στο σημείο διακοπής md:
Αυτό αφορά τη ρύθμιση της εικόνας σε στυλ λίστας στο Tailwind.
συμπέρασμα
Το Tailwind έχει δύο προκαθορισμένες κατηγορίες εικόνων σε στυλ λίστας για την αφαίρεση ή τη ρύθμιση του δείκτη καταχώρισης ενός στοιχείου σε μια εικόνα. Ο ' list-image-[url({Image Url})] Η κλάση παρέχει την καθορισμένη εικόνα ως δείκτη λίστας. Ο ' λίστα-εικόνα-κανένας Η κλάση αφαιρεί οποιαδήποτε εικόνα που είχε προηγουμένως παρασχεθεί ως δείκτης λίστας. Αυτό το άρθρο παρέχει τη διαδικασία για τον ορισμό του τύπου στυλ λίστας στο Tailwind.