كيف تحوم في النمط في رد فعل

المُقدّمة

يعد العمل مع العناصر المرئية طريقة ممتازة للحفاظ على تفاعل واجهتنا وجذب انتباه المستخدم. وجود كائنات متحركة على شاشتنا يخلق تجربة فريدة ويزيد من التفاعل.

في هذه المقالة ، سوف نتعلم كيفية تحريك النمط في 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 عندما يكون الماوس فوق المربع ثم إعادته إلى نمطه الافتراضي عند إزالة الماوس.

كيف تحوم في النمط في رد فعل

هناك طريقتان لهذا: خارجي ومضمّن. يتضمن الوضع الخارجي وجود ملف 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 إلى المحدد المصمم مسبقًا وتغيير أي من الخصائص التي أردنا تغييرها عندما يكون الماوس فوق العنصر.

كيف تحوم في النمط في التفاعل مع التصميم المضمن

من خلال التصميم المضمن ، فإننا نعني التصميم عبر علامة العنصر ، والتي يتم تحقيقها باستخدام 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 بأسلوب 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 باستخدام كل من التصميم الخارجي والتصميم المضمن في هذه المقالة. على الرغم من أن التصميم المضمن غير موصى به ، إلا أنه من المفيد فهم كيفية عمله في حالة مطالبتنا باستخدامه.