Materialize CSS ফ্রেমওয়ার্কে Text Inputs, Radio Buttons, এবং Checkboxes এর জন্য প্রস্তুত স্টাইল এবং উপাদান রয়েছে যা ওয়েব ডিজাইনে অনেক সুবিধা প্রদান করে। Materialize এর এই উপাদানগুলো Material Design এর নীতির উপর ভিত্তি করে তৈরি, যা ব্যবহারকারীদের জন্য একটি আধুনিক, সোজাসাপ্টা এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
Text Inputs
Text inputs হলো একটি ওয়েব ফর্মের অন্যতম গুরুত্বপূর্ণ উপাদান, যার মাধ্যমে ব্যবহারকারী তথ্য প্রদান করে। Materialize CSS এ text input এর জন্য সুন্দর স্টাইল ও এনিমেশন রয়েছে, যা ব্যবহারকারীকে একটি সজীব অভিজ্ঞতা প্রদান করে।
উদাহরণ:
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
এখানে:
input-fieldক্লাসটি ব্যবহারকারীর ইনপুট ফিল্ডকে সঠিকভাবে স্টাইল করার জন্য ব্যবহৃত।validateক্লাসটি ইনপুটের ভ্যালিডেশনকে সক্রিয় করে।labelট্যাগটি ইনপুট ফিল্ডের জন্য একটি ট্যাগ প্রদান করে যা ইউজারদের বোঝাতে সহায়ক।
Text Input এর বৈশিষ্ট্য:
- Floating Labels: Materialize এর ইনপুট ফিল্ডের ট্যাগগুলো floating থাকে, অর্থাৎ ইনপুট ফিল্ডে কিছু টাইপ করলে ট্যাগটি উপরে চলে যায়।
- Validation:
validateক্লাসের মাধ্যমে আপনি ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করতে পারেন, যেমন required, email, min-length ইত্যাদি।
Radio Buttons
Radio buttons সাধারণত ব্যবহার করা হয় যেখানে একজন ব্যবহারকারী একটি নির্দিষ্ট বিকল্প নির্বাচন করতে পারে। Materialize CSS এ radio buttons সুন্দরভাবে স্টাইল করা হয় এবং এর উপর কিছু এনিমেশনও প্রয়োগ করা হয় যা ইউজার ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় করে তোলে।
উদাহরণ:
<p>
<label>
<input name="group1" type="radio" checked />
<span>Option 1</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Option 2</span>
</label>
</p>
এখানে:
name="group1": একই গ্রুপের রেডিও বাটনগুলির জন্য একটিই name ব্যবহার করতে হবে যাতে শুধুমাত্র একটি বিকল্প নির্বাচন করা যায়।checked: এটি একটি রেডিও বাটনকে ডিফল্টভাবে নির্বাচিত অবস্থায় রাখে।
Radio Button এর বৈশিষ্ট্য:
- Custom Styling: Materialize রেডিও বাটনগুলোর জন্য খুবই আধুনিক এবং সোজাসাপ্টা স্টাইল প্রদান করে।
- Selected Option: ইউজার যখন একটি রেডিও বাটন নির্বাচন করেন, তখন এটি সুন্দরভাবে নির্দেশনা দেয়।
Checkboxes
Checkboxes সাধারণত ব্যবহার করা হয় যেখানে একাধিক বিকল্প নির্বাচন করার প্রয়োজন হয়। Materialize CSS এ checkboxes এর ডিজাইন খুবই সহজ, পরিষ্কার এবং ইন্টারঅ্যাকটিভ। ইউজাররা সহজেই একাধিক বিকল্প চেক করতে পারেন।
উদাহরণ:
<p>
<label>
<input type="checkbox" />
<span>Option 1</span>
</label>
</p>
<p>
<label>
<input type="checkbox" checked />
<span>Option 2</span>
</label>
</p>
এখানে:
input[type="checkbox"]: এটি চেকবক্স তৈরির জন্য ব্যবহৃত।checked: এটি একটি চেকবক্সকে ডিফল্টভাবে নির্বাচিত অবস্থায় রাখে।
Checkbox এর বৈশিষ্ট্য:
- Customizable: Materialize এর চেকবক্সগুলো কাস্টমাইজ করা সহজ, এবং এগুলো মোবাইল ডিভাইসে সুন্দরভাবে কাজ করে।
- Multiple Selections: চেকবক্স ব্যবহারকারীকে একাধিক বিকল্প নির্বাচনের সুযোগ দেয়, যা বিভিন্ন ওয়েব ফর্মে খুবই সহায়ক।
Styling with Materialize CSS
Materialize CSS এ text inputs, radio buttons, এবং checkboxes সবকিছুর জন্য প্রি-স্টাইলড ক্লাস এবং এডভান্সড কাস্টমাইজেশন পদ্ধতি রয়েছে। আপনি সহজেই এগুলোকে আপনার ডিজাইনের সাথে একীভূত করতে পারেন। এছাড়া SASS ব্যবহার করে আরও কাস্টম রঙ, আকার এবং ডিজাইন পরিবর্তন করা সম্ভব।
উদাহরণ:
<div class="input-field">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<p>
<label>
<input name="group1" type="radio" />
<span>Yes</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>No</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Agree to terms</span>
</label>
</p>
উপসংহার
Materialize CSS এর text inputs, radio buttons, এবং checkboxes ব্যবহারকারীদের জন্য একটি উন্নত, সুন্দর এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। Materialize এর প্রস্তুত উপাদানগুলি ডিজাইনারদের ওয়েবসাইট বা অ্যাপের ডিজাইন দ্রুত এবং কার্যকরীভাবে তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি আধুনিক ডিজাইনের সাথে সঙ্গতিপূর্ণ ইনপুট ফিল্ড, রেডিও বাটন এবং চেকবক্স তৈরি করতে পারেন।
Read more
