Dropdown Component এর ব্যবহার

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

এখানে আমরা Bulma এর Dropdown Component কীভাবে ব্যবহার করা যায় তা বিস্তারিতভাবে দেখবো।

১. Dropdown Component এর সাধারণ গঠন

Bulma তে dropdown কম্পোনেন্টটি সাধারণত একটি button বা link এর মাধ্যমে ট্রিগার করা হয় এবং পরে মেনু বা একাধিক বিকল্প দেখানো হয়। এটি অত্যন্ত সহজে কনফিগার করা যায় এবং HTML, CSS ও JavaScript কোডের মাধ্যমে ব্যবহার করা হয়।

সাধারণ Syntax

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>

  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Option 1
      </a>
      <a href="#" class="dropdown-item">
        Option 2
      </a>
      <a href="#" class="dropdown-item">
        Option 3
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        Option 4
      </a>
    </div>
  </div>
</div>

এখানে:

• dropdown: এটি পুরো ড্রপডাউন কম্পোনেন্টের কনটেইনার।
• dropdown-trigger: এটি বাটন বা ট্রিগার যা ড্রপডাউন মেনু খোলার জন্য ব্যবহৃত হয়।
• dropdown-menu: এটি ড্রপডাউন মেনুর কনটেইনার।
• dropdown-content: এটি ড্রপডাউনের মধ্যে থাকা আইটেমগুলো ধারণ করে।

২. Dropdown Trigger

ড্রপডাউনটি একটি button বা link এর মাধ্যমে ট্রিগার হয়, এবং এই বাটনটি সাধারণত একটি dropdown-trigger ক্লাস দ্বারা চিহ্নিত করা হয়। এখানে একটি বাটন ব্যবহার করা হয়েছে যা icon সহ প্রদর্শিত হবে।

উদাহরণ:

<div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
    <span>Options</span>
    <span class="icon is-small">
      <i class="fas fa-angle-down" aria-hidden="true"></i>
    </span>
  </button>
</div>

এখানে, aria-haspopup="true" এবং aria-controls="dropdown-menu" অ্যাট্রিবিউটগুলো অ্যাক্সেসিবিলিটি (accessibility) এর জন্য ব্যবহার করা হয়েছে, যা স্ক্রীন রিডার ব্যবহারকারীদের ড্রপডাউন এর অস্তিত্ব জানাতে সাহায্য করে।

৩. Dropdown Menu

dropdown-menu এর মধ্যে মেনুর আইটেমগুলো থাকে, এবং এগুলোর প্রতিটি আইটেম dropdown-item ক্লাস দিয়ে চিহ্নিত করা হয়। মেনুটি সাধারণত মাউস ক্লিকের মাধ্যমে খোলা হয় এবং বাটনটি চাপলে এটি প্রদর্শিত হয়।

উদাহরণ:

<div class="dropdown-menu" id="dropdown-menu" role="menu">
  <div class="dropdown-content">
    <a href="#" class="dropdown-item">
      Profile
    </a>
    <a href="#" class="dropdown-item">
      Settings
    </a>
    <a href="#" class="dropdown-item">
      Log out
    </a>
  </div>
</div>

এখানে:

• dropdown-content: এটি ড্রপডাউনের মধ্যে আইটেমগুলির কন্টেইনার।
• dropdown-item: এটি প্রতিটি ড্রপডাউন আইটেম।

৪. Dropdown-এর জন্য JavaScript ব্যবহারের প্রয়োজনীয়তা

যদিও Bulma মূলত একটি CSS ফ্রেমওয়ার্ক, তবে ড্রপডাউনটি কার্যকরী করতে JavaScript ব্যবহার করা প্রয়োজন। JavaScript কোডটি বাটন ক্লিক করলে ড্রপডাউন মেনুটি প্রদর্শন বা লুকিয়ে রাখার কাজ করে।

উদাহরণ (JavaScript):

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Get all dropdown triggers
    const dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(dropdown => {
      const trigger = dropdown.querySelector('.dropdown-trigger');
      const menu = dropdown.querySelector('.dropdown-menu');

      trigger.addEventListener('click', () => {
        menu.classList.toggle('is-active');
      });

      // Close dropdown if clicked outside
      document.addEventListener('click', (event) => {
        if (!dropdown.contains(event.target)) {
          menu.classList.remove('is-active');
        }
      });
    });
  });
</script>

এই স্ক্রিপ্টটি:

1. ড্রপডাউনটি খোলার জন্য click ইভেন্ট হ্যান্ডলার যোগ করে।
2. ড্রপডাউন থেকে বাইরে ক্লিক করলে মেনু বন্ধ করার জন্য আরেকটি ইভেন্ট হ্যান্ডলার যোগ করে।

৫. Dropdown এর রেসপনসিভ ব্যবহার

Bulma ড্রপডাউন কম্পোনেন্টটি রেসপনসিভ হওয়ায়, আপনি এটিকে মোবাইল বা বড় স্ক্রীনে একইভাবে ব্যবহার করতে পারবেন। তবে আপনি যদি বিশেষ কোনো ভিউতে ড্রপডাউনটি আলাদা করতে চান, তাহলে আপনাকে CSS বা JavaScript দিয়ে কাস্টমাইজ করতে হবে।

উদাহরণস্বরূপ:

• মোবাইল স্ক্রীনে ড্রপডাউনটি ফুল স্ক্রীনে হতে পারে।
• বড় স্ক্রীনে ড্রপডাউনটি কেবল হরিজেন্টাল স্লট হিসেবে কাজ করতে পারে।

৬. Dropdown-এর Additional Styling

Bulma আপনাকে ড্রপডাউনকে আরো সুন্দর করে কাস্টমাইজ করার সুযোগ দেয়। আপনি is-boxed, is-right, is-up ক্লাস ব্যবহার করে ড্রপডাউনের অবস্থান, আকার এবং স্টাইল পরিবর্তন করতে পারেন।

উদাহরণ (Additional Styling):

<div class="dropdown is-right">
  <div class="dropdown-trigger">
    <button class="button">
      <span>More Options</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Option 1
      </a>
      <a href="#" class="dropdown-item">
        Option 2
      </a>
    </div>
  </div>
</div>

এখানে:

• is-right: ড্রপডাউন মেনুটিকে ডানদিকে আলাইন করবে।
• is-boxed: ড্রপডাউনটি বক্স আকারে উপস্থাপন করবে।

সারাংশ

Bulma CSS ফ্রেমওয়ার্কের Dropdown Component ব্যবহার করে আপনি সহজেই রেসপনসিভ এবং ইন্টারেক্টিভ ড্রপডাউন মেনু তৈরি করতে পারেন। এর মধ্যে ড্রপডাউন ট্রিগার, মেনু এবং আইটেমগুলির জন্য নির্দিষ্ট CSS ক্লাস ব্যবহার করা হয়, এবং JavaScript এর মাধ্যমে ড্রপডাউনটি খোলা বা বন্ধ করা যায়। Bulma এর ড্রপডাউনটি মোবাইল-প্রথম ডিজাইনের জন্যও উপযুক্ত এবং সহজেই কাস্টমাইজ করা যায়।