Select Dropdowns এবং Checkbox, Radio Buttons

Bulma ফ্রেমওয়ার্কের মধ্যে Select Dropdowns এবং Checkbox ও Radio Buttons এর মতো ফর্ম উপাদানগুলো খুবই সহজে স্টাইল করা যায়। Bulma এ তৈরি করা এই উপাদানগুলো দেখতে সুন্দর, ব্যবহারযোগ্য এবং রেসপনসিভ হয়। এখানে Bulma এর Select Dropdowns এবং Checkbox, Radio Buttons সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Select Dropdowns

Bulma এর select ক্লাস দিয়ে আপনি খুব সহজেই একটি স্টাইলড ড্রপডাউন তৈরি করতে পারেন। এটি সাধারণ HTML select এলিমেন্টের উপর ভিত্তি করে কাজ করে, কিন্তু Bulma এর স্টাইলের মাধ্যমে এটি আরও আকর্ষণীয় হয়ে ওঠে।

Select Dropdown তৈরি করা

<div class="field">
  <label class="label">Select a country</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select your country</option>
        <option>United States</option>
        <option>Canada</option>
        <option>India</option>
        <option>United Kingdom</option>
      </select>
    </div>
  </div>
</div>

এখানে:

• field: Bulma এর field ক্লাস ফর্মের একটি এলিমেন্টকে গ্রুপ করার জন্য ব্যবহার করা হয়।
• control: control ক্লাস ফর্মের ইনপুট বা সিলেক্ট এলিমেন্টের চারপাশে প্যাডিং এবং স্টাইল প্রয়োগ করে।
• select: সিলেক্ট এলিমেন্টটি সুন্দরভাবে স্টাইল করতে select ক্লাস ব্যবহৃত হয়।

এটি একটি বেসিক সিলেক্ট ড্রপডাউন তৈরি করবে।

সিলেক্ট ড্রপডাউনের আকার পরিবর্তন করা

Bulma তে আপনি সিলেক্ট ড্রপডাউন এর আকার নিয়ন্ত্রণ করতে পারেন is-small, is-medium, বা is-large ক্লাস ব্যবহার করে।

<div class="field">
  <label class="label">Choose a size</label>
  <div class="control">
    <div class="select is-large">
      <select>
        <option>Small</option>
        <option>Medium</option>
        <option>Large</option>
      </select>
    </div>
  </div>
</div>

এখানে is-large ক্লাস সিলেক্ট ড্রপডাউন এর আকার বড় করবে।

২. Checkbox

Bulma এর checkbox ক্লাস দিয়ে আপনি খুব সহজেই সুন্দরভাবে চেকবক্স তৈরি করতে পারেন। এটি HTML এর input type="checkbox" এলিমেন্টের উপর ভিত্তি করে কাজ করে, কিন্তু Bulma এর স্টাইলের মাধ্যমে এটি সুন্দর এবং রেসপনসিভ হয়ে ওঠে।

Checkbox তৈরি করা

<div class="field">
  <label class="label">Do you agree?</label>
  <div class="control">
    <label class="checkbox">
      <input type="checkbox"> I agree to the terms and conditions
    </label>
  </div>
</div>

এখানে:

• checkbox: checkbox ক্লাস চেকবক্সের স্টাইল প্রণয়ন করে।
• label: label এলিমেন্টের মাধ্যমে চেকবক্সের পাশে টেক্সট প্রদর্শন করা হয়।

এই কোডটি একটি সাধারণ চেকবক্স তৈরি করবে, যেখানে ব্যবহারকারী শর্তাবলীতে সম্মত হতে পারে।

চেকবক্সের আকার পরিবর্তন

Bulma তে আপনি is-small, is-medium, এবং is-large ক্লাস ব্যবহার করে চেকবক্সের আকার নিয়ন্ত্রণ করতে পারেন।

<div class="field">
  <div class="control">
    <label class="checkbox is-large">
      <input type="checkbox"> I want to receive newsletters
    </label>
  </div>
</div>

এখানে is-large ক্লাস চেকবক্সটির আকার বড় করবে।

৩. Radio Buttons

Bulma এর radio ক্লাস দিয়ে আপনি সুন্দরভাবে রেডিও বাটন তৈরি করতে পারেন। রেডিও বাটনগুলো ব্যবহার করা হয় একাধিক অপশন থেকে একটিকে নির্বাচন করতে। Bulma ফ্রেমওয়ার্কে এটি স্টাইল করা অত্যন্ত সহজ।

Radio Button তৈরি করা

<div class="field">
  <label class="label">Choose your plan</label>
  <div class="control">
    <label class="radio">
      <input type="radio" name="plan" value="basic"> Basic
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="premium"> Premium
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="enterprise"> Enterprise
    </label>
  </div>
</div>

এখানে:

• radio: radio ক্লাস রেডিও বাটনের জন্য স্টাইল প্রণয়ন করে।
• name অ্যাট্রিবিউট: একই নাম দিয়ে একাধিক রেডিও বাটনকে গ্রুপ করা হয়, যাতে ব্যবহারকারী কেবল একটিই নির্বাচন করতে পারে।

এই কোডটি তিনটি রেডিও বাটন তৈরি করবে, যেখানে ব্যবহারকারী একটি পরিকল্পনা নির্বাচন করতে পারবেন।

রেডিও বাটনের আকার পরিবর্তন

Bulma তে is-small, is-medium, এবং is-large ক্লাস ব্যবহার করে রেডিও বাটনের আকারও পরিবর্তন করা যেতে পারে।

<div class="field">
  <div class="control">
    <label class="radio is-medium">
      <input type="radio" name="size" value="small"> Small
    </label>
    <label class="radio is-medium">
      <input type="radio" name="size" value="large"> Large
    </label>
  </div>
</div>

এখানে is-medium ক্লাস রেডিও বাটনের আকার মাঝারি করবে।

৪. Disabled Checkbox এবং Radio Button

Bulma তে আপনি চেকবক্স বা রেডিও বাটনকে disabled করতে পারেন, যাতে ব্যবহারকারী সেগুলো নির্বাচন করতে না পারে।

Disabled Checkbox

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox" disabled> I cannot agree
    </label>
  </div>
</div>

Disabled Radio Button

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="plan" value="basic" disabled> Basic
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="premium" disabled> Premium
    </label>
  </div>
</div>

এখানে disabled অ্যাট্রিবিউট চেকবক্স বা রেডিও বাটনগুলোকে নিষ্ক্রিয় করে।

৫. Custom Styles with Checkbox and Radio Buttons

Bulma তে চেকবক্স এবং রেডিও বাটনের স্টাইল কাস্টমাইজ করার জন্য আপনি কাস্টম CSS ব্যবহার করতে পারেন। তবে, এটি করতে গেলে label এবং input এর উপর অতিরিক্ত স্টাইলিং প্রয়োগ করতে হয়।

উদাহরণ: কাস্টম চেকবক্স স্টাইল

/* Custom checkbox styling */
.checkbox input[type="checkbox"]:checked + span {
  color: #4CAF50; /* Green color when checked */
}

সারাংশ

Bulma ফ্রেমওয়ার্কের মাধ্যমে Select Dropdowns, Checkboxes, এবং Radio Buttons খুব সহজেই সুন্দরভাবে তৈরি করা যায়। Bulma এর স্টাইলিং ক্লাসগুলো ব্যবহার করে আপনি এই ফর্ম উপাদানগুলোকে কাস্টমাইজ করতে পারবেন এবং রেসপনসিভ ডিজাইন তৈরি করতে পারবেন। Bulma এর সহায়তায় আপনি আপনার ওয়েবসাইটে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ফর্ম এলিমেন্ট তৈরি করতে পারবেন।