עם זאת, מאמר זה ירחיב על שתי מחלקות ספציפיות שהן דמויות פרופורציונליות ודמויות טבלה. אלה משמשים לסגנון הערכים המספריים ב-Tailwind ולסדר ולייצג את הנתונים המספריים באופן שמושך את עיצוב המסמך.
מאמר זה ירחיב על הנתונים הפרופורציונליים והטבלאיים ב-Tailwind CSS באמצעות המתאר הבא:
- כיצד להשתמש בדמויות פרופורציונליות ב-Tailwind CSS?
- כיצד להשתמש בדמויות טבלאיות ב-Tailwind CSS?
- ההבדל בין דמויות פרופורציונליות וטבלריות
כיצד להשתמש בדמויות פרופורציונליות ב-Tailwind CSS?
מחלקה של דמויות פרופורציונליות תקצה לאלמנט מוסכמה שבה לכל מספר אין אותו רוחב.
תחביר
התחביר לשימוש בדמויות היחסיות ב-Tailwind הוא כדלקמן:
< div מעמד = 'מספרים פרופורציונליים' >
< div / >
בתחביר שצוין לעיל, ' פרופורציונלי-מספרים ' יש לספק לאלמנט כדי להשתמש בדמויות פרופורציונליות.
בוא נראה דוגמה מעשית של נתונים פרופורציונליים.
בקוד שסופק להלן, שני ' ע אלמנטים כלולים ב- div ' רכיב המשתמש במחלקה של דמויות פרופורציונליות:
< div מעמד = 'Proportional-nums text-center bg-slate-200 text-xl' >< ע > 121212 < / ע >
< ע > 838383 < / ע >
< / div >
ההסבר של הקוד שסופק לעיל הוא כדלקמן:
- ה ' div אלמנט ' משתמש ב-' פרופורציונלי-מספרים ” מחלקה שתחיל את תכונת הדמות היחסית על המספרים.
- ה ' מרכז טקסט ” class ממקמת את הטקסט במרכז האלמנט.
- ה ' bg-{color}-{number} הכיתה אחראית על צבע הרקע של האלמנט.
- ה ' text-xl ” class מספקת גודל גופן גדול במיוחד עבור הטקסט.
- לאחר מכן, שניים' ע נוצרים אלמנטים המכילים מספרים שונים.
תְפוּקָה
ניתן לראות בפלט שמספרים ב'שני' ע ' לאלמנט יש רוחב קצת יותר גדול מהראשון. זה נובע ממחלקת הנתונים היחסיים:
כיצד להשתמש בדמויות טבלאיות ב-Tailwind CSS?
הדמויות הטבלה ב-Tailwind משייכות את המוסכמה לאלמנט שבו לכל מספר יש אותו גודל רוחב. זה יוצר ייצוג סימטרי דמוי טבלה של המספרים.
תחביר
התחביר לשימוש בדמויות הטבלה הוא כדלקמן:
< div מעמד = 'מספרי טבלאות' >< div / >
בתחביר שצוין לעיל, ' טבלאי-מספרים ” מחלקה מסופקת לאלמנט כדי להשתמש בדמויות הטבלה.
בואו נראה כיצד ה' טבלאי-מספרים ' להשפיע על הערכים המספריים במסמך HTML. להדגמה זו, שניים ' ע ' עם ערכים מספריים נוצרים ונכללים ב' div ' אלמנט המשתמש במחלקה של דמויות טבלאות:
< div מעמד = 'Tabelle-nums text-center bg-slate-200 text-xl' >< ע > 121212 < / ע >
< ע > 838383 < / ע >
< / div >
בקוד לעיל, ' טבלאי-מספרים הכיתה מסופקת ל' div ' אלמנט שיקצה את הסגנון של דמויות הטבלה לילד ' ע ' אלמנטים.
תְפוּקָה:
ניתן לראות בפלט לעיל שהערכים המספריים בשני האלמנטים מיושרים בצורה מושלמת בגלל אותם גדלי רוחב של הספרות.
מידע בונוס: ההבדל בין דמויות פרופורציונליות לטבלריות ב-Tailwind CSS
הבה נצפה בהדגמה המבדילה את ההשפעה של מחלקות דמויות טבלאיות ופרופורציונליות על הערכים המספריים. בהדגמה זו, האלמנטים יקבלו את מחלקת הדמויות היחסיות כברירת מחדל. לאחר מכן, באמצעות מצב הרחף, האלמנטים יוקצו בכיתה של דמויות טבלאות:
< div מעמד = 'פרופורציונלי-מספרים text-center bg-slate-200 text-xl hover:tabular-nums' >< ע > 121212 < / ע >
< ע > 838383 < / ע >
< / div >
ניתן לראות בקוד לעיל כי ' div רכיב ' מסופק עם ' פרופורציונלי-מספרים ', שתהיה מוסכמות ברירת המחדל שלפיה הערכים המספריים יפעלו.
באופן דומה, בשל ' hover:tabular-nums ' מחלקה, הערכים המספריים יפעלו בהתאם למוסכמה של דמויות טבלאות בכל פעם שהמשתמש מרחף עם סמן העכבר מעל האלמנט 'div'.
תְפוּקָה
בפלט הנתון, רוחב הערכים המספריים משתנה כאשר המשתמש מרחף את העכבר מעל האלמנט. זה מספק את ההבדל החזותי בין הדמויות הפרופורציונליות והטבלריות ב-Tailwind:
זה הכל לגבי נתונים פרופורציונליים וטבלאריים ב-Tailwind.
סיכום
כדי להשתמש במספרים פרופורציונליים ב-Tailwind, ה-' פרופורציונלי-מספרים 'מחלקה משמשת. הדמויות היחסיות משתמשות במוסכמה שבה לכל ערך מספרי יש גודל רוחב שונה. כדי להשתמש בדמויות הטבלה ב-Tailwind, ' טבלאי-מספרים 'מחלקה משמשת. הדמויות הטבלה משתמשות במוסכמה שבה לכל ערך מספרי יש אותו גודל רוחב. מאמר זה סיפק את ההליך לשימוש בדמויות פרופורציונליות וטבלריות ב-Tailwind.