מאמר זה עוסק בהליך היישום להחלת ריחוף ומצבים אחרים עם מאפייני ראות באמצעות Tailwind CSS.
כיצד להחיל את הרחף ומדינות אחרות עם כלי הנראות ברוח הגבית?
ניתן להשתמש בכלי השירות לנראות לאורך הרחף ובמצבים אחרים כדי לבצע את שינויי הנראות באינטראקציה של המשתמש. ישנן שלוש מחלקות תחת כלי הנראות, כלומר ' גלוי ', ' בלתי נראה ', ו' הִתמוֹטְטוּת '. בואו נשלב כמה משיעורי נראות עם מצבי ריחוף בדוגמאות שלהלן להבנה טובה יותר.
דוגמה 1: החלת מצב ריחוף לאורך המחלקה ה'בלתי נראית'.
במקרה זה, האלמנט הנבחר יוסתר כאשר הסמן של המשתמש ירחף מעל האלמנט, הקוד מוצג להלן:
< גוּף >
< div מעמד = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div מעמד = 'bg-blue-500 p-3 מרכז טקסט מעוגל' > 01 < / div >
< div מעמד = 'bg-blue-500 p-3 hover:invisible טקסט מעוגל במרכז' > 02 < / div >
< div מעמד = 'bg-blue-500 p-3 מרכז טקסט מעוגל' > 03 < / div >
< / div >
< / גוּף >
הסבר על הקוד לעיל:
- ראשית, נוצר div האב אשר יוצר פריסת רשת של שלוש עמודות עם רווח בין כל עמודה לשוליים של ' 4 פיקסלים '. שימוש ב-Tailwind CSS ' רֶשֶׁת ', ' grid-cols-3 ', ' פער ', ' שֶׁלִי ', ו' mx 'שיעורים בהתאמה.
- לאחר מכן, שלושה ילדים' div נוצרים אלמנטים ומוחל עליהם סטיילינג בסיסי.
- אז ה ' לְרַחֵף 'מצב או בורר ב-CSS מוקצה ל-'div' השני ול-' בלתי נראה ' מוקצה לו מופרד על ידי נקודתיים ' : 'סימן. זה הופך את ה-div השני לבלתי נראה כאשר העכבר מרחף מעליו.
תצוגה מקדימה של דף האינטרנט לאחר שלב הביצוע:
ה-GIF שלמעלה מראה שה-div השני הופך לבלתי נראה בעת ריחוף עם העכבר.
דוגמה 2: החלת מצב פעיל לאורך המחלקה ה'בלתי נראית'.
המצב 'פעיל' מחיל סגנונות כאשר המשתמש בוחר אלמנט מסוים ואינו עוזב. בדיוק כמו תיבות טקסט כאשר משתמש מתחיל להזין נתונים בתוך השדה, בשלב זה השדה פעיל. כדי לקבל הבנה ברורה יותר של המצב הפעיל וכיצד הוא עובד עם המחלקה 'בלתי נראה', בקר בקוד הבא:
< גוּף >< div מעמד = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div מעמד = 'bg-blue-500 p-3 מרכז טקסט מעוגל' >01< / div >
< div מעמד = 'bg-blue-500 p-3 active:invisible מרכז טקסט מעוגל' >02< / div >
< div מעמד = 'bg-blue-500 p-3 מרכז טקסט מעוגל' >03< / div >
< / div >
< / גוּף >
בקוד לעיל, המחלקה של ' בלתי נראה ' מוקצה ל' פָּעִיל ' מדינה עבור השני ' div ' רכיב כדי להסתיר את רכיב ה-div השני כאשר הוא ייבחר.
לאחר הביצוע, התצוגה המקדימה של דף האינטרנט מופיעה כך:
הפלט לעיל מראה שכאשר ה-'div' השני נבחר האלמנט הופך לבלתי נראה.
סיכום
ניתן להשתמש בריחוף ובמצבים אחרים כמו פעיל או מיקוד עם המחלקות המסופקות על ידי כלי הנראות כדי לשנות את מאפייני הנראות עבור האלמנטים שנבחרו. כדי לשנות את הנראות של אלמנטים ברחף עכבר, מחלקת הרחף משמשת לאורך מחלקות הנראות המופרדות על ידי צבע כמו ' hover:visible ' או ' רחף: בלתי נראה '. בלוג זה הסביר את הנוהל להחלת מצבי ריחוף עם כלי הנראות.