Material Design Lite (MDL) ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই আধুনিক এবং ইন্টারঅ্যাকটিভ ফর্ম উপাদান তৈরি করতে পারেন। MDL বিভিন্ন ধরনের form elements প্রদান করে, যেমন Checkbox, Radio Button, এবং Switch। এগুলো ব্যবহারকারী ইন্টারফেসের মধ্যে সুন্দর এবং কার্যকরী ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।
এই টিউটোরিয়ালে আমরা MDL এর Checkbox, Radio Button, এবং Switch কম্পোনেন্টগুলো কীভাবে ব্যবহার করতে হয় তা দেখব।
Checkbox ব্যবহার
Checkbox ব্যবহারকারীকে একাধিক অপশন থেকে একটি বা একাধিক নির্বাচন করার সুযোগ দেয়। MDL এর Checkbox খুবই সিম্পল এবং সুন্দর, এবং এটি ব্যবহারকারীর জন্য স্পষ্টভাবে নির্দেশনা প্রদান করে।
উদাহরণ:
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Accept Terms and Conditions</span>
</label>
এখানে:
- mdl-checkbox: Checkbox এর MDL স্টাইল।
- mdl-js-checkbox: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-checkbox__input: চেকবক্স ইনপুট এলিমেন্ট।
- mdl-checkbox__label: চেকবক্সের লেবেল টেক্সট।
এটি একটি সিম্পল চেকবক্স তৈরি করে যেখানে "Accept Terms and Conditions" লেবেল থাকবে। ব্যবহারকারী এক বা একাধিক চেকবক্স নির্বাচন করতে পারবেন।
Radio Button ব্যবহার
Radio Button ব্যবহারকারীদের একটি নির্দিষ্ট অপশন নির্বাচন করতে দেয়। MDL এ Radio Buttons খুবই সোজা এবং প্রাঞ্জলভাবে ডিজাইন করা হয়েছে। এটি একাধিক অপশন থেকে একটি অপশন নির্বাচন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio-1">
<input type="radio" id="radio-1" class="mdl-radio__button" name="options" value="option1">
<span class="mdl-radio__label">Option 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio-2">
<input type="radio" id="radio-2" class="mdl-radio__button" name="options" value="option2">
<span class="mdl-radio__label">Option 2</span>
</label>
এখানে:
- mdl-radio: Radio button এর MDL স্টাইল।
- mdl-js-radio: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-radio__button: রেডিও বাটনের ইনপুট এলিমেন্ট।
- mdl-radio__label: রেডিও বাটনের লেবেল টেক্সট।
এটি দুটি রেডিও বাটন তৈরি করে, যা একসাথে কাজ করবে এবং ব্যবহারকারী একটি অপশন নির্বাচন করতে পারবে।
Switch ব্যবহার
Switch একটি টগল বাটন যা ব্যবহারকারীকে দুটি বিকল্পের মধ্যে একটি নির্বাচন করার সুযোগ দেয়, সাধারণত ON/OFF বা True/False এর জন্য। MDL এ Switch ব্যবহার করা সহজ এবং এটি অনেক সুন্দরভাবে কাজ করে।
উদাহরণ:
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input">
<span class="mdl-switch__label">Enable Notifications</span>
</label>
এখানে:
- mdl-switch: Switch এর MDL স্টাইল।
- mdl-js-switch: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-switch__input: সুইচ ইনপুট এলিমেন্ট।
- mdl-switch__label: সুইচের লেবেল টেক্সট।
এটি একটি সুইচ তৈরি করবে, যার মাধ্যমে ব্যবহারকারী "Enable Notifications" টগল করতে পারবে।
MDL এর ফর্ম এলিমেন্টের বিশেষ বৈশিষ্ট্য
১. রেসপন্সিভ ডিজাইন
MDL এর ফর্ম উপাদানগুলো রেসপন্সিভ ডিজাইন সমর্থন করে, অর্থাৎ সেগুলো মোবাইল, ট্যাবলেট এবং ডেস্কটপে ভালোভাবে কাজ করবে।
২. স্মুথ অ্যানিমেশন
MDL এর ফর্ম উপাদানগুলোতে স্মুথ অ্যানিমেশন এবং রিপল এফেক্ট যুক্ত থাকে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
৩. সহজ কাস্টমাইজেশন
MDL এর ফর্ম উপাদানগুলো সহজেই কাস্টমাইজ করা যায়, যেমন এর সাইজ, রঙ, এবং স্টাইল পরিবর্তন করা সম্ভব।
সারাংশ
Material Design Lite (MDL) এর Checkbox, Radio Button, এবং Switch ফর্ম উপাদানগুলো ব্যবহার করে আপনি সুন্দর এবং ইন্টারঅ্যাকটিভ ফর্ম ডিজাইন করতে পারেন। এগুলো ব্যবহারকারীদের সাথে কার্যকরভাবে ইন্টারঅ্যাক্ট করতে সহায়তা করে এবং MDL এর স্মুথ অ্যানিমেশন এবং রেসপন্সিভ ডিজাইন ফিচারগুলোর মাধ্যমে আরো আকর্ষণীয় হয়ে ওঠে। MDL এর ফর্ম উপাদানগুলো খুবই সহজ, কাস্টমাইজযোগ্য এবং আধুনিক ডিজাইনের জন্য উপযোগী।
Read more
