চক্র UI এর সাথে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনে কাস্টম সতর্কতা তৈরি করুন

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

সতর্কতা হল একটি ওয়েবসাইট/ওয়েব অ্যাপ্লিকেশনে প্রদর্শিত বার্তা যা একজন ব্যবহারকারীকে গুরুত্বপূর্ণ তথ্য জানাতে। তারা ওয়েব অ্যাপ্লিকেশন একটি গুরুত্বপূর্ণ ভূমিকা পালন করে. প্রতিক্রিয়ায় সতর্কতা তৈরি করার অনেক উপায় রয়েছে; চক্র UI প্রক্রিয়াটিকে সহজ এবং দক্ষ করে তোলে।

চক্র UI হল প্রতিক্রিয়ার জন্য একটি জনপ্রিয় উপাদান লাইব্রেরি যা কাস্টমাইজযোগ্য এবং অ্যাক্সেসযোগ্য UI উপাদানগুলির একটি সেট সরবরাহ করে।

---

---

দিনের মেকইউজের ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

চক্র UI ইনস্টল করা হচ্ছে

চক্র UI লাইব্রেরি ব্যবহার করতে, অনেক প্রতিক্রিয়া উপাদান লাইব্রেরি এক , আপনাকে প্রথমে এটি ইনস্টল করতে হবে। আপনি আপনার node.js প্রকল্পের ডিরেক্টরিতে নিম্নলিখিত টার্মিনাল কমান্ডটি চালিয়ে এটি ইনস্টল করতে পারেন:

 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 

বিকল্পভাবে, আপনি সুতা ব্যবহার করে চক্র UI ইনস্টল করতে পারেন। এটি করতে, নিম্নলিখিত কমান্ডটি চালান:

 yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion 

চক্র UI সেট আপ করা হচ্ছে

চক্র UI ইনস্টল করার পরে, আপনাকে অবশ্যই এটি আপনার অ্যাপ্লিকেশনে উপলব্ধ করতে হবে। এটি করার জন্য, আপনাকে সেট আপ করতে হবে চক্রপ্রদানকারী উপাদান.

দ্য চক্রপ্রদানকারী কম্পোনেন্ট হল একটি শীর্ষ-স্তরের উপাদান যা চক্র UI লাইব্রেরি প্রদান করে। এটি সম্পূর্ণ অ্যাপ্লিকেশনটি মোড়ানো এবং এর সমস্ত উপাদানগুলিতে থিম এবং স্টাইলিং প্রসঙ্গ সরবরাহ করে।

সেট আপ করতে চক্রপ্রদানকারী উপাদান, এটি থেকে আমদানি করুন @chakra-ui/react :

---

---

 import React from 'react' 
import ReactDOM from 'react-dom/client' 
import App from './App' 
import { ChakraProvider } from '@chakra-ui/react' 
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 
  <React.StrictMode> 
    <ChakraProvider> 
      <App /> 
    </ChakraProvider> 
  </React.StrictMode> 
) 

দ্য চক্রপ্রদানকারী উপাদান সমর্থন করে a থিম সাহায্য পাস করা থিম prop to the চক্রপ্রদানকারী কম্পোনেন্ট নিশ্চিত করে যে অ্যাপ্লিকেশনের সমস্ত চক্র UI উপাদানগুলি প্রদত্ত থিম এবং স্টাইলিং প্রসঙ্গে অ্যাক্সেস করতে পারে। দ্য থিম প্রপ ঐচ্ছিক; আপনি যদি এটি পাস না করেন তবে চক্র UI একটি ডিফল্ট থিম ব্যবহার করবে।

সতর্কতা উপাদান ব্যবহার করে একটি কাস্টম সতর্কতা তৈরি করা

চক্র UI চারটি উপাদান অফার করে যা আপনাকে একটি কাস্টম সতর্কতা তৈরি করতে দেয়: সতর্কতা , সতর্কতা আইকন , সতর্কতা শিরোনাম , এবং সতর্কতা বর্ণনা .

---

---

আপনার সতর্কতা বার্তা তৈরি করতে, চক্র UI লাইব্রেরি থেকে এই উপাদানগুলি আমদানি করুন এবং সেগুলিকে নিম্নরূপ ব্যবহার করুন:

কিভাবে পিসিতে প্লেস্টেশন 2 গেম খেলতে হয়

 import React from 'react'; 
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react' 
 
function App() { 
  return ( 
    <div> 
      <Alert status='success'> 
        <AlertIcon /> 
        <AlertTitle>Welcome!!!</AlertTitle> 
        <AlertDescription>Its nice to have you here</AlertDescription> 
      </Alert> 
    </div> 
  ) 
} 
 
export default App 

উপাদান আমদানি করার পরে, সতর্কতা উপাদান ব্যবহারকারীকে একটি বার্তা প্রদর্শন করে। এটার আছে একটি অবস্থা প্রপ সেট 'সফলতা' যা নির্দেশ করে যে বার্তাটি একটি সফল বার্তা।

আরও তিনটি স্ট্যাটাস রয়েছে: 'তথ্য,' 'ত্রুটি,' এবং 'সতর্কতা'। সতর্কতাটি যে রঙের স্কিম এবং আইকনটি ব্যবহার করে তা বার্তার অবস্থার উপর নির্ভর করবে।

দ্য সতর্কতা উপাদানটিতে তিনটি শিশু রয়েছে: সতর্কতা আইকন , সতর্কতা শিরোনাম , এবং সতর্কতা বর্ণনা . দ্য সতর্কতা আইকন উপাদান বার্তার পাশে একটি ছোট আইকন প্রদর্শন করে, সতর্কতা শিরোনাম প্রধান বার্তা প্রদর্শন করে, এবং সতর্কতা বর্ণনা বার্তাটির আরও বিশদ বিবরণ প্রদর্শন করে।

পূর্ববর্তী কোড ব্লকটি এমন একটি সতর্কতা তৈরি করবে যা এইরকম দেখাচ্ছে:

ভেরিয়েন্ট প্রপ ব্যবহার করে সতর্কতা বার্তা কাস্টমাইজ করা

সতর্কতা বার্তার চেহারা কাস্টমাইজ করতে, ব্যবহার করুন বৈকল্পিক প্রপ এর সতর্কতা উপাদান. দ্য বৈকল্পিক প্রপ সতর্কতা বার্তাটির দৃশ্যমান চেহারা সংজ্ঞায়িত করে এবং বার্তাটির রঙের স্কিম, আইকন এবং ফন্টের ওজন নির্ধারণ করে যা আপনি এটিতে পাস করেন তার উপর ভিত্তি করে।

দ্য বৈকল্পিক প্রপ বিভিন্ন স্ট্রিং মান গ্রহণ করে যেমন সূক্ষ্ম , কঠিন , বাম-উচ্চারণ , শীর্ষ উচ্চারণ , ডান উচ্চারণ , এবং নিচের উচ্চারণ . প্রতিটি মান সতর্কতা বার্তার একটি ভিন্ন ভিজ্যুয়াল শৈলী প্রতিনিধিত্ব করে।

এখানে বিভিন্ন বৈকল্পিক সহ চারটি সতর্কতা উপাদানের একটি উদাহরণ রয়েছে:

 import React from 'react'; 
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react' 
 
function App() { 
  return ( 
    <div> 
      <Flex justify='center' gap='3' direction='column' mt='4'> 
          <Alert status='success' variant='solid'> 
              <AlertIcon /> 
              <AlertTitle>Welcome!!!</AlertTitle> 
              <AlertDescription>Its nice to have you here</AlertDescription> 
          </Alert> 
 
          <Alert status='success' variant='subtle'> 
              <AlertIcon /> 
              <AlertTitle>Welcome!!!</AlertTitle> 
              <AlertDescription>Its nice to have you here</AlertDescription> 
          </Alert> 
 
          <Alert status='success' variant='top-accent'> 
              <AlertIcon /> 
              <AlertTitle>Welcome!!!</AlertTitle> 
              <AlertDescription>Its nice to have you here</AlertDescription> 
          </Alert> 
 
          <Alert status='success' variant='left-accent'> 
              <AlertIcon /> 
              <AlertTitle>Welcome!!!</AlertTitle> 
              <AlertDescription>Its nice to have you here</AlertDescription> 
          </Alert> 
      </Flex> 
    </div> 
  ) 
} 
 
export default App 

উপরের কোড ব্লক রেন্ডার করা এই মত একটি কাস্টম সতর্কতা প্রদর্শন করবে:

ClassName প্রপ ব্যবহার করে আপনার সতর্কতা বার্তা কাস্টমাইজ করা

সতর্কতা বার্তাগুলির ডিফল্ট চেহারার সাথে লেগে থাকার পরিবর্তে, আপনি এটি ব্যবহার করে কাস্টমাইজ করতে পারেন শ্রেণির নাম সাহায্য আপনি ব্যবহার করুন শ্রেণির নাম একটি CSS ক্লাস সংজ্ঞায়িত করতে এবং সতর্কতা বার্তায় আপনার কাস্টম শৈলী প্রয়োগ করতে সাহায্য করুন।

উদাহরণ স্বরূপ:

 import React from 'react'; 
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react' 
 
function App() { 
  return ( 
    <div> 
      <Alert status='success' className='alert'> 
        <AlertIcon /> 
        <AlertTitle>Welcome!!!</AlertTitle> 
        <AlertDescription>Its nice to have you here</AlertDescription> 
      </Alert> 
    </div> 
  ) 
} 
 
export default App; 

এই উদাহরণে, সতর্কতা উপাদানটির একটি CSS ক্লাস 'সতর্কতা' রয়েছে। CSS ক্লাস সংজ্ঞায়িত করার পরে, আপনি আপনার CSS ফাইলে আপনার শৈলী সংজ্ঞায়িত করতে পারেন।

তাই ভালো:

 .alert { 
  color: red; 
  font-family: cursive; 
  display: flex; 
  flex-direction: column; 
  gap: 0.4rem; 
} 

উপরের কোডটি সতর্কতা উপাদানে CSS শৈলী প্রয়োগ করবে। আপনি যদি চক্র UI স্টাইল প্রপসের সাথে পরিচিত হন, তাহলে আপনার সেগুলিকে ব্যবহার করা উচিত সতর্কবার্তা স্টাইল করার পরিবর্তে শ্রেণির নাম সাহায্য

উপরের CSS শৈলীগুলি প্রয়োগ করার পরে, নীচের চিত্রের মতো সতর্কতা উপাদানটি প্রদর্শিত হবে:

ব্যবহারকারীর ইভেন্টের প্রতিক্রিয়ায় সতর্কতা বার্তা ট্রিগার করা

আপনি একটি সতর্কতা উপাদান তৈরি করেছেন যা ধারাবাহিকভাবে স্ক্রিনে একটি সতর্কতা বার্তা প্রদর্শন করে। যাইহোক, ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য, আপনি ব্যবহারকারীর শুরু করা নির্দিষ্ট ইভেন্টের প্রতিক্রিয়া হিসাবে সতর্কতা বার্তাটি ট্রিগার করতে পারেন, JavaScript ইভেন্ট লিসেনার ব্যবহার করে . এই ইভেন্টগুলির মধ্যে একটি বোতামে ক্লিক করা, একটি ফর্ম জমা দেওয়া বা একটি ত্রুটির সম্মুখীন হওয়া অন্তর্ভুক্ত থাকতে পারে৷

ইভেন্টগুলির প্রতিক্রিয়া হিসাবে আপনার সতর্কতা বার্তা ট্রিগার করতে, প্রতিক্রিয়া স্থিতি এবং ব্যবহার করুন৷ প্রদর্শন চক্র UI উপাদানগুলির প্রপ।

উদাহরণ স্বরূপ:

 import React from 'react'; 
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, Button} from '@chakra-ui/react' 
 
function App() { 
  const [display, setDisplay] = React.useState('none'); 
 
  function notify() { 
    setDisplay('flex'); 
  } 
 
  function close() { 
    setDisplay('none'); 
  } 
 
  return ( 
    <div className="app"> 
      <Alert status='success' display={display} variant='solid'> 
        <AlertIcon /> 
        <AlertTitle>Welcome!!!</AlertTitle> 
        <AlertDescription>Its nice to have you here</AlertDescription> 
        <Button position='absolute' top='6px' right='6px' onClick={close}/> 
      </Alert> 
 
      <Button onClick={notify} mt='4'>Click Me</Button> 
    </div> 
  ) 
} 
 
export default App 

এই কোড ব্লকটি এর সাথে বিজ্ঞপ্তি প্রদর্শনের অবস্থা পরিচালনা করে রাজ্য ব্যবহার করুন হুক এটি বিজ্ঞপ্তি প্রদর্শনের প্রাথমিক অবস্থাকে 'কোনটি নয়' তে সেট করে যা বিজ্ঞপ্তিটিকে লুকিয়ে রাখে।

ব্যবহারকারী ক্লিক করলে বোতাম , এটা কল অবহিত ফাংশন নোটিফাই ফাংশন কল করলে এর মান পরিবর্তন হয় প্রদর্শন 'কোনটিই নয়' থেকে 'ফ্লেক্স' করুন, বিজ্ঞপ্তিটিকে দৃশ্যমান করে।

ব্যবহারকারী ক্লিক করলে ক্লোজ বোতাম , এটা বন্ধ ফাংশন কল. এটি ডিসপ্লের অবস্থাকে 'কোনও নয়' এ পরিবর্তন করে যা বিজ্ঞপ্তিটি লুকিয়ে রাখে।

এখন আপনি কাস্টমাইজযোগ্য সতর্কতা তৈরি করতে পারেন

এখন আপনি শিখেছেন কিভাবে চক্র UI ব্যবহার করে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনে একটি কাস্টম সতর্কতা তৈরি করতে হয়। চক্র UI এর মাধ্যমে, প্রতিক্রিয়াতে কাস্টম সতর্কতা তৈরি করা সহজ এবং স্বজ্ঞাত, যা আমাদের ব্যবহারকারীদের কাছে পরিষ্কার এবং সংক্ষিপ্ত তথ্য সরবরাহ করার অনুমতি দেয়। চক্র UI আপনাকে দুর্দান্ত প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করতে সাহায্য করার জন্য অনেকগুলি কাস্টমাইজযোগ্য এবং অ্যাক্সেসযোগ্য UI উপাদান সরবরাহ করে।