প্রতিক্রিয়া সহ একটি অ্যাক্সেসযোগ্য অগ্রগতি বার কীভাবে তৈরি করবেন

অগ্রগতি বারগুলি ব্যবহারকারীর ব্যস্ততার জন্য দুর্দান্ত কারণ তারা একটি লক্ষ্য অর্জন করে। একটি রিসোর্সের উপর অপেক্ষা করা একটি ওয়েব পৃষ্ঠার দিকে তাকানোর পরিবর্তে, আপনি একটি অগ্রগতি বার পূরণ করতে দেখেন৷ অগ্রগতি বার শুধুমাত্র দর্শনীয় ব্যবহারকারীদের মধ্যে সীমাবদ্ধ করা উচিত নয়। প্রত্যেকেরই সহজে আপনার অগ্রগতি বার বুঝতে সক্ষম হওয়া উচিত।

আপনি কি xbox ওয়ানে ব্লুটুথ হেডফোন ব্যবহার করতে পারেন?

তাহলে কিভাবে আপনি প্রতিক্রিয়া সহ একটি অ্যাক্সেসযোগ্য অগ্রগতি বার তৈরি করবেন?

দিনের মেকইউজের ভিডিও

একটি অগ্রগতি বার উপাদান তৈরি করুন

ProgressBar.js নামে একটি নতুন উপাদান তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

প্রথম div উপাদান হল ধারক এবং দ্বিতীয় div হল প্রকৃত অগ্রগতি বার। স্প্যান উপাদানটি অগ্রগতি বার শতাংশ ধারণ করে।

অ্যাক্সেসযোগ্যতার উদ্দেশ্যে, দ্বিতীয় ডিভিতে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

প্রগতি দণ্ডের ভূমিকা.
aria-valuenow অগ্রগতি বারের বর্তমান মান নির্দেশ করতে।
aria-valuemin অগ্রগতি বারের সর্বনিম্ন মান নির্দেশ করতে।
aria-valuemax অগ্রগতি বারের সর্বাধিক মান নির্দেশ করতে।

aria-valuemin এবং aria-valuemax বৈশিষ্ট্যগুলির প্রয়োজন হয় না যদি অগ্রগতি বার সর্বাধিক এবং সর্বনিম্ন মান 0 এবং 100 হয় যেহেতু এই মানগুলিতে HTML ডিফল্ট।

প্রগতি বার স্টাইল করা

আপনি ইনলাইন শৈলী ব্যবহার করে অগ্রগতি বার স্টাইল করতে পারেন বা a সিএসএস-ইন-জেএস লাইব্রেরি যেমন স্টাইল করা উপাদান . এই উভয় পদ্ধতিই উপাদান থেকে CSS-এ প্রপস পাস করার একটি সহজ উপায় প্রদান করে।

কিভাবে এই নম্বরটি খুঁজে বের করতে হয়

আপনার এই কার্যকারিতা প্রয়োজন কারণ অগ্রগতি বারের প্রস্থ প্রপস হিসাবে পাস করা অগ্রগতি মানের উপর নির্ভর করে।

আপনি এই ইনলাইন শৈলী ব্যবহার করতে পারেন:

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

নীচে দেখানো শৈলী অন্তর্ভুক্ত করার জন্য উপাদানের রিটার্ন অংশ পরিবর্তন করুন:

কিভাবে পুরানো টেক্সট মেসেজ দেখতে হয়

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

এইভাবে অগ্রগতি বার রেন্ডার করুন:

<ProgressBar progress={50}/>

এটি 50 শতাংশ সম্পূর্ণ সহ একটি অগ্রগতি বার প্রদর্শন করে।

বিল্ডিং উপাদান প্রতিক্রিয়া

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