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

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

আমার অন্যান্য আইটেম পরীক্ষা করে দেখুন

আপনি যদি আগ্রহী হন তবে বর্তমান নিবন্ধটি পড়ার পরে নিজেকে অবহিত করুন!

উপাদানটির পরিকল্পনা করুন

আপনি আপনার কোড লেখা শুরু করার আগে আপনি আমাদের প্রতিক্রিয়া অগ্রগতি বারটি কীভাবে দেখতে চান তা দ্রুত সিদ্ধান্ত নিতে পারেন। আমার কাছে মনে হচ্ছে আমাদের অগ্রগতি বার গঠনের জন্য আমাদের কেবল দুটি উপাদান দরকার। এই উপাদানগুলি হ'ল:

  • একটি পিতামাতার ডিভ যাতে আরও একটি ডিভ থাকে। যাক এটিকে একটি প্রগতিবার বলে।
  • একটি ডিভ যা পিতামাতার বিভাজনের মধ্যে ফিলার উপাদান হিসাবে কাজ করে। এই ডিভটি রঙের সাথে ডিজাইন করা হয়েছে এবং অনুভূমিক এবং উল্লম্বভাবে ধারকটির একটি এক্স-শতাংশ পূরণ করে। এই এক ফিলার কল।

অগ্রগতি বার মজাদার

ঠিক আছে, আসুন কোডিংয়ে নামি। প্রগতি বারের কঙ্কাল তৈরি করে শুরু করি। এই টিউটোরিয়ালে আমি প্রগতিবারকে একটি কার্যক্ষম প্রতিক্রিয়া উপাদান হিসাবে ব্যবহার করছি। এটি করার আরও অনেকগুলি উপায় রয়েছে তবে আসুন আমরা সেই পদ্ধতির সাথে এগিয়ে চলি।

এটি পরিকল্পনার অংশে আমি পিতামাতার ডিভের কথা বলেছি। এটিতে আমাদের কেবল ফিলার উপাদান যুক্ত করতে হবে। আমরা এটি এখনও তৈরি করি নি, সুতরাং এটি তৈরি করুন!

দুর্দান্ত আমাদের দুটি উপাদান রয়েছে। ফিলারটি প্রগতিবারে আটকান।

বাহ, আশ্চর্যজনক। তা ছাড়া এই উপাদানগুলির কোনওটির জন্য স্টাইলিং নেই। এর দ্রুত এই স্টাইল করা যাক!

অগ্রগতি বার শ্রেণীর শৈলীগুলি বেশ সহজ। আমি কেবল এটিকে প্রারম্ভিক উচ্চতা এবং প্রস্থ, একটি মার্জিন এবং মার্জিন ব্যাসার্ধ ব্যবহার করে কিছু বৃত্তাকার প্রান্ত দিচ্ছি। আমার অবস্থানের ব্যবহারটি লক্ষ করা জরুরী: অগ্রগতি বার শ্রেণীর তুলনায় এটি প্রয়োজনীয়; কারণ আমি ফিল ক্লাসে 100% উচ্চতা নির্ধারণ করেছি।

ভরাট শৈলীর জন্য, এগুলি বোঝাও সহজ। আমি ফিলারটির পটভূমি একটি ফিরোজা নীল রঙ (# 1DA598) তে সেট করেছি এবং আমার ফিলারটির উচ্চতা 100% উচ্চতা দিয়ে পিতামাতার ফিলারের সাথে মেলে কিনা তা নিশ্চিত করি। আমিও চাই ফ্রেম ব্যাসার্ধটি প্যারেন্ট ব্যাসার্ধের সমান হোক, তাই আমি এটির প্যারেন্ট ব্যাসার্ধের উত্তরাধিকার হিসাবে সেট করব।

ফিলার উপাদানগুলিতে আমি যে সংক্রমণটি যুক্ত করেছি তা সম্পর্কে আপনি কৌতূহলী হতে পারেন। আকারটি বৃদ্ধি / হ্রাস হওয়ায় এটি ফিলার সংক্রমণকে আরও প্রাকৃতিক করে তোলে। প্রগতি বারের জন্য বর্তমানে আমাদের কী আছে তা দেখুন:

এক বিরক্তিকর, খালি অগ্রগতি বার = ((

আমরা কিছু প্রপস যুক্ত করে এই বিরক্তিকর অগ্রগতি বারটি ঠিক করতে পারি। চল এটা করি!

উপাদানটিতে প্রয়োজনীয় প্রপস যুক্ত করা হচ্ছে

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

আপনি দেখতে পাচ্ছেন যে, আমি শতাংশের স্থিতির জন্য একটি সম্পত্তি শুরু করছি এবং এটির প্রাথমিক মান 0 প্রদান করছি ing এটি হ'ল স্থিতির পরিবর্তনশীল যা আমরা আমাদের ফিলারটির প্রস্থ নিয়ন্ত্রণ করতে ব্যবহার করব। এই মানটি সম্পর্কে প্রগতিবারকে সচেতন করার জন্য, আমি এটি সমর্থন হিসাবে সংযোজনযুক্ত হিসাবে পাস করি।

তবে একটি সমস্যা আছে। এটি দুর্দান্ত যে আমরা একটি প্রপ হিসাবে মানটি পেরিয়ে যাচ্ছি, তবে এই প্রপসটি কীভাবে পরিচালনা করতে হবে তা প্রগ্রেসবার উপাদানটি এখনও জানে না। এটি ঠিক করার জন্য আমরা কেবল নিম্নলিখিতটি করতে পারি:

ফিলারের সাথে সংযুক্ত একটি প্রপ তৈরি করে আমরা ফিলারকে মানটি দিতে পারি। আমাদের এখনই যা করতে হবে তা হ'ল ফিলারটিতে আমরা যে মূল্য পাচ্ছি তা দিয়ে কিছু করা এবং আমাদের এটি করা উচিত।

ফিলারের প্রস্থ সামঞ্জস্য করুন

আমাদের শেষ কাজটি করতে হবে তা হ'ল ফিলারের প্রস্থ হিসাবে আমরা ফিলারের প্রপ হিসাবে পাই set এটি সহজেই ইনলাইন স্টাইলিং ব্যবহার করে করা যেতে পারে। দেখা যাক এটি কীভাবে সম্পন্ন হয়েছে।

ফিলারটির প্রপ মানটির উপর ভিত্তি করে গতিশীলভাবে প্রস্থের প্রস্থ সামঞ্জস্য করুন

এটাই! প্রগ্রেসবারেক্সামালার প্রাথমিক রাষ্ট্রের সম্পত্তিটি কেবল কিকের জন্য 60 এ পরিবর্তন করুন:

এখন আমাদের কার্যকরী অগ্রগতি বারটি দেখুন!

জিনিস আপ মোড়ানো

এখন আমি জানি এটি খুব সহজ উদাহরণ ছিল, তবে আমি আরও বিশদ সংস্করণ অন্তর্ভুক্ত করেছি যা আপনি কোডেপেন দিয়ে চেষ্টা করতে পারেন। এটি সম্পূর্ণ ইন্টারেক্টিভ এবং আশা করি আপনাকে নতুন কিছু শেখায়। আপনি যদি এই টিউটোরিয়ালটি উপভোগ করেন তবে আমি আপনাকে গিটহাবে আমাকে অনুসরণ করতে পছন্দ করব!

https://github.com/dzuz14

বাম

ইউটিউবকে বিনামূল্যে সাড়া দিতে শিখুন

এই নিবন্ধটি পড়ার পরে, প্রতিক্রিয়া সম্পর্কে আমার ফ্রি ইউটিউব টিউটোরিয়ালটি অবশ্যই পরীক্ষা করে দেখুন যা আমি আপনাকে স্ক্র্যাচ থেকে থাম্বনেইল গ্যালারী কীভাবে তৈরি করব তা দেখিয়েছি। আপনি পড়া শুরু করার আগে নির্দ্বিধায় এটি বুকমার্ক করুন! =)

কোডেপেনের জন্য সম্পূর্ণ অগ্রগতি বার উদাহরণ

ডানজুজেভিচ.কম