Alerts এবং Pop-ups তৈরি করা

Bulma ফ্রেমওয়ার্কে Alerts এবং Pop-ups তৈরি করা সহজ এবং সেগুলো ওয়েবসাইটের ইউজার ইন্টারফেসে বার্তা, সতর্কতা বা ইনফরমেশন প্রদর্শনের জন্য ব্যবহৃত হয়। Alerts সাধারণত একটি বার্তা বা সতর্কতাকে প্রদর্শন করে, যেখানে Pop-ups বিশেষভাবে অতিরিক্ত কন্টেন্ট বা একশন প্রম্পট হিসেবে ব্যবহৃত হয়।

১. Bulma এর Alerts

Alerts সাধারণত কোনো বার্তা, যেমন সফলতা, ত্রুটি, সতর্কতা বা সাধারণ তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। Bulma তে এর জন্য বিশেষভাবে তৈরি করা বিভিন্ন স্টাইলের ক্লাস রয়েছে, যেমন—is-success, is-danger, is-warning, এবং is-info।

Alert তৈরি করা

<div class="notification is-success">
  <button class="delete"></button>
  Success! Your action was completed successfully.
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  Error! Something went wrong.
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  Warning! Please check your input.
</div>

<div class="notification is-info">
  <button class="delete"></button>
  Info! Please be aware of the changes.
</div>

এখানে:

• is-success: সফলতার বার্তা (green color)।
• is-danger: ত্রুটির বার্তা (red color)।
• is-warning: সতর্কতার বার্তা (yellow color)।
• is-info: সাধারণ তথ্য বার্তা (blue color)।
• button.delete: একটি ক্লোজ বাটন, যা ব্যবহারকারীকে আলার্মটি বন্ধ করতে সাহায্য করে।

Alert সঠিকভাবে বন্ধ করা (JavaScript)

ক্লোজ বাটনে ক্লিক করলে আলার্মটি বন্ধ করতে নিচের JavaScript কোড ব্যবহার করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const deleteButtons = document.querySelectorAll('.notification .delete');
    
    deleteButtons.forEach(button => {
      button.addEventListener('click', () => {
        button.parentElement.remove();
      });
    });
  });
</script>

এখানে:

• delete বাটনটি ক্লিক করলে সংশ্লিষ্ট notification এলিমেন্টটি DOM থেকে সরিয়ে ফেলা হবে।

২. Bulma এর Pop-up

Pop-ups সাধারণত মডাল বা কোনো অতিরিক্ত কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়, যা ব্যবহারকারীর জন্য গুরুত্বপূর্ণ তথ্য বা একশন প্রম্পট প্রদান করে। Bulma তে আপনি সহজেই Pop-ups তৈরি করতে পারেন, এবং এগুলো সাধারণত মডাল উইন্ডোর মতো আচরণ করে।

Basic Pop-up তৈরি করা

<button class="button is-primary" id="open-popup">Open Pop-up</button>

<div id="popup" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Pop-up Title</h1>
      <p>This is a simple pop-up.</p>
      <button class="button is-danger" id="close-popup">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

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

Pop-up সক্রিয় এবং নিষ্ক্রিয় করা (JavaScript)

পপ-আপটি JavaScript এর মাধ্যমে সক্রিয় এবং নিষ্ক্রিয় করা হয়। নিচে দেয়া কোডটি পপ-আপ খুলতে এবং বন্ধ করতে সহায়তা করবে।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Get the pop-up and buttons
    const openPopupButton = document.getElementById('open-popup');
    const popup = document.getElementById('popup');
    const closePopupButton = document.getElementById('close-popup');

    // Open the pop-up
    openPopupButton.addEventListener('click', () => {
      popup.classList.add('is-active');
    });

    // Close the pop-up
    closePopupButton.addEventListener('click', () => {
      popup.classList.remove('is-active');
    });

    // Close the pop-up if clicking on the background
    popup.querySelector('.modal-background').addEventListener('click', () => {
      popup.classList.remove('is-active');
    });
  });
</script>

এখানে:

• is-active ক্লাস পপ-আপকে দৃশ্যমান (visible) করে তোলে।
• modal-background তে ক্লিক করলে পপ-আপ বন্ধ হয়ে যায়।

৩. Alerts এবং Pop-ups এর কাস্টমাইজেশন

Bulma তে আপনি Alerts এবং Pop-ups এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন তাদের রঙ, সাইজ, বা উপাদানগুলো।

Alerts এর কাস্টমাইজেশন

Alerts এর রঙ এবং ডিজাইন কাস্টমাইজ করতে আপনি is-dark, is-light, বা অন্যান্য ক্লাস ব্যবহার করতে পারেন।

<div class="notification is-dark">
  <button class="delete"></button>
  Dark themed alert message.
</div>

<div class="notification is-light">
  <button class="delete"></button>
  Light themed alert message.
</div>

এখানে:

• is-dark: ডার্ক থিমের আলার্ম।
• is-light: লাইট থিমের আলার্ম।

Pop-up এর সাইজ কাস্টমাইজেশন

Pop-up এর সাইজ কাস্টমাইজ করতে আপনি is-small, is-medium, is-large অথবা is-fullwidth ক্লাস ব্যবহার করতে পারেন।

<div id="popup" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content is-medium">
    <div class="box">
      <h1 class="title">Medium Pop-up</h1>
      <button class="button is-danger" id="close-popup">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• is-medium: মডাল সাইজ মাঝারি হবে।
• আপনি is-small, is-large, বা is-fullwidth ক্লাসও ব্যবহার করতে পারেন সাইজ কাস্টমাইজ করতে।

৪. Alerts এবং Pop-ups এর অ্যাডভান্সড ব্যবহার

আপনি Alert এবং Pop-up কম্পোনেন্টগুলোকে আরও উন্নত এবং ইন্টারঅ্যাকটিভ করতে কিছু অতিরিক্ত বৈশিষ্ট্য যোগ করতে পারেন, যেমন অটো-কলাপসিং বা ডেলayed ডিসপ্লে।

Alert স্যুইচ অফ (Auto-dismiss)

আপনি setTimeout ব্যবহার করে একটি এলার্ট কিছু সময় পর অটোমেটিক বন্ধ করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      const alert = document.querySelector('.notification');
      alert.remove();
    }, 5000); // 5 seconds delay
  });
</script>

এখানে, ৫ সেকেন্ড পর notification এলিমেন্টটি DOM থেকে সরিয়ে নেওয়া হবে।

সারাংশ

Bulma এর Alerts এবং Pop-ups সহজে ওয়েবসাইটে গুরুত্বপূর্ণ বার্তা এবং ইনফরমেশন প্রদর্শন করার জন্য ব্যবহৃত হয়। Alerts কম্পোনেন্টের মাধ্যমে আপনি সফলতা, ত্রুটি, সতর্কতা বা তথ্য বার্তা প্রদর্শন করতে পারেন, এবং Pop-ups কম্পোনেন্টের মাধ্যমে অতিরিক্ত কন্টেন্ট বা একশন প্রম্পট ব্যবহারকারীর কাছে উপস্থাপন করতে পারেন। Bulma এর ক্লাসগুলো ব্যবহার করে এগুলো সহজেই কাস্টমাইজ করা যায় এবং JavaScript এর মাধ্যমে তাদের কার্যকারিতা নিয়ন্ত্রণ করা সম্ভব।