מאמר זה יספק את ההליך להחלת מאפיין גובה מינימלי על Hover, Focus ומדינות אחרות ב-Tailwind.
הערה: כדי לדעת יותר על שיעורי גובה מינימום ב-Tailwind, קרא את זה מאמר באתר שלנו.
כיצד להחיל נכס בגובה מינימלי לרחף, פוקוס ומדינות אחרות ברוח גב?
Tailwind מספקת גרסאות מצב ברירת מחדל שניתן לספק עם מאפייני העיצוב. גרסאות מצב אלה כוללות 'רחף', 'פוקוס' ו'פעיל'. התיאור של גרסאות המדינה הללו הוא כדלקמן:
- ה' לְרַחֵף 'מצב מופעל בכל פעם שסמן העכבר מרחף מעל אלמנט.
- ה ' מוֹקֵד 'מצב מופעל בכל פעם שהאלמנט נמצא בפוקוס.
- ה ' פָּעִיל 'מצב מופעל בכל פעם שהרכיב מופעל או לוחצים עליו.
הבה נשתמש במאפיין הגובה המינימלי עם כל אחת מהמדינות הללו אחת אחת.
שימוש בנכס גובה מינימום עם מצב ריחוף
כדי להשתמש ב' גובה מינימלי מחלקה עם וריאנט מצב ריחוף ב-Tailwind, נעשה שימוש בתחביר הבא:
< div מעמד = 'hover:min-h-{size}...' > < / div >
בואו נשתמש בתחביר שהוגדר לעיל בהדגמה. בדוגמה זו, נגדיל את הגובה המינימלי של אלמנט בכל פעם שסמן העכבר מרחף מעל האלמנט.
< div מעמד = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' > העבר את העכבר כדי להגדיל את המינימום גוֹבַה < / div >ההסבר של הקוד לעיל הוא כדלקמן:
- ה ' min-w-fit ” class מגדיר את מגבלת הגובה המינימלית לגובה הנדרש על ידי אלמנט div כדי להתאים לתוכן שלו.
- ה ' hover:min-w-screen הכיתה תספק מגבלת גובה מינימלית השווה ל-100% מגודל המסך.
- ה ' מעוגל-md ',' bg-{color}-{number} ',' מרכז טקסט ', ו' טקסט-לבן השיעורים אחראים לפינות מעוגלות, צבע רקע, טקסט מיושר למרכז וצבע טקסט לבן עבור רכיב div בהתאמה. הפינות של אלמנט ה-div מעוגלות.
תְפוּקָה:
ברור מהפלט שלהלן, שהגובה המינימלי של האלמנט גדל ל-100% מגודל המסך כאשר סמן העכבר מרחף מעליו.
שימוש בנכס גובה מינימום עם מצב פוקוס
כדי להשתמש ב' גובה מינימלי ' מחלקה עם מצב המיקוד ב-Tailwind, נעשה שימוש בתחביר הבא:
< div מעמד = 'focus:min-h-{size}...' > < / div >בואו נשתמש בתחביר שהוגדר לעיל בהדגמה. בדוגמה זו, הגובה המינימלי של שדה קלט יגדל כאשר המשתמש יתמקד בו.
< קֶלֶט מציין מיקום = 'התמקד בשדה הקלט הזה' מעמד = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' >< / קֶלֶט >ההסבר של הקוד לעיל הוא כדלקמן:
- ' קֶלֶט ' השדה נוצר עם טקסט כלשהו בתכונת מציין המיקום.
- הוא מסופק מגבלת גובה מינימלית של 0px באמצעות ' דקה-ח-0 ' מעמד. אז, המפתח הגדיר את גובה ברירת המחדל של האלמנט שווה לגובה הנדרש כדי להתאים לתוכן באמצעות ' h-fit ' מעמד.
- ה ' פוקוס:דקה-שעה-[35%] ” class תגדיל את מגבלת הגובה המינימלית של שדה הקלט כאשר המשתמש יתמקד בו.
תְפוּקָה:
ברור מהפלט שלהלן שגובה שדה הקלט גדל ככל שהמשתמש מתמקד בו. הסיבה לכך היא שמגבלת הגובה המינימלית עולה מ-0px ל-35% מגובה המסך.
שימוש בנכס גובה מינימלי עם מצב פעיל ב-Tailwind
כדי להשתמש ב' גובה מינימלי ' מאפיין עם וריאנט המצב הפעיל ב-Tailwind, נעשה שימוש בתחביר הבא:
< div מעמד = 'active:min-h-{size}...' > < / div >בואו נשתמש בתחביר שהוגדר לעיל בהדגמה. בדוגמה זו, הגובה המינימלי של הכפתור יגדל כאשר המשתמש ילחץ עליו באופן פעיל.
< לַחְצָן מעמד = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > לחץ כדי להגדיל גוֹבַה < / לַחְצָן >נוצר כפתור עם הגבלת גובה מינימלית של 0px. עם זאת, באמצעות ' פעיל:דקה-שעה-[35%] ' מגבלת הגובה המינימלית תגדל מ-0px ל-35% מגודל המסך בכל פעם שתלחץ על הכפתור.
תְפוּקָה:
ניתן לראות בפלט הבא שגובה המינימום של הכפתור עולה כאשר המשתמש לוחץ עליו.
זה הכל על החלת מאפיין הגובה המינימלי על Tailwind רחף, מיקוד ושאר המדינות ב-Tailwind.
סיכום
גרסאות המצב כגון ריחוף, מיקוד ופעיל ב-Tailwind מאפשרות למשתמשים ליצור פריסות עיצוב דינמיות. כדי להשתמש בדרגת הגובה המינימלית עם גרסאות המדינה ב-Tailwind, ' hover:min-h-{value} ',' focus:min-h-{value} ', ו' active:min-h-{value} משתמשים בשיעורים. מאמר זה סיפק את ההליך להחלת ריחוף, מיקוד ומדינות אחרות עם דרגת הגובה המינימלית ב-Tailwind.