Bulma এবং JavaScript Integration

Bulma একটি CSS-only ফ্রেমওয়ার্ক, যার মধ্যে কোন বিল্ট-ইন JavaScript নেই। তবে, Bulma-র কিছু কম্পোনেন্ট যেমন Modal, Dropdown, Tabs, Burger menu ইত্যাদি কার্যকরীভাবে কাজ করতে JavaScript প্রয়োজন হয়। Bulma-র স্টাইলিং প্রদান করে, কিন্তু কার্যকারিতা (interactivity) যোগ করতে আপনি নিজে JavaScript ব্যবহার করবেন।

এই গাইডে, Bulma-র কিছু কম্পোনেন্টের সাথে JavaScript ইন্টিগ্রেশন দেখানো হবে যাতে আপনার ওয়েবপেজে ইন্টারেক্টিভ ফিচার যোগ করা যায়।

১. JavaScript দিয়ে Bulma Modal (মোডাল) ইন্টিগ্রেশন

Modal কম্পোনেন্টটি একটি পপ-আপ উইন্ডো তৈরি করে, যেটি ব্যবহারকারীকে একটি নির্দিষ্ট অ্যাকশন করার জন্য বা তথ্য প্রদর্শন করার জন্য ব্যবহার করা হয়। Bulma-তে Modal স্বয়ংক্রিয়ভাবে JavaScript এর মাধ্যমে নিয়ন্ত্রিত হয়।

উদাহরণ: Bulma Modal

<!-- Trigger Button -->
<button class="button is-primary" id="modal-button">Open Modal</button>

<!-- Modal Structure -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">This is a Modal</h1>
      <p>Some content inside the modal.</p>
      <button class="button is-danger" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" id="close-modal-background"></button>
</div>

<!-- JavaScript for Modal -->
<script>
  const modal = document.getElementById('modal');
  const openButton = document.getElementById('modal-button');
  const closeButtons = document.querySelectorAll('#close-modal, #close-modal-background');

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

  // Close Modal
  closeButtons.forEach(button => {
    button.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
  });
</script>

এখানে:

• Modal: Bulma-তে modal ক্লাস দিয়ে তৈরি হয় এবং এটি is-active ক্লাস ব্যবহার করে দেখানো হয়।
• JavaScript: Modal খোলার জন্য click ইভেন্ট ব্যবহার করা হয়েছে, এবং ক্লোজ করার জন্য modal-এ is-active ক্লাস সরানো হয়েছে।

২. Bulma Dropdown (ড্রপডাউন) কম্পোনেন্টের জন্য JavaScript

Dropdown কম্পোনেন্টে একটি লিস্ট থেকে ইউজার নির্বাচন করতে পারেন। Bulma-তে এটি একটি স্টাইলড ড্রপডাউন, কিন্তু JavaScript এর মাধ্যমে এর কার্যকারিতা নিয়ন্ত্রণ করতে হয়।

উদাহরণ: Bulma Dropdown

<div class="dropdown" id="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</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>
    </div>
  </div>
</div>

<!-- JavaScript for Dropdown -->
<script>
  const dropdownTrigger = document.getElementById('dropdown');
  const dropdownMenu = document.getElementById('dropdown-menu');

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

এখানে:

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

৩. Bulma Burger Menu (মেনু) এবং JavaScript

মোবাইল রেসপনসিভ ডিজাইন তৈরিতে, Burger Menu একটি জনপ্রিয় পদ্ধতি। Bulma-তে Burger Menu তৈরি করতে JavaScript ব্যবহার করা হয়, যাতে এটি স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হয়।

উদাহরণ: Bulma Burger Menu

<!-- Navbar Structure -->
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" id="burger">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbar-menu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

<!-- JavaScript for Burger Menu -->
<script>
  const burger = document.getElementById('burger');
  const navbarMenu = document.getElementById('navbar-menu');

  burger.addEventListener('click', () => {
    burger.classList.toggle('is-active');
    navbarMenu.classList.toggle('is-active');
  });
</script>

এখানে:

• Burger Menu: এটি navbar-burger ক্লাস ব্যবহার করে তৈরি হয় এবং is-active ক্লাস যোগ/মুছে দিয়ে সক্রিয় বা নিষ্ক্রিয় করা হয়।
• JavaScript: ক্লিক ইভেন্ট ব্যবহার করে burger বাটন ও মেনুর মধ্যে is-active ক্লাস যোগ/মুছে ফেলা হয়।

৪. Bulma Tabs (ট্যাবস) এবং JavaScript

Bulma-তে Tabs কম্পোনেন্টটি একটি নেভিগেশন স্ট্রাকচার, যা সাধারণত ভিন্ন ভিন্ন কন্টেন্ট প্যানেল বা বিভাগ দেখানোর জন্য ব্যবহৃত হয়। ট্যাবগুলো সক্রিয় করতে JavaScript প্রয়োজন হয়।

উদাহরণ: Bulma Tabs

<div class="tabs" id="tabs">
  <ul>
    <li class="is-active" data-tab="tab1"><a>Tab 1</a></li>
    <li data-tab="tab2"><a>Tab 2</a></li>
    <li data-tab="tab3"><a>Tab 3</a></li>
  </ul>
</div>

<!-- Tab Content -->
<div id="tab1" class="tab-content">
  <p>This is content for Tab 1.</p>
</div>
<div id="tab2" class="tab-content" style="display:none;">
  <p>This is content for Tab 2.</p>
</div>
<div id="tab3" class="tab-content" style="display:none;">
  <p>This is content for Tab 3.</p>
</div>

<!-- JavaScript for Tabs -->
<script>
  const tabs = document.querySelectorAll('.tabs li');
  const contents = document.querySelectorAll('.tab-content');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const tabId = tab.getAttribute('data-tab');
      
      // Hide all tab contents
      contents.forEach(content => {
        content.style.display = 'none';
      });

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

      // Show selected tab content and add 'is-active' class to selected tab
      document.getElementById(tabId).style.display = 'block';
      tab.classList.add('is-active');
    });
  });
</script>

এখানে:

• Tabs: tabs ক্লাসে প্রতিটি ট্যাবের জন্য data-tab ব্যবহার করা হয়।
• JavaScript: ক্লিক ইভেন্টের মাধ্যমে ট্যাবের কনটেন্ট পরিবর্তন করা হয় এবং সক্রিয় ট্যাবের জন্য is-active ক্লাস যোগ করা হয়।

সারাংশ

Bulma মূলত একটি CSS-only ফ্রেমওয়ার্ক, কিন্তু এর কিছু কম্পোনেন্ট যেমন Modal, Dropdown, Burger Menu, Tabs ইত্যাদি JavaScript ইন্টিগ্রেশন ছাড়াই পূর্ণ কার্যকরী নয়। JavaScript ব্যবহার করে Bulma-র এই কম্পোনেন্টগুলোকে ইন্টারেক্টিভ এবং ডাইনামিক করা যায়, যেমন is-active ক্লাস যোগ/মুছে ফেলা,

ক্লিক ইভেন্ট হ্যান্ডলিং ইত্যাদি। 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 ক্লাস ব্যবহারের মাধ্যমে সক্রিয় এলিমেন্ট শনাক্ত করা এবং ম্যানিপুলেট করা।

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

এখানে আমরা Dropdowns এবং Modals কম্পোনেন্টের জন্য JavaScript ব্যবহারের বিস্তারিত আলোচনা করব।

১. Bulma এর Dropdown তৈরি করা

Dropdowns ব্যবহারকারীর জন্য একটি তালিকা প্রদান করে, যেটি সাধারণত একটি বাটন বা লিঙ্কে ক্লিক করলে প্রদর্শিত হয়। এই কম্পোনেন্টটি সাধারাণত মেনু বা অপশন বেছে নেওয়ার জন্য ব্যবহৃত হয়।

Basic Dropdown তৈরি করা

<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 id="dropdown-menu" class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Action
      </a>
      <a href="#" class="dropdown-item">
        Another action
      </a>
      <a href="#" class="dropdown-item">
        Something else here
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        Separated link
      </a>
    </div>
  </div>
</div>

এখানে:

• dropdown-trigger: এই ক্লাসের মধ্যে বাটন বা ট্যাগ থাকে, যা ড্রপডাউন মেনুকে ট্রিগার করে।
• dropdown-menu: এটি ড্রপডাউন মেনুর কনটেইনার যা লুকানো থাকে এবং ব্যবহারকারী ক্লিক করলে এটি দৃশ্যমান হয়।

Dropdown এর জন্য JavaScript ব্যবহার করা

<script>
  document.addEventListener('DOMContentLoaded', () => {
    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>

এখানে:

• menu.classList.toggle('is-active'): এই কোডটি ড্রপডাউন মেনুকে টগল করতে ব্যবহৃত হয়, অর্থাৎ এটি খোলা থাকলে বন্ধ এবং বন্ধ থাকলে খোলা হয়।
• document.addEventListener('click'): যদি ড্রপডাউন বাহিরে ক্লিক করা হয়, তবে এটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

২. Bulma এর Modal তৈরি করা

Modals সাধারণত পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়, যেখানে একটি নির্দিষ্ট কন্টেন্ট (যেমন একটি ফর্ম, তথ্য বা নোটিফিকেশন) ব্যবহারকারীকে প্রদর্শিত হয়। Modals সাধারণত গুরুত্বপূর্ণ বার্তা বা একশনকে অগ্রাধিকার দিতে ব্যবহৃত হয়।

Basic Modal তৈরি করা

<button class="button is-primary" id="open-modal">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Hello, World!</h1>
      <p>This is a simple modal</p>
      <button class="button is-danger" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• modal: মডাল উইন্ডোর প্রধান কনটেইনার।
• modal-background: মডালের ব্যাকগ্রাউন্ড যা সাধারণত অস্বচ্ছ থাকে।
• modal-content: মডাল উইন্ডোর কন্টেন্ট।
• modal-close: মডাল উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন।

Modal এর জন্য JavaScript ব্যবহার করা

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Get the modal and buttons
    const openModalButton = document.getElementById('open-modal');
    const modal = document.getElementById('modal');
    const closeModalButton = document.getElementById('close-modal');
    
    // Open the modal
    openModalButton.addEventListener('click', () => {
      modal.classList.add('is-active');
    });
    
    // Close the modal
    closeModalButton.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
    
    // Close the modal when clicking on the background
    modal.querySelector('.modal-background').addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
    
    // Close the modal when clicking the close button
    modal.querySelector('.modal-close').addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
  });
</script>

এখানে:

• modal.classList.add('is-active'): মডালকে সক্রিয় (দৃশ্যমান) করে তোলে।
• modal.classList.remove('is-active'): মডালকে নিষ্ক্রিয় (লুকানো) করে দেয়।
• modal-background এবং modal-close তে ক্লিক করলে মডাল বন্ধ হবে।

৩. Dropdowns এবং Modals এর অ্যাক্সেসিবিলিটি

Bulma এর Dropdowns এবং Modals তে অ্যাক্সেসিবিলিটি নিশ্চিত করতে, আপনি aria-label এবং aria-expanded প্রোপার্টি ব্যবহার করতে পারেন। যেমন:

Dropdown এর জন্য অ্যাক্সেসিবিলিটি

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

  <div id="dropdown-menu" class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Action
      </a>
      <a href="#" class="dropdown-item">
        Another action
      </a>
      <a href="#" class="dropdown-item">
        Something else here
      </a>
    </div>
  </div>
</div>

JavaScript-এ aria-expanded প্রোপার্টি টগল করতে পারেন:

trigger.addEventListener('click', () => {
  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', !isExpanded);
  menu.classList.toggle('is-active');
});

Modal এর জন্য অ্যাক্সেসিবিলিটি

<div id="modal" class="modal" aria-hidden="true">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Modal Title</h1>
      <p>This is a modal window with accessible features.</p>
      <button class="button" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

JavaScript-এ মডাল খোলার সময় aria-hidden প্রোপার্টি পরিবর্তন করুন:

openModalButton.addEventListener('click', () => {
  modal.classList.add('is-active');
  modal.setAttribute('aria-hidden', 'false');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.remove('is-active');
  modal.setAttribute('aria-hidden', 'true');
});

এখানে, aria-hidden="true" প্রোপার্টি মডাল বন্ধ থাকলে সেট করা হয় এবং মডাল খোলার সময় false করা হয়।

সারাংশ

Dropdowns এবং Modals কম্পোনেন্টগুলি Bulma ফ্রেমওয়ার্কে অত্যন্ত কার্যকরী এবং সহজে ব্যবহৃত হয়। তবে এই উপাদানগুলোকে ইন্টারঅ্যাকটিভ করার জন্য JavaScript প্রয়োজন। Dropdowns এর জন্য ক্লিক ইভেন্টের মাধ্যমে মেনু টগল করা যায়, এবং Modals এর জন্য ব্যবহারকারীকে পপ-আপ উইন্ডো দেখানো হয়, যা ক্লোজ বাটন বা ব্যাকগ্রাউন্ডে ক্লিক করলে বন্ধ করা হয়। এগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং সহজেই কাস্টমাইজ করা যায়।

Bulma CSS ফ্রেমওয়ার্কটি মূলত একটি স্টাইলিং টুল, তবে আপনি যখন এটি JavaScript (JS) এর সাথে ব্যবহার করেন, তখন এটি ওয়েব পেজে ডাইনামিক কনটেন্ট তৈরির জন্য শক্তিশালী হয়ে ওঠে। JS ব্যবহার করে আপনি Bulma এর বিভিন্ন কম্পোনেন্ট এবং লেআউটকে পরিবর্তন করতে, নতুন কনটেন্ট যোগ করতে, অথবা ইন্টারেক্টিভ ফিচার তৈরি করতে পারেন।

এই গাইডে আমরা দেখব কিভাবে JavaScript ব্যবহার করে Bulma এর সাথে ডাইনামিক কনটেন্ট তৈরি করা যায়।

১. JavaScript দিয়ে Dynamic Content Manipulate করা

Bulma এর কনটেন্টের সাথে ডাইনামিক কনটেন্ট যোগ করার জন্য JavaScript এর কিছু মৌলিক ফিচার ব্যবহার করা যায়। উদাহরণস্বরূপ, প্যানেল, মেনু, অথবা মডাল উইন্ডোর মধ্যে ডাইনামিক কনটেন্ট যোগ করা।

উদাহরণ: প্যানেল কম্পোনেন্টের সাথে Dynamic Content

ধরা যাক, আমাদের একটি প্যানেল কম্পোনেন্ট আছে এবং আমরা চাই যে ইউজার ক্লিক করলে প্যানেলে নতুন কনটেন্ট যোগ হোক।

<div class="panel">
  <p class="panel-heading">
    Dynamic Panel
  </p>
  <div class="panel-block" id="panel-content">
    <p>This is the initial content.</p>
  </div>
  <button class="button is-primary" id="add-content">Add Content</button>
</div>

<script>
  document.getElementById('add-content').addEventListener('click', function() {
    const newContent = document.createElement('p');
    newContent.textContent = 'This is new dynamic content added to the panel!';
    document.getElementById('panel-content').appendChild(newContent);
  });
</script>

এখানে:

• add-content বাটনে ক্লিক করলে নতুন p ট্যাগ তৈরি হয়ে প্যানেল ব্লকে যোগ হবে।
• createElement এবং appendChild পদ্ধতি ব্যবহার করে ডাইনামিক কনটেন্ট অ্যাড করা হচ্ছে।

২. Modal Dialog Box তৈরি করা

Bulma ফ্রেমওয়ার্কে একটি modal কম্পোনেন্ট রয়েছে, যা সাধারণত পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়। আমরা JavaScript দিয়ে একটি modal তৈরি করতে পারি এবং সেটিকে ডাইনামিকভাবে উপস্থাপন করতে পারি।

উদাহরণ: Modal উইন্ডো তৈরি করা

<button class="button is-primary" id="show-modal">Show Modal</button>

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Dynamic Modal</h1>
      <p>This is a modal window that can be shown dynamically.</p>
      <button class="button is-success" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" id="close-modal-btn" aria-label="close"></button>
</div>

<script>
  // Show modal when button is clicked
  document.getElementById('show-modal').addEventListener('click', function() {
    document.getElementById('myModal').classList.add('is-active');
  });

  // Close modal when close button is clicked
  document.getElementById('close-modal').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });

  // Close modal by clicking the background or close icon
  document.getElementById('close-modal-btn').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });
</script>

এখানে:

• is-active ক্লাস ব্যবহার করে modal উইন্ডোকে দেখা বা লুকানো হচ্ছে।
• ইউজার যখন Show Modal বাটনে ক্লিক করবে, তখন JavaScript এর মাধ্যমে modal উইন্ডো চালু হবে।
• Close বাটন বা close icon ক্লিক করলে modal বন্ধ হবে।

৩. Accordion (Expandable) Section তৈরি করা

Bulma ফ্রেমওয়ার্কে accordion-style expandable sections খুব জনপ্রিয়। JavaScript দিয়ে আপনি একটি সেকশনকে expand বা collapse করতে পারেন।

উদাহরণ: Accordion Section

<div class="accordion">
  <div class="accordion-item">
    <p class="accordion-title" id="section1">Section 1</p>
    <div class="accordion-content" id="content1">
      <p>This is the content of Section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <p class="accordion-title" id="section2">Section 2</p>
    <div class="accordion-content" id="content2">
      <p>This is the content of Section 2.</p>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.accordion-title').forEach(function(title) {
    title.addEventListener('click', function() {
      const content = this.nextElementSibling;
      content.style.display = (content.style.display === 'none' ? 'block' : 'none');
    });
  });

  // Initially hide all accordion content
  document.querySelectorAll('.accordion-content').forEach(function(content) {
    content.style.display = 'none';
  });
</script>

এখানে:

• accordion-title ক্লিক করলে সংশ্লিষ্ট accordion-content দেখানো বা লুকানো হবে।
• JS এর style.display প্রপার্টি ব্যবহার করে একে block বা none করা হচ্ছে, অর্থাৎ একে expand বা collapse করা হচ্ছে।

৪. Dynamic Dropdown Menu

Bulma এর dropdown কম্পোনেন্টটি সহজেই ডাইনামিকভাবে তৈরি এবং কন্ট্রোল করা যায়। আপনি JavaScript দিয়ে ড্রপডাউন মেনুর ভেতরে কনটেন্ট পরিবর্তন করতে বা ড্রপডাউন মেনুকে অটো খুলতে পারেন।

উদাহরণ: Dynamic Dropdown

<div class="dropdown" id="dropdownMenu">
  <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" id="dropdown-items">
      <!-- Dynamic content will be added here -->
    </div>
  </div>
</div>

<script>
  // Open the dropdown
  document.querySelector('.dropdown-trigger').addEventListener('click', function() {
    document.getElementById('dropdownMenu').classList.toggle('is-active');
  });

  // Dynamically add items to the dropdown
  const dropdownItems = [
    'Item 1',
    'Item 2',
    'Item 3'
  ];

  dropdownItems.forEach(function(item) {
    const dropdownItem = document.createElement('a');
    dropdownItem.classList.add('dropdown-item');
    dropdownItem.textContent = item;
    document.getElementById('dropdown-items').appendChild(dropdownItem);
  });
</script>

এখানে:

• dropdown কম্পোনেন্টটি JS এর মাধ্যমে ডাইনামিকভাবে পরিচালিত হচ্ছে।
• JS এর মাধ্যমে dropdown-items এর ভেতরে আইটেমগুলো অ্যাড করা হচ্ছে এবং dropdown মেনুটি খুলতে toggle ক্লাস ব্যবহার করা হচ্ছে।

৫. Dynamic Grid Layout

Bulma এর Grid system ব্যবহার করে আপনি একটি ডাইনামিক গ্রিড তৈরি করতে পারেন, যেখানে JS এর মাধ্যমে columns যোগ বা মুছে ফেলা যাবে।

উদাহরণ: Dynamic Grid Layout

<div class="columns" id="grid-layout">
  <!-- Dynamic content will be added here -->
</div>
<button class="button is-primary" id="add-column">Add Column</button>

<script>
  document.getElementById('add-column').addEventListener('click', function() {
    const column = document.createElement('div');
    column.classList.add('column', 'is-one-quarter');
    column.innerHTML = '<div class="box">New Column</div>';
    document.getElementById('grid-layout').appendChild(column);
  });
</script>

এখানে:

• columns কনটেইনারে নতুন column যোগ করা হচ্ছে যখন ইউজার Add Column বাটনে ক্লিক করবেন।
• নতুন column এর মধ্যে একটি box যোগ করা হয়েছে যা dynamic grid layout তৈরি করবে।

সারাংশ

Bulma ফ্রেমওয়ার্কের সাথে JavaScript ব্যবহার করে আপনি সহজেই ডাইনামিক কনটেন্ট তৈরি করতে পারেন। আপনি panel, modal, accordion, dropdown menu, এবং grid layout সহ বিভিন্ন UI উপাদান ডাইনামিকভাবে নিয়ন্ত্রণ করতে পারবেন। JS এর সাহায্যে Bulma এর কম্পোন

েন্টগুলোকে আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করা সম্ভব, যা ইউজারের অভিজ্ঞতাকে উন্নত করে।

Bulma একটি CSS ফ্রেমওয়ার্ক, তাই এটি মূলত স্টাইলিং নিয়ে কাজ করে এবং JavaScript ফাংশনালিটি সরবরাহ করে না। তবে, Bulma এর অনেক কম্পোনেন্ট যেমন modals, dropdowns, tabs, navbar ইত্যাদি, JavaScript এর সাহায্যে কাস্টমাইজ করা যেতে পারে। Bulma এর কিছু কম্পোনেন্ট স্ট্যাটিকভাবে কাজ করে, কিন্তু এগুলোর ইন্টারঅ্যাকটিভ ফাংশনালিটির জন্য JavaScript প্রয়োজন হয়।

এই গাইডে, আমরা কিছু সাধারণ Bulma কম্পোনেন্টের JavaScript customization নিয়ে আলোচনা করবো।

১. Modals

Modals হলো ওয়েবসাইটে পপ-আপ উইন্ডো, যা সাধারণত কোনো বিশেষ বার্তা বা ইন্টারঅ্যাকশন প্রদর্শন করতে ব্যবহৃত হয়। Bulma তে modals স্ট্যাটিকভাবে প্রস্তুত থাকে, তবে সেগুলোর open বা close করার জন্য JavaScript ব্যবহার করতে হয়।

উদাহরণ: Modal সেটআপ

<button class="button is-primary" id="openModal">Open Modal</button>

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p>This is a modal!</p>
  </div>
  <button class="modal-close is-large" id="closeModal"></button>
</div>

<script>
  document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.add('is-active');
  });

  document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });
</script>

এখানে:

• is-active ক্লাসটি মডালটিকে সক্রিয় করে এবং এটি দৃশ্যমান করে।
• JavaScript এর মাধ্যমে openModal বাটন ক্লিক করলে মডালটি is-active ক্লাস পায় এবং তা প্রদর্শিত হয়।
• closeModal বাটনে ক্লিক করলে মডালটি বন্ধ হয়ে যায়।

২. Dropdowns

Bulma তে dropdowns ব্যবহারকারীর জন্য মেনু বা নির্বাচনের তালিকা প্রদান করে। যেহেতু dropdown গুলি CSS ক্লাসের মাধ্যমে প্রদর্শিত হয়, সেগুলি দেখানোর জন্য JavaScript এর প্রয়োজন।

উদাহরণ: Dropdown সেটআপ

<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-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">Item 1</a>
      <a href="#" class="dropdown-item">Item 2</a>
      <a href="#" class="dropdown-item">Item 3</a>
    </div>
  </div>
</div>

<script>
  document.getElementById('dropdown').addEventListener('click', function() {
    const dropdownMenu = document.getElementById('dropdown-menu');
    dropdownMenu.classList.toggle('is-active');
  });
</script>

এখানে:

• dropdown-menu উপাদানটি JavaScript দিয়ে is-active ক্লাসের মাধ্যমে দেখা বা লুকানো হয়।
• toggle ফাংশনটি ক্লিক করা হলে dropdown মেনুটি স্বয়ংক্রিয়ভাবে ওপেন এবং ক্লোজ হবে।

৩. Tabs

Bulma তে tabs উপাদান সাধারণত একটি ট্যাবাল ইনটারফেস হিসেবে ব্যবহার হয়, যেখানে ব্যবহারকারী বিভিন্ন ট্যাবে ক্লিক করে কনটেন্ট দেখেন। এই tabs এর active ট্যাব পরিবর্তন করার জন্য JavaScript ব্যবহার করতে হয়।

উদাহরণ: Tabs সেটআপ

<div class="tabs" id="tabs">
  <ul>
    <li class="is-active" id="tab1">
      <a>Tab 1</a>
    </li>
    <li id="tab2">
      <a>Tab 2</a>
    </li>
    <li id="tab3">
      <a>Tab 3</a>
    </li>
  </ul>
</div>

<div class="content" id="content1">
  <p>This is content for Tab 1</p>
</div>
<div class="content" id="content2" style="display:none;">
  <p>This is content for Tab 2</p>
</div>
<div class="content" id="content3" style="display:none;">
  <p>This is content for Tab 3</p>
</div>

<script>
  document.getElementById('tab1').addEventListener('click', function() {
    document.getElementById('content1').style.display = 'block';
    document.getElementById('content2').style.display = 'none';
    document.getElementById('content3').style.display = 'none';
    document.getElementById('tab1').classList.add('is-active');
    document.getElementById('tab2').classList.remove('is-active');
    document.getElementById('tab3').classList.remove('is-active');
  });

  document.getElementById('tab2').addEventListener('click', function() {
    document.getElementById('content1').style.display = 'none';
    document.getElementById('content2').style.display = 'block';
    document.getElementById('content3').style.display = 'none';
    document.getElementById('tab2').classList.add('is-active');
    document.getElementById('tab1').classList.remove('is-active');
    document.getElementById('tab3').classList.remove('is-active');
  });

  document.getElementById('tab3').addEventListener('click', function() {
    document.getElementById('content1').style.display = 'none';
    document.getElementById('content2').style.display = 'none';
    document.getElementById('content3').style.display = 'block';
    document.getElementById('tab3').classList.add('is-active');
    document.getElementById('tab1').classList.remove('is-active');
    document.getElementById('tab2').classList.remove('is-active');
  });
</script>

এখানে:

• JavaScript ব্যবহার করে আপনি ট্যাবের কন্টেন্টের দৃশ্যমানতা এবং active ক্লাস পরিবর্তন করতে পারেন।
• ট্যাবে ক্লিক করলে কেবলমাত্র সংশ্লিষ্ট কন্টেন্ট প্রদর্শিত হবে এবং অন্য কন্টেন্টগুলো গোপন থাকবে।

৪. Navbar (Burger Menu)

Bulma তে navbar কম্পোনেন্ট সাধারণত মোবাইল এবং ডেস্কটপে ব্যবহারকারীর নেভিগেশন জন্য ব্যবহৃত হয়। মোবাইল স্ক্রীনে, একটি burger menu এর মাধ্যমে নেভিগেশনটি প্রদর্শন করা হয়। JavaScript এর মাধ্যমে এই বুর্গার মেনুর কার্যকারিতা কাস্টমাইজ করা যায়।

উদাহরণ: Burger Menu সেটআপ

<div class="navbar-menu" id="navbarMenu">
  <div class="navbar-start">
    <a class="navbar-item">Home</a>
    <a class="navbar-item">About</a>
    <a class="navbar-item">Services</a>
  </div>
  <div class="navbar-end">
    <a class="navbar-item">Contact</a>
  </div>
</div>

<button class="navbar-burger" id="burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</button>

<script>
  document.getElementById('burger').addEventListener('click', function() {
    const menu = document.getElementById('navbarMenu');
    const burger = document.getElementById('burger');
    
    menu.classList.toggle('is-active');
    burger.classList.toggle('is-active');
  });
</script>

এখানে:

• is-active ক্লাসটি burger মেনুর এবং navbar-menu এর দৃশ্যমানতা এবং কার্যকারিতা নিয়ন্ত্রণ করে।
• burger বাটন ক্লিক করলে নেভিগেশন মেনু এবং বুর্গার আইকন স্বয়ংক্রিয়ভাবে সক্রিয় বা নিষ্ক্রিয় হবে।

সারাংশ

Bulma একটি স্টাইলিং ফ্রেমওয়ার্ক হলেও, এর অনেক কম্পোনেন্ট যেমন modals, dropdowns, tabs, এবং navbar এর কার্যকারিতা কাস্টমাইজ করতে JavaScript এর প্রয়োজন হয়। আপনি JavaScript ব্যবহার করে এই কম্পোনেন্টগুলোকে interactive এবং dynamic করতে পারেন। Bulma এর কম্পোনেন্টগুলোর সাথে JavaScript যোগ করার মাধ্যমে, আপনার ওয়েব

পেজে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করা সম্ভব।