Custom Pop-up এবং Dialog Box তৈরি

Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। MDL-এর মাধ্যমে আপনি সহজে এবং দ্রুত Pop-up এবং Dialog Box তৈরি করতে পারেন, যা ইউজার ইন্টারফেসে ইন্টারঅ্যাকশন এবং তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। MDL-এর প্রাক-ডিফাইনড কম্পোনেন্টগুলি ব্যবহার করে, আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী ডায়ালগ বক্স বা পপ-আপ তৈরি করতে পারবেন।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Custom Pop-up এবং Dialog Box তৈরি করা যায় MDL ব্যবহার করে।

MDL Dialog Box তৈরি করা

MDL এর Dialog Box (ডায়ালগ বক্স) হলো একটি পপ-আপ উইন্ডো যা সাধারণত গুরুত্বপূর্ণ তথ্য, সতর্কতা, অথবা কোনো ইন্টারঅ্যাকশন কার্যকলাপ প্রদর্শন করতে ব্যবহৃত হয়। MDL ডায়ালগ বক্সে প্রাক-ডিফাইনড কম্পোনেন্ট থাকে যেমন এস্কেপ বা ক্লোজ বাটন, পাঠ্য কন্টেন্ট এবং অ্যাকশন বাটন।

MDL Dialog Box এর স্ট্রাকচার

উদাহরণ: Basic Dialog Box

<!-- Dialog Box Trigger -->
<button id="show-dialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  Open Dialog
</button>

<!-- Dialog Box -->
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Dialog Box Title</h4>
  <div class="mdl-dialog__content">
    <p>This is a basic dialog box using Material Design Lite.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="close-dialog">
      Close
    </button>
  </div>
</dialog>

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
  // Initialize the dialog
  var dialog = document.querySelector('dialog');
  var showDialogButton = document.querySelector('#show-dialog');
  var closeDialogButton = document.querySelector('#close-dialog');
  
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  
  // Show the dialog
  showDialogButton.addEventListener('click', function() {
    dialog.showModal();
  });

  // Close the dialog
  closeDialogButton.addEventListener('click', function() {
    dialog.close();
  });
</script>

ব্যাখ্যা:

• dialog: এটি MDL এর ডায়ালগ কম্পোনেন্ট। ডায়ালগের মধ্যে বিভিন্ন উপাদান যেমন শিরোনাম, কনটেন্ট, এবং অ্যাকশন বাটন অন্তর্ভুক্ত থাকে।
• mdl-dialog: এটি ডায়ালগের জন্য মূল ক্লাস।
• mdl-dialog__title: ডায়ালগের শিরোনাম।
• mdl-dialog__content: ডায়ালগের মধ্যে মূল কনটেন্ট।
• mdl-dialog__actions: ডায়ালগের অ্যাকশন বাটন (যেমন "Close")।

এছাড়া, আমরা dialogPolyfill.registerDialog(dialog) ব্যবহার করছি যাতে এটি পুরানো ব্রাউজারগুলোর সাথেও সামঞ্জস্যপূর্ণ হয়।

Custom Pop-up তৈরি করা

Pop-up সাধারণত কোনো নির্দিষ্ট অ্যাকশন বা বার্তা প্রদর্শনের জন্য ব্যবহৃত হয়। MDL ব্যবহার করে পপ-আপ তৈরি করা সহজ, এবং আপনি এটিকে ক্লোজ, মডাল, অথবা সাধারণ পপ-আপ হিসাবে কাস্টমাইজ করতে পারেন। সাধারণত HTML এবং CSS ক্লাস ব্যবহার করে এটি তৈরি করা হয়।

উদাহরণ: Custom Pop-up

<!-- Pop-up Trigger -->
<button id="open-popup" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  Open Pop-up
</button>

<!-- Pop-up -->
<div id="popup" class="popup mdl-shadow--2dp">
  <div class="popup-content">
    <h3>Custom Pop-up</h3>
    <p>This is a custom pop-up using Material Design Lite.</p>
    <button id="close-popup" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
      Close
    </button>
  </div>
</div>

<!-- Styles -->
<style>
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    z-index: 1000;
  }
  .popup-content {
    text-align: center;
  }
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }
</style>

<!-- Scripts -->
<script>
  var openPopupButton = document.querySelector('#open-popup');
  var closePopupButton = document.querySelector('#close-popup');
  var popup = document.querySelector('#popup');

  // Open pop-up
  openPopupButton.addEventListener('click', function() {
    popup.style.display = 'block';
  });

  // Close pop-up
  closePopupButton.addEventListener('click', function() {
    popup.style.display = 'none';
  });
</script>

ব্যাখ্যা:

• popup: এটি পপ-আপের জন্য ডিভ ক্লাস। এটি position: fixed স্টাইলের মাধ্যমে স্ক্রীনের মাঝখানে স্থাপন করা হয়।
• popup-content: পপ-আপের মধ্যে কনটেন্ট প্রদর্শন করার জন্য এই ক্লাস ব্যবহৃত হয়।
• popup-overlay: এটি পপ-আপের ব্যাকগ্রাউন্ড অপ্রকাশিত অংশ, যা পপ-আপের বাইরে ক্লিক করলে বন্ধ হবে (যা এখানে ব্যবহৃত হয়নি, তবে আপনি অতিরিক্ত কাস্টমাইজেশন হিসেবে যোগ করতে পারেন)।

Dialog Box এবং Pop-up কাস্টমাইজেশন

MDL ডায়ালগ বক্স এবং পপ-আপের ডিজাইন কাস্টমাইজ করতে আপনি CSS ব্যবহার করে বাটন, ব্যাকগ্রাউন্ড কালার, সাইজ, এবং শ্যাডো পরিবর্তন করতে পারেন।

উদাহরণ: Dialog Box এবং Pop-up কাস্টমাইজেশন

/* Dialog Box Customization */
.mdl-dialog {
  width: 500px;
  border-radius: 10px;
}

.mdl-dialog__title {
  background-color: #4CAF50;
  color: white;
  text-align: center;
}

.mdl-dialog__actions {
  text-align: center;
}

/* Custom Pop-up Customization */
.popup {
  width: 400px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.popup button {
  background-color: #2196F3;
  color: white;
}

এখানে:

• mdl-dialog: ডায়ালগ বক্সের প্রস্থ এবং কোণ গোলাকার করা হয়েছে।
• popup: পপ-আপের জন্য প্রস্থ এবং ব্যাকগ্রাউন্ড কালার কাস্টমাইজ করা হয়েছে।
• popup button: পপ-আপ বাটনের রঙ পরিবর্তন করা হয়েছে।

সারাংশ

Material Design Lite (MDL) ব্যবহার করে Custom Pop-up এবং Dialog Box তৈরি করা খুবই সহজ এবং কার্যকরী। MDL এর ডায়ালগ বক্স কম্পোনেন্ট এবং কাস্টম পপ-আপ তৈরি করে আপনি একটি প্রফেশনাল, আধুনিক এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে পারেন। MDL ডায়ালগ বক্সে কাস্টমাইজেশন, অ্যাকশন বাটন, এবং ইন্টারঅ্যাকটিভ ফিচার সরবরাহ করে, যা ডিজাইনকে আরো উন্নত এবং ইন্টারেক্টিভ করে তোলে।