נניח שמשתמש צריך ליצור רשימה של פריטים עבור דף האינטרנט שלו. כדי להקל על תהליך העיצוב, Tailwind מספקת מחלקות שונות בסגנון רשימה שניתן להשתמש בהן לשינוי הסוג, המיקום והיישור של רכיבי הרשימה.
מאמר זה יספק את ההליך להגדרת סוג סגנון הרשימה ב-Tailwind.
כיצד להגדיר את סוג סגנון הרשימה ב-Tailwind?
Tailwind מספק שלושה סוגי סגנון ברירת מחדל של רשימה. הם משמשים כדי לספק את ' סַמָן ' סגנון עבור פריטי רשימה. שלוש מחלקות ברירת המחדל של סוג סגנון הרשימה מתוארות כדלקמן:
- רשימה-דיסק: מחלקה זו תספק את נקודות התבליט העגולות כסמן הרשימה.
- רשימה-עשרונית: מחלקה זו תספק את המספרים העשרוניים כסמן הרשימה.
- רשימה-ללא: מחלקה זו תסיר כל סמני רשימה מהפריטים.
התחביר לשימוש בסגנונות הרשימה הוא כדלקמן:
< ul מעמד = 'רשימה-{סגנון}' > < / ul >
להבנה טובה יותר, ההדגמה המופיעה להלן תשתמש בתחביר שהוגדר לעיל כדי לספק סגנונות סמנים שונים לרשימת פריטים. בדוגמה זו, שלושה רכיבי רשימה יווצרו ויסופקו עם סגנונות הסמנים השונים באמצעות מחלקות ברירת המחדל של סגנון הרשימה ב-Tailwind:
< ע מעמד = 'מרכז טקסט text-xl font-bold' >ברירת המחדל של רשימה שונה סִגְנוֹן מקלידים ב-Tailwind< / ע >
< br >
< div מעמד = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul מעמד = 'רשימה-דיסק' >
רשימה # 1
< זֶה >זהו הפריט הראשון< / זֶה >
< זֶה >זהו הפריט השני< / זֶה >
< זֶה >זהו הפריט השלישי< / זֶה >
< / ul >
< ul מעמד = 'רשימה-עשרונית' >
רשימה # 2
< זֶה >זהו הפריט הראשון< / זֶה >
< זֶה >זהו הפריט השני< / זֶה >
< זֶה >זהו הפריט השלישי< / זֶה >
< / ul >
< ul מעמד = 'רשימה-אין' >
רשימה # 3
< זֶה >זהו הפריט הראשון< / זֶה >
< זֶה >זהו הפריט השני< / זֶה >
< זֶה >זהו הפריט השלישי< / זֶה >
< / ul >
< / div >
ההסבר של הקוד לעיל הוא כדלקמן:
- א ' אלמנט ' נוצר עם ' xl 'גודל גופן ו' נוֹעָז ' משקל גופן. תוכן הטקסט של האלמנט ממוקם במרכז באמצעות ' מרכז טקסט ' מעמד.
- לאחר הפסקת שורה, ' נוצר אלמנט והוא מסופק עם ' לְהַגמִישׁ ' מעמד. פעולה זו תיצור מיכל שייישר את פריטי הצאצא אופקית.
- ה ' להצדיק-מרכז הכיתה תמקם את הפריטים במרכז המיכל.
- ה ' space-x-{גודל} מחלקה מספקת את הרווח האופקי בין הפריטים.
- ה ' bg-{color}-{number} מחלקה מגדירה את הרקע של המיכל לצבע שצוין.
- ה ' מעוגל-lg 'מחלקה הופכת את פינות המיכל לעגולות.
- ה ' mx-4 ” class מספקת את השוליים האופקיים למיכל הגמיש.
- ה ' p-2 הכיתה מספקת ריפוד למיכל הגמיש.
- לאחר מכן, נוצרים שלושה רכיבי רשימה ומסופקים עם סוגי סגנונות רשימה שונים באמצעות ' list-{type} ' מעמד.
תְפוּקָה:
מהפלט שלהלן, ניתן לראות שהרשימה הראשונה משתמשת בנקודות תבליטים, השנייה משתמשת במספרים עשרוניים, והשלישית אינה משתמשת בסמן פריט כלשהו.
שימוש במחלקת סגנון רשימה עם גרסאות המדינה ב-Tailwind
ניתן להשתמש במחלקה בסגנון רשימה עם גרסאות ברירת המחדל של המצב ב-Tailwind כדי להפוך את העיצוב לדינמי יותר. באמצעות גרסאות הרחף, המיקוד והמצב הפעיל, המשתמש יכול לשנות את סגנון הסמן של פריטי הרשימה בכל פעם שהמצב שצוין מופעל. התחביר לשימוש במחלקה בסגנון רשימה עם גרסאות מצב הוא כדלקמן:
< ul מעמד = '{מדינה}:רשימה-{סגנון}...' > < / ul >הנה דוגמה לשימוש בסוג סגנון הרשימה עם מצב 'רחף', שבו המשתמש יכול לשנות את סגנון הסמן על ידי ריחוף מעל בלוק הרשימה:
< ע מעמד = 'מרכז טקסט text-xl font-bold' >רחף את הסמן מעל בלוק רשימה כדי לשנות את סגנון הסמן< / ע >
< br >
< div מעמד = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul מעמד = 'רשימה-דיסק רחף:רשימה-עשרונית' >
רשימה # 1
< זֶה >זהו הפריט הראשון< / זֶה >
< זֶה >זהו הפריט השני< / זֶה >
< זֶה >זהו הפריט השלישי< / זֶה >
< / ul >
< / div >בקוד שלמעלה, הרשימה מסופקת עם ' רשימה-דיסק ' class כסוג ברירת המחדל של סגנון הרשימה. עם זאת, באמצעות ' hover:list-decimal ” מחלקה, סוג סגנון הרשימה ישתנה כאשר המשתמש ירחף עם סמן העכבר מעל בלוק הרשימה.
תְפוּקָה:
הפלט שלהלן מראה שסגנון סוג הרשימה משתנה מרשימת תבליטים לרשימה ממוספרת כאשר הסמן מרחף מעל בלוק הרשימה.
שימוש במחלקת סגנון הרשימה עם נקודות השבירה ב-Tailwind
נקודות פריצה משמשות לעיצוב רספונסיבי של הפריסה עבור גדלי מסך שונים. חמש נקודות השבירה המסופקות על ידי Tailwind הן sm, md, lg, xl ו-2xl. התחביר הבא משמש למתן נקודת עצירה למחלקה בסגנון סוג רשימה:
< ul מעמד = '{breakpoint}:list-{סגנון}...' > < / ul >הנה דוגמה לשימוש בסוג סגנון הרשימה עם ' md ' נקודת שבירה, שבה סגנון הסמן ישתנה כאשר גודל המסך יגיע לנקודת השבירה 'md':
< ע מעמד = 'מרכז טקסט text-xl font-bold' >הגדל מסך גודל כדי לשנות סגנון סמן< / ע >
< br >
< div מעמד = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul מעמד = 'list-disc md:list-decimal' >
רשימה # 1
< זֶה >זהו הפריט הראשון< / זֶה >
< זֶה >זהו הפריט השני< / זֶה >
< זֶה >זהו הפריט השלישי< / זֶה >
< / ul >
< / div >בקוד שלמעלה, הרשימה מסופקת עם ' רשימה-דיסק ' מחלקה כסגנון ברירת המחדל. עם זאת, באמצעות ' md:list-decimal סוג סגנון הרשימה ישתנה עבור גודל המסך 'md'.
תְפוּקָה:
כפי שניתן לראות בפלט למטה, סוג סגנון הרשימה משתנה מדיסק לעשרוני כאשר גודל המסך מגיע ל-' md ' נקודת שבירה.
זה הכל לגבי הגדרת סוג סגנון הרשימה ב-Tailwind.
סיכום
Tailwind מספקת שלוש מחלקות סוג סגנון רשימה מוגדרות מראש לשינוי סגנון הרישום של אלמנט. ה ' רשימה-דיסק הכיתה מספקת את נקודות התבליט לרישום הפריטים. ה ' רשימה-עשרונית ' מחלקה מספקת את המספרים לרישום הפריטים. ה ' רשימה-אין ' מחלקה יוצרת רשימה שאינה משתמשת באף סמן פריט. מאמר זה סיפק את ההליך להגדרת סוג סגנון הרשימה ב-Tailwind.