מאמר זה יספק את ההליך להגדרת התמונה בסגנון רשימה של בלוק רשימה ב-Tailwind.
כיצד להגדיר את מחלקת תמונה בסגנון רשימה ב-Tailwind?
מחלקת ה-List Style Image משמשת למתן תמונה כסמן הרשימה ב-Tailwind. כברירת מחדל, Tailwind מספקת רק את ' רשימה-תמונה-ללא ' מחלקה שיכולה לשמש רק להסרת סמן תמונה שהוגדר בעבר עבור רשימה.
תחביר
התחביר לשימוש במחלקת התמונה בסגנון רשימה ב-Tailwind הוא כדלקמן:
< ul מעמד = 'list-image-[url({Image Url})]' > < / ul >
תחביר זה מספק את התמונה שצוינה כסמן עבור רכיב הרשימה.
< ul מעמד = 'רשימה-תמונה-ללא' > < / ul >
תחביר זה מסיר את כל התמונות שהוגדרו בעבר כסמן עבור רכיב רשימה.
בואו נשתמש בתחביר שהוגדר לעיל כדי להשתמש בתמונה כסמן ברשימה לא מסודרת. בהדגמה זו, למשתמש יש תמונה בשם ' handpointer.png 'נוכח בתוך אותה תיקיית פרויקט Tailwind. אם התמונה קיימת בתיקייה אחרת כלשהי, המשתמש צריך לספק את הנתיב המלא למחלקת התמונה בסגנון הרשימה. אנו נשתמש בתמונה זו כסמן רשימה באמצעות המחלקה 'list-image'.
< div מעמד = 'להגמיש את מרכז ההצדקה' >
< 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} מחלקה מספקת את הרווח האנכי בין פריטי הרשימה.
- ה ' מעוגל-md ” class הופך את הפינות של בלוק הרשימה לעוגלות.
- ה ' bg-{color}-{number} מחלקה משמשת לאספקת צבע הרקע לבלוק הרשימה.
- ה ' p-2 ” class מספקת את הגבול לרכיב הרשימה.
- שלושה פריטי רשימה נוצרים באמצעות ' <זה> ' תגיות.
תְפוּקָה:
ניתן לראות בפלט שתמונת מצביע יד מוגדרת כסמן עבור פריטי הרשימה:
שימוש בגרסאות מצב עם מחלקת תמונה בסגנון רשימה ב-Tailwind
Tailwind מספקת גרסאות מצב שונות כגון ריחוף, מיקוד ואקטיבי, מה שעוזר ביצירת עיצובים אינטראקטיביים. כדי להשתמש במחלקת תמונה בסגנון רשימה עם המצבים האלה, נעשה שימוש בתחביר הבא:
< ul מעמד = '{state}:list-image-{none OR image url}' > < / ul >בואו נשתמש בתחביר שהוגדר לעיל כדי להשתמש במאפיין תמונה בסגנון רשימה עם ה-' לְרַחֵף ” המדינה ב-Tailwind. בהדגמה זו, הרשימה תסופק עם תמונה כסמן הרשימה. עם זאת, באמצעות ' לְרַחֵף ' מצב, התמונה תוסר.
< div מעמד = 'להגמיש את מרכז ההצדקה' >
< 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 ” class מסירה את התמונה שהוגדרה קודם לכן כסמן הרשימה.
תְפוּקָה:
בפלט למטה, התמונה בסגנון הרשימה מתאפסת ל' אף אחד ' כאשר המשתמש מרחף מעליו את סמן העכבר. בשל כך, התמונה ששימשה כסמן הרשימה הוסרה.
שימוש בנקודות שבירה עם כיתת תמונה בסגנון רשימה ב-Tailwind
נקודות השבירה הן שאילתות מדיה מוגדרות מראש עבור האלמנטים ב-Tailwind. הם משמשים כדי להפוך את העיצוב להגיב עבור גדלי מסך שונים. נקודות שבירה אלו כוללות sm, md, lg, xl ו-2xl. כדי להשתמש במחלקת תמונה בסגנון רשימה עם נקודת שבירה, נעשה שימוש בתחביר הבא:
< ul מעמד = '{breakpoint}:list-image-{none OR image url}' > < / ul >בואו נשתמש בתחביר שהוגדר לעיל כדי לשנות את סמן הרשימה מ' תמונה ' ל ' אף אחד ' באמצעות נקודת שבירה. בדוגמה זו, סמן התמונה יוסר ברגע שגודל המסך יגדיל את הרוחב של ' md ' נקודת שבירה:
< div מעמד = 'להגמיש את מרכז ההצדקה' >
< 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})] ' class מספקת את התמונה שצוינה כסמן הרשימה. ה ' רשימה-תמונה-ללא ' מחלקה מסירה כל תמונה שסופקה בעבר כסמן הרשימה. מאמר זה סיפק את ההליך להגדרת סוג סגנון הרשימה ב-Tailwind.