Bulma এর সাথে JavaScript ইন্টিগ্রেশন

Bulma, একটি CSS ফ্রেমওয়ার্ক, মূলত HTML এবং CSS এর উপর ভিত্তি করে কাজ করে এবং এটি কোনো JavaScript ফিচার অন্তর্ভুক্ত করে না। তবে, Bulma-র কিছু কম্পোনেন্ট যেমন মডাল, ট্যাব, ড্রপডাউন, স্ন্যাকবার ইত্যাদি ব্যবহার করার জন্য JavaScript ইন্টিগ্রেশন প্রয়োজন। Bulma-র স্টাইলগুলি ব্যবহার করার জন্য JavaScript আপনাকে কিছু ইন্টারঅ্যাকটিভ কার্যকারিতা যেমন মডাল উইন্ডো ওপেন/ক্লোজ, ড্রপডাউন মেনু স্যুইচ ইত্যাদি পরিচালনা করতে সহায়তা করবে।

১. মডাল (Modal)

Bulma-তে মডাল উইন্ডো একটি সাধারণ popup উইন্ডো হিসেবে কাজ করে যা কোনো কন্টেন্ট বা তথ্য প্রদর্শন করতে ব্যবহৃত হয়। এটি JavaScript ব্যবহার করে খোলা এবং বন্ধ করা যায়।

উদাহরণ: Modal with JavaScript Integration

<!-- Button to trigger Modal -->
<button class="button is-primary" id="openModal">Open Modal</button>

<!-- Modal Structure -->
<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">This is a Modal</h1>
      <p>Some content goes here.</p>
      <button class="button is-danger" id="closeModal">Close Modal</button>
    </div>
  </div>
  <button class="modal-close is-large" id="closeModalBackground" aria-label="close"></button>
</div>

<script>
  // Get modal elements
  const modal = document.getElementById('myModal');
  const openModalButton = document.getElementById('openModal');
  const closeModalButtons = document.querySelectorAll('#closeModal, #closeModalBackground');

  // Open modal on button click
  openModalButton.addEventListener('click', () => {
    modal.classList.add('is-active');
  });

  // Close modal when user clicks close button or background
  closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
  });
</script>

এখানে:

• is-active: Bulma-তে মডাল উইন্ডো প্রদর্শন করার জন্য এই ক্লাস ব্যবহার করা হয়।
• modal-close: মডাল উইন্ডো বন্ধ করার জন্য ব্যবহৃত ক্লাস।
• JavaScript: ক্লিক ইভেন্ট ব্যবহার করে মডাল খুলা ও বন্ধ করা হয়।

২. ড্রপডাউন (Dropdown)

Bulma-তে ড্রপডাউন মেনু তৈরি করার জন্য কিছু CSS এবং JavaScript ব্যবহার করা হয়। ব্যবহারকারী যখন ড্রপডাউন ট্রিগার ক্লিক করবে, তখন ড্রপডাউন মেনুটি প্রদর্শিত হবে।

উদাহরণ: Dropdown with JavaScript Integration

<!-- Dropdown Trigger Button -->
<div class="dropdown" id="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-chevron-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>

  <!-- Dropdown Menu -->
  <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>
    </div>
  </div>
</div>

<script>
  // Get dropdown elements
  const dropdown = document.getElementById('dropdown');
  const dropdownMenu = document.getElementById('dropdown-menu');

  // Toggle dropdown visibility
  dropdown.addEventListener('click', () => {
    dropdownMenu.classList.toggle('is-active');
  });
</script>

এখানে:

• dropdown-menu: ড্রপডাউন মেনুর কন্টেইনার।
• is-active: ড্রপডাউন মেনু প্রদর্শন করতে এই ক্লাসটি ব্যবহার করা হয়।
• JavaScript: ড্রপডাউন টগল করতে ক্লিক ইভেন্ট ব্যবহার করা হয়েছে।

৩. ট্যাব (Tabs)

Bulma-তে Tabs ব্যবহার করার জন্য JavaScript দিয়ে ট্যাব সুইচিং ফিচার যুক্ত করা হয়। ব্যবহারকারী যখন কোনো ট্যাবে ক্লিক করবে, তখন সেই ট্যাবের কন্টেন্ট প্রদর্শিত হবে এবং অন্য ট্যাবগুলো লুকানো থাকবে।

উদাহরণ: Tabs with JavaScript Integration

<!-- Tabs -->
<div class="tabs is-centered">
  <ul>
    <li class="is-active" id="tab-1"><a>Tab 1</a></li>
    <li id="tab-2"><a>Tab 2</a></li>
    <li id="tab-3"><a>Tab 3</a></li>
  </ul>
</div>

<!-- Tab Content -->
<div class="tab-content">
  <div class="tab-1-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content of Tab 1.</p>
  </div>
  <div class="tab-2-content" style="display: none;">
    <h2>Content for Tab 2</h2>
    <p>This is the content of Tab 2.</p>
  </div>
  <div class="tab-3-content" style="display: none;">
    <h2>Content for Tab 3</h2>
    <p>This is the content of Tab 3.</p>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tabs ul li');
  const contents = document.querySelectorAll('.tab-content div');

  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      // Remove active class from all tabs
      tabs.forEach(tab => tab.classList.remove('is-active'));

      // Hide all tab content
      contents.forEach(content => content.style.display = 'none');

      // Add active class to clicked tab
      tab.classList.add('is-active');

      // Display the content for the clicked tab
      const tabId = tab.id;
      document.querySelector(`.${tabId}-content`).style.display = 'block';
    });
  });
</script>

এখানে:

• is-active: ট্যাবের সক্রিয় অবস্থার জন্য।
• JavaScript: ক্লিক ইভেন্ট ব্যবহার করে ট্যাবের কন্টেন্ট স্যুইচ করা হয়।

৪. নোটিফিকেশন (Notification)

Bulma-তে Notification উপাদানটি ব্যবহারকারীকে কোনো তথ্য বা সতর্কতা প্রদর্শনের জন্য ব্যবহার করা হয়। আপনি JavaScript ব্যবহার করে এটি ডাইনামিকভাবে খুলতে এবং বন্ধ করতে পারেন।

উদাহরণ: Notification with JavaScript

<!-- Notification -->
<div class="notification is-primary" id="notification">
  <button class="delete" id="closeNotification"></button>
  This is a notification!
</div>

<script>
  // Get notification elements
  const notification = document.getElementById('notification');
  const closeNotificationButton = document.getElementById('closeNotification');

  // Close notification on button click
  closeNotificationButton.addEventListener('click', () => {
    notification.style.display = 'none';
  });
</script>

এখানে:

• delete: নোটিফিকেশন বন্ধ করার বাটন।
• JavaScript: ক্লিক ইভেন্ট ব্যবহার করে নোটিফিকেশন বন্ধ করা হয়।

সারাংশ

Bulma CSS ফ্রেমওয়ার্কটি কেবল স্ট্যাটিক ডিজাইন তৈরির জন্য হলেও, আপনি JavaScript ব্যবহার করে এর সাথে ইন্টারঅ্যাকটিভ ফিচার যেমন মডাল উইন্ডো, ড্রপডাউন মেনু, ট্যাব সুইচিং, নোটিফিকেশন ইত্যাদি যুক্ত করতে পারেন। JavaScript দ্বারা Bulma এর কম্পোনেন্টগুলোর কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করা সম্ভব, যেমন is-active ক্লাস ব্যবহারের মাধ্যমে সক্রিয় এলিমেন্ট শনাক্ত করা এবং ম্যানিপুলেট করা।