מאמר זה יסביר כיצד להשתמש בשברים אלכסוניים ב-Tailwind.
כיצד להשתמש בשברים אלכסוניים ב-Tailwind CSS?
מחלקת השברים האלכסוניים ב-Tailwind היא וריאנט גופן מספרי מוגדר מראש שהופך את המונה והמכנה לקטנים יותר ומפריד ביניהם באלכסון. זה גורם למספר השבר להיראות ייחודי משאר הטקסט.
תחביר
התחביר של השימוש ב' אלכסוני-שברים הכיתה היא כדלקמן:
< div מעמד = 'שברים אלכסוניים' >
< div / >
כפי שניתן לראות מהתחביר לעיל, המפתח צריך לספק ' אלכסוני-שברים ' בתוך ה ' מעמד ' תכונה של האלמנט.
בואו נשתמש בכיתה 'שברים אלכסוניים' כדוגמה מעשית. בהדגמה שלהלן, המשתמש יכול לראות את ההבדל בין השברים הרגילים לשברים האלכסוניים:
< div מעמד = 'bg-slate-200 text-center text-lg' >< ע > שברים רגילים: 3 / 5 6 / 3 6 / 5 < / ע >
< ע מעמד = 'שברים אלכסוניים' > שברים אלכסוניים: 3 / 5 6 / 3 6 / 5 < / ע >
< / div >
ההסבר של הקוד לעיל הוא כדלקמן:
- ה ' div אלמנט ' נוצר ומסופק כצבע הרקע באמצעות ' bg-{color}-{number} ' מעמד.
- לאחר מכן, הטקסט מסופק בגודל גופן גדול והוא מיושר למרכז האלמנט באמצעות ' text-lg 'ו' מרכז טקסט 'שיעורים בהתאמה.
- לאחר מכן, שניים' נוצרים אלמנטים, כאשר השני מסופק עם ' אלכסוני-שברים ' מעמד.
תְפוּקָה:
ניתן לראות בבירור את ההבדל בין השבר האלכסוני לשבר הרגיל בפלט לעיל.
שימוש במחלקת שברים אלכסוניים עם נקודות שבירה
נקודות השבירה משמשות כשאילתות המדיה ב-Tailwind. ישנן חמש נקודות עצירה ברירת מחדל עם רוחב מינימלי מוגדר. ניתן להשתמש בנקודות שבירה אלו עם כל מחלקה ב-Tailwind כדי ליצור פריסות עיצוב רספונסיביות ודינאמיות.
כדי להשתמש ב' אלכסוני-שברים ' מחלקה עם נקודת שבירה ב-Tailwind, נעשה שימוש בתחביר הבא:
{ קידומת נקודת שבירה } : שבר אלכסוניהטבלה שלהלן מספקת את הרוחב המינימלי עבור נקודות שבירה שונות ב-Tailwind:
| קידומת נקודת שבירה | רוחב מינימלי |
|---|---|
| sm | 640 פיקסלים |
| md | 768 פיקסלים |
| lg | 1024 פיקסלים |
| xl | 1280 פיקסלים |
| 2xl | 1536 פיקסלים |
בוא נשתמש בנקודות שבירה עם ' אלכסוני-שברים ' בכיתה כדי להבין באופן מעשי את השימוש בהם:
< div מעמד = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
בקוד שסופק לעיל, רכיב div מסופק ב-' md:אלכסון-שברים ' מחלקה שתשנה את הגופן של השברים המספריים כאשר ' md ' מגיעה לנקודת השבירה.
תְפוּקָה
כפי שניתן לראות בפלט, המספרים השברים מסופקים עם הגופן של השבר האלכסוני כאשר ' md 'מגיעים לנקודת שבירה:
שימוש במחלקת השברים האלכסוניים עם מצבי רוח גב
Tailwind מספק ברירת מחדל ' מדינות ' על מנת לספק מאפייני עיצוב לאלמנט כאשר המצב הספציפי הזה מופעל. זה הופך את פריסת העיצוב למושכת ודינמית יותר. על מנת להשתמש במחלקה 'שברים אלכסוניים' עם מצב ב-Tailwind, נעשה שימוש בתחביר הבא:
{ מדינה } : שבר אלכסונימצב ברירת המחדל שסופק על ידי Tailwind הוא כדלקמן:
- לְרַחֵף: כאשר המשתמש מרחף את הסמן מעל האלמנט.
- מוֹקֵד: כאשר המשתמש מתמקד באלמנט על ידי ניווט אליו.
- פָּעִיל: כאשר המשתמש מפעיל אלמנט על ידי לחיצה עליו.
- השבת: כאשר המשתמש אינו רשאי להפעיל אלמנט.
ההדגמה שלהלן מספקת דוגמה מעשית לשימוש ב' אלכסוני-שברים 'כיתה עם ' לְרַחֵף ' מצב ב-Tailwind:
< div מעמד = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
ה ' div אלמנט ' בקוד לעיל מסופק על ידי ' רחף:אלכסון-שברים ” מחלקה שתשנה את הגופן הרגיל של מספרי השברים לגופן השבר האלכסוני.
תְפוּקָה
כפי שניתן לראות בפלט, הגופן המספרי של מספר השבר משתנה כאשר המשתמש מרחף מעליו את סמן העכבר:
זה הכל על השימוש במחלקת השבר האלכסוני ב- Tailwind CSS.
סיכום
כדי להשתמש בשברים האלכסוניים ב-Tailwind CSS, השתמש ב-' שבר אלכסוני ' מעמד. מחלקה זו תפריד בין המונה והמכנה באלכסון ותהפוך אותם לקטנים. משתמשים יכולים גם להשתמש במחלקה 'שברים אלכסוניים' עם נקודות השבירה והמצבים המוגדרים כברירת מחדל ב-Tailwind כדי להפוך את העיצוב לדינמי יותר. מאמר זה סיפק את ההליך לשימוש בשברים האלכסוניים ב-Tailwind.