שיעורי CSS מותנים ב- Thymeleaf

1. סקירה כללית

במדריך מהיר זה, נלמד כמה דרכים שונות להוסיף כיתות CSS מותנות ב- Thymeleaf.

אם אינך מכיר את Thymeleaf, אנו ממליצים לבדוק את מבואנו אליו.

2. שימוש th: אם

נניח שהמטרה שלנו היא ליצור a שהשיעורים שלו נקבעים על ידי השרת:

 יש לי שתי מחלקות: "בסיס" או "תנאי נכון" או "תנאי שקר", תלוי במצב בצד השרת. 

לפני הגשת ה- HTML הזה, אנו זקוקים לדרך טובה עבור השרת להעריך מצב ולכלול את ה- תנאי נכון כיתה או מצב שקר כיתה, כמו גם א בסיס מעמד.

בעת תבנית HTML, זה די נפוץ שיש להוסיף לוגיקה מותנית להתנהגות דינמית.

ראשית, בואו נשתמש th: אם להדגים את הצורה הפשוטה ביותר של לוגיקה מותנית:

 HTML זה משוכפל. אנחנו כנראה רוצים פיתרון טוב יותר. HTML זה משוכפל. אנחנו כנראה רוצים פיתרון טוב יותר. 

אנו יכולים לראות כאן כי הדבר יביא באופן הגיוני לכך שמחלקת ה- CSS הנכונה תחובר לאלמנט ה- HTML שלנו, אך פיתרון זה מפר את עקרון ה- DRY כי זה דורש שכפול של כל גוש הקוד.

באמצעות th: אם בהחלט יכול להיות שימושי במקרים מסוימים, אך עלינו לחפש דרך אחרת להוסיף באופן דינמי כיתת CSS.

3. שימוש th: attr

Thymeleaf מציע לנו תכונה שתאפשר לנו להגדיר תכונות אחרות, הנקראות th: attr.

בואו נשתמש בו כדי לפתור את הבעיה שלנו:

 HTML זה מאוחד, וזה טוב, אך למאפיין Thymeleaf יש עדיין יתירות מסוימת. 

יתכן ששמת לב שה- בסיס הכיתה עדיין משוכפלת. גַם, יש תכונה ספציפית יותר של Thymeleaf בה אנו יכולים להשתמש בעת הגדרת שיעורים.

4. שימוש th: כיתה

ה th: כיתה תכונה היא קיצור דרך עבור th: attr = "class = ..." אז בואו נשתמש בו במקום זאת, יחד עם הפרדת ה- בסיס שיעור מחוץ לתוצאת המצב:

 יש לצרף את מחלקת ה- CSS הבסיסית באמצעות שרשור מחרוזת. אנחנו יכולים לעשות קצת יותר טוב. 

פיתרון זה די טוב מכיוון שהוא עונה על הצרכים שלנו והוא יבש. למרות זאת, יש עדיין תכונה נוספת של Thymeleaf שאנחנו יכולים ליהנות ממנה.

5. שימוש th: classappend

לא יהיה נחמד לפרק לחלוטין את מעמד הבסיס שלנו מההיגיון המותנה? אנו יכולים להגדיר סטטית את שלנו בסיס מחלק והפחית את ההיגיון המותנה לחלקים הרלוונטיים בלבד:

 HTML זה מאוחד, והמחלקה המותנית מתווספת בנפרד ממחלקת הבסיס הסטטית. 

6. מסקנה

עם כל איטרציה של קוד Thymeleaf שלנו, למדנו על טכניקה מותנית שימושית שעשויה להיות שימושית מאוחר יותר. בסופו של דבר, מצאנו כי באמצעות th: classappend מספק לנו את השילוב הטוב ביותר של קוד יבש והפרדת דאגה תוך סיפוק מטרתנו.

ניתן לראות את כל הדוגמאות הללו בפרויקט עובד של Thymeleaf הזמין באתר GitHub.


$config[zx-auto] not found$config[zx-overlay] not found