מאמר זה ידגים את השיטה להחלת אפקט הרחף על כלי הזרימה האוטומטית ברשת ב-Tailwind CSS.
כיצד להחיל רחף על זרימה אוטומטית ברשת ברוח גב?
כדי להחיל את אפקט הריחוף על הזרימה האוטומטית של הרשת ב-Tailwind, צור קובץ HTML והשתמש ב-' לְרַחֵף 'כיתה עם ' grid-flow-<מילת מפתח> כלי השירות בתוכנת HTML. זה משנה את המיקום של פריטי רשת כאשר העכבר מרחף מעליהם. לבסוף, הצג את דף ה-HTML של האינטרנט ורחף עם העכבר על פריטי רשת כדי להבטיח שינויים.
עיין בשלבים הניתנים ליישום המעשי שלה:
שלב 1: השתמש במאפיין הרחף עם רשת השורות בתוכנית HTML
צור תוכנית HTML והשתמש ב-' לְרַחֵף ' נכס עם הרצוי ' grid-flow-<מילת מפתח> 'שירות. לדוגמה, השתמשנו ב' hover:grid-flow-row ' מחלקה כדי לשנות את המיקום של פריטי רשת מעמודה לשורה עם ריחוף:
< גוּף >
< div מעמד = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div מעמד = 'bg-teal-500 p-5' > 1 < / div >
< div מעמד = 'bg-teal-500 p-5' > 2 < / div >
< div מעמד = 'bg-teal-500 p-5' > 3 < / div >
< div מעמד = 'bg-teal-500 p-5' > 4 < / div >
< div מעמד = 'bg-teal-500 p-5' > 5 < / div >
< div מעמד = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / גוּף >
כאן:
- ' רֶשֶׁת ” class מגדירה את האלמנט כמיכל רשת.
- ' grid-flow-col ' מגדיר את זרימת פריטי הרשת בעמודות.
- ' hover:grid-flow-row ” class משנה את זרימת פריטי הרשת לשורות כאשר העכבר מרחף מעל המיכל.
- ' פער-3 ' מוסיף פער של 3 יחידות בין פריטי הרשת.
- ' m-3 ' מוסיף שוליים של 3 יחידות סביב מיכל הרשת.
- ' מרכז טקסט ' מיישר את תוכן הטקסט בתוך פריטי הרשת למרכז.
שלב 2: אימות פלט
כדי לוודא שאפקט הריחוף הוחל על הזרימה האוטומטית של הרשת, הצג את דף האינטרנט והזז את העכבר מעל פריטי הרשת:
ניתן לראות שבתחילה זרימת פריטי הרשת היא בעמודות וכאשר העכבר מרחף מעליהם, הזרימה משתנה לשורות. זה מציין שאפקט הריחוף מוחל בהצלחה על הזרימה האוטומטית של הרשת.
סיכום
כדי להחיל את אפקט הריחוף על הזרימה האוטומטית של הרשת ב-Tailwind, השתמש ב-' לְרַחֵף ' כיתה עם הרצוי ' grid-flow-<מילת מפתח> כלי השירות בתוכנת HTML. זה משנה את המיקום של פריטי רשת כאשר העכבר מרחף מעליהם. כדי להבטיח שינויים, הצג את דף ה-HTML של האינטרנט ורחף עם העכבר על פריטי רשת. מאמר זה הדגים את השיטה להחלת אפקט הרחף על כלי הזרימה האוטומטית ברשת ב-Tailwind CSS.