رد عمل میں ہوور کو کیسے اسٹائل کریں۔

تعارف

بصری کے ساتھ کام کرنا ہمارے انٹرفیس کو انٹرایکٹو رکھنے اور صارف کی توجہ حاصل کرنے کا ایک بہترین طریقہ ہے۔ ہماری سکرین پر اشیاء کو اینیمیٹ کرنے سے ایک انوکھا تجربہ پیدا ہوتا ہے اور تعامل میں اضافہ ہوتا ہے۔

اس آرٹیکل میں، ہم سیکھیں گے کہ سی ایس ایس کا استعمال کرتے ہوئے ری ایکٹ میں ہوور کو کس طرح اسٹائل کرنا ہے، اور ساتھ ہی ان لائن ہوور اسٹائلنگ کرنے کا طریقہ بھی سیکھیں گے۔

ہوور ایک سیڈو کلاس ہے جو ہمیں صارف کو آگاہ کرنے کے لیے مخصوص طرزیں شامل کرنے کی اجازت دیتا ہے جب اس کا ماؤس کسی مخصوص عنصر کے آن اور آف ہوتا ہے۔ اس مضمون کے لیے، ہم ایک باکس استعمال کریں گے:

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 جب ماؤس باکس کے اوپر ہو اور پھر جب ماؤس ہٹا دیا جائے تو اسے اس کے پہلے سے طے شدہ انداز میں واپس کر دیں۔

رد عمل میں ہوور کو کیسے اسٹائل کریں۔

اس کے دو طریقے ہیں: بیرونی اور ان لائن۔ ایکسٹرنل میں ایک الگ سی ایس ایس فائل کا ہونا شامل ہے جو ہوور کے لیے اسٹائل کرنا آسان بناتا ہے، جب کہ ان لائن اسٹائلنگ ہمیں سیوڈو کلاس کے ساتھ اسٹائل کرنے کی اجازت نہیں دیتی، لیکن ہم اس آرٹیکل میں ماؤس ایونٹس کا استعمال کرکے ان لائن سی ایس ایس میں ہوور کو اسٹائل کرنے کا طریقہ سیکھیں گے۔

سی ایس ایس بیرونی اسٹائلنگ کے ساتھ رد عمل میں ہوور کو کیسے اسٹائل کریں۔

یہ 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>
   );
};

اب تک، ہم نے اپنا باکس بنایا ہے۔ ری ایکٹ میں ان لائن سی ایس ایس کے ساتھ ہوور کو اسٹائل کرنے کے لیے، ہم شرط کے ساتھ ریاست کا استعمال کرتے ہوئے ان لائن اسٹائل سیٹ کرتے ہیں، 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 میں ہوور کرنے کے قابل ہو گئے ہیں۔

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 میں ہوور کو اسٹائل کرنے کا طریقہ سیکھا۔ اگرچہ ان لائن اسٹائلنگ کی سفارش نہیں کی جاتی ہے، لیکن یہ سمجھنا مفید ہے کہ اگر ہمیں اسے استعمال کرنے کا کہا جائے تو یہ کیسے کام کرتی ہے۔