CSS מציעה מגוון מסגרות למתכנתים לעיצוב דפי אינטרנט דינמיים. זה חביב יותר מכיוון שהוא מספק את כל התכונות והכלים החשובים במקום אחד. אז, אתה לא צריך להשתמש במסגרות אחרות. המסגרת Tailwind ב-CSS היא הנפוצה ביותר מכיוון שהיא חוסכת את הזמן של המשתמש לכתוב CSS מוגזם.
מדריך זה מספק את השימוש ברחף, מיקוד ומצבים אחרים ב-Tailwind.
כיצד להשתמש בריחוף, פוקוס ומדינות אחרות ברוח גב?
בעת עיצוב דפי אינטרנט, יש צורך להוסיף אלמנטים דינמיים ואטרקטיביים כדי לשמור על אינטראקטיביות עם המשתמשים. ניתן להשתמש בתכונות ב-Tailwind ליצירת דפים אינטראקטיביים ודינאמיים מבלי לכתוב CSS מותאם אישית נוסף. חלק מהמאפיינים הם 'רחף', 'פוקוס' ו'פעיל' אשר מסייעים בהוספת משיכה לעיצובים.
שימוש ב-Hover Variant ב-HTML
מאפיין הרחף משמש לסגנון אלמנט HTML כאשר המשתמש מעביר את סמן העכבר מעל אלמנט מסוים. זה עוזר להציג חוויה חלקה.
שלב 1: החל את המאפיין 'רחף' ב-HTML
צור קובץ HTML והחל את מאפיין הרחף על אלמנט כלשהו בקוד. כדי לקבל רעיון, עיין בקוד המופיע להלן:
< גוּף >
< div מעמד = 'מֶרְכָּז' >
< לַחְצָן מעמד = 'bg-green-500 hover:bg-blue-500 text-white font-bold מעוגל' >
העבר אותי!
< / לַחְצָן >
< / div >
< / גוּף >
בקוד הזה:
- כפתור בשם ' העבר אותי! ' נוצר על ידי תג הכפתור.
- ' bg-green-500 ' מגדיר את צבע הרקע של הכפתור לירוק.
- ' רחף: bg-blue-500 ' משנה את צבע הכפתור מירוק לכחול כאשר העכבר מוזז מעליו.
- לטקסט בכפתור יש צבע לבן ' טקסט-לבן ' ו' פונט מודגש ' הופך את הגופן למודגש.
- צורת הכפתור מוגדרת לעגול על ידי ' מְעוּגָל '.
שלב 2: תצוגה מקדימה של הפלט
לאחר ביצוע הקוד לעיל, התצוגה הסופית נראית כך:
ניתן לראות כי הכפתור משנה צבע כאשר מעבירים את סמן העכבר מעליו.
שימוש בוריאנט פוקוס ב-HTML
מאפיין הפוקוס משמש לסגנון רכיבי HTML כך שכאשר המשתמש לוחץ על האלמנט הוא מודגש כדי למשוך את תשומת הלב של המשתמש.
שלב 1: החל את מאפיין הפוקוס בקוד ה-HTML
צור קובץ HTML והחל את מאפיין הפוקוס על אלמנט רצוי כלשהו. כדי להתרשם שקול את הקוד שלהלן:
< div >
< / div >
< / גוּף >
בקוד הזה:
- ה ' לְהַגמִישׁ 'הכיתה יוצרת גמישות.
- ה ' להצדיק-מרכז ” מצדיק את יישור התוכן למרכז.
- ה ' מרכז הפריטים מחלקה מתאימה את האובייקטים למרכז המסך.
- ה ' מסך h ' מגדיר את גודל המסך בהתאם לנקודת התצוגה.
- ' bg-blue-200 ' מגדיר את צבע הרקע לכחול.
- נוצרת תיבת קלט של סוג טקסט.
- ה ' מיקוד: bg-green-300 ' משנה את צבע תיבת הקלט לירוק כאשר המשתמש לוחץ עליו.
- ' w-64 ' מגדיר את הרוחב ל-64 פיקסלים.
- ' h-10 ' מגדיר את הגובה ל-10 פיקסלים.
- ' px-4 ' מוסיף ריפוד של 4 פיקסלים לצד העליון והשמאלי.
- ' py-2 ' מוסיף ריפוד של 2px לחלק העליון והתחתון.
שלב 2: תצוגה מקדימה של מאפיין המיקוד
שמור את קוד ה-HTML ופתח את דף האינטרנט שנוצר על ידו. לאחר מכן הזז את הסמן על תיבת הקלט ולחץ עליה והשינוי שלהלן יתרחש:
שימוש בגרסה הפעילה ב-HTML
מאפיין זה משמש לעיצוב אלמנטים עבור התנאי כאשר המשתמש מקיש באופן דינמי על האלמנט. המצב הפעיל הוא פרק הזמן משלב ההפעלה של הסמן ומצבו המשוחרר.
תחביר
פָּעִיל: { תכונה }מאפיין ה-CSS הספציפי מוחל על האלמנט הנבחר.
שלב 1: החל את הגרסה הפעילה בקוד ה-HTML
צור קובץ HTML והחל את המאפיין הפעיל על אלמנט כלשהו שבמקרה שלהלן הוא כפתור:
< div מעמד = 'להגמיש להצדיק-מרכז פריטים-מרכז H-מסך' >
< לַחְצָן מעמד = 'bg-green-600 p-4 rounded-md transition-transform duration-400 transform active:scale-110' >
לחץ עלי!
< / לַחְצָן >
< / div >
< / גוּף >
בקוד הזה:
- ' bg-green-600 ' מגדיר את צבע הרקע לירוק.
- ' p-4 ' מוסיף ריפוד של 4 פיקסלים.
- ' מעוגל-md הופך את צורת הכפתור למעוגלת.
- ' מעבר-טרנספורמציה ' משמש כדי להפוך את הכפתור למשך זמן קצר המוגדר על ידי ' משך-400 טרנספורמציה '.
- ה ' פעיל: scale-110 ' הופך את הכפתור לגודל גדול יותר.
שלב 2: תצוגה מקדימה של הפלט
שמור את הקוד לעיל בקובץ HTML והצג תצוגה מקדימה של דף האינטרנט שנוצר על ידו. דף האינטרנט ייראה כך:
ניתן לראות שגודל הכפתור גדל כאשר העכבר מחזיק אותו וברגע שהוא משתחרר הוא חוזר למצבו ההתחלתי.
סיכום
כדי להשתמש ברחף, מיקוד ומצבים אחרים ב-Tailwind, השתמש במחלקות המצב המוגדרות מראש כמו 'רחף' והחל עליו כמה מאפייני סגנון כגון שינוי צבע, יצירת טבעת מיקוד וכו'. כלי התצוגה משמשים להצגת פלט שניתן להרחבה. כתיבה זו הדגים את השיטה להשתמש במצבי ריחוף, מיקוד ומצבים אחרים ב-Tailwind.