Bulma Components এর JavaScript Customization

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 যোগ করার মাধ্যমে, আপনার ওয়েব

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