איך לסגנן ריחוף ב-React

מבוא

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

במאמר זה, נלמד כיצד לעצב ריחוף ב-React באמצעות CSS, וכן כיצד לבצע סגנון ריחוף מוטבע.

Hover הוא מחלקה פסאודו שפשוט מאפשרת לנו להוסיף סגנונות ספציפיים כדי לגרום למשתמש להיות מודע כאשר העכבר שלו מופעל ומכבה אלמנט מסוים. עבור מאמר זה, נשתמש בתיבה:

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

בעל הסגנון הבסיסי הזה:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

בעיקרון, נשנה את צבע הרקע ל lightblue כאשר העכבר נמצא מעל התיבה ולאחר מכן החזר אותו לסגנון ברירת המחדל שלו כאשר העכבר מוסר.

איך לסגנן ריחוף ב-React

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

כיצד לסגנן ריחוף בתגובה עם סטיילינג חיצוני CSS

זה דומה מאוד לאופן שבו HTML ו-CSS עובדים; כל שעלינו לעשות הוא לתת את האלמנט a className (לא class) או השתמש בתג בתור הבורר שאליו היינו ממקדים ואז סגננו את מחלקת הפסאודו המרחפת:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

כל מה שעשינו זה להוסיף את :hover pseudo class לבורר שעוצב בעבר ולשנות כל אחד מהמאפיינים שרצינו לשנות כשהעכבר היה מעל האלמנט.

כיצד לעצב ריחוף בתגובה עם סטיילינג מוטבע

בעיצוב מוטבע, אנו מתכוונים לעיצוב באמצעות תג האלמנט, אשר מתבצע באמצעות ה- style תְכוּנָה. אם ברצוננו להמיר את הקוד הקודם לסגנון מוטבע:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

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

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

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

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

בשלב זה, אנו יכולים לעצב על תנאי כל נכס באמצעות *isHover* מדינה:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

עד כה, ראינו איך ליישם את זה. כעת, בואו נפרק את הקוד שלנו ונסביר מדוע השתמשנו בתחביר שעשינו. התחלנו ביצירת מצב המאחסן ערך בוליאני המציין מתי מתרחש ריחוף (true) ואחרות (כברירת מחדל הוא מוגדר ל false):

const [isHover, setIsHover] = useState(false);

לאחר מכן הוספנו גם שני אירועים ל-div כדי לעזור לשנות את המצב שלנו ולדעת מתי העכבר נמצא על הקופסה ומתי הוא מחוץ לקופסה:

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

אל האני onMouseEnter האירוע מופעל כאשר העכבר נכנס לאלמנט, בעוד ה- onMouseLeave האירוע מופעל כאשר הוא עוזב. הקצהנו פונקציה לכל אחד מהאירועים האלה, שבה אנו משתמשים כעת כדי לשנות את המצב:

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

קבענו את ה- state בכל פונקציה בהתבסס על האירוע המופעל. לבסוף, אנו יכולים להשתמש במדינה כדי לעצב את התיבה באופן מותנה לא רק עבור backgroundColor, אבל גם עבור כל סגנון אחר:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

כשאנחנו מחברים את כל זה ביחד, אנחנו יכולים כעת לרחף בסגנון בסגנון React with Inline:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

סיכום

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