ডায়ালগ (Dialog) এবং পপ-আপ (Popup) তৈরি

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

এই টিউটোরিয়ালে, আমরা MDL ব্যবহার করে ডায়ালগ এবং পপ-আপ তৈরি করার পদ্ধতি দেখব।

MDL ডায়ালগ (Dialog) তৈরি করা

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

১. MDL ডায়ালগের সাধারণ কাঠামো

<!-- ডায়ালগ ট্রিগার বাটন -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="show-dialog">
  Open Dialog
</button>

<!-- ডায়ালগ বক্স -->
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Dialog Title</h4>
  <div class="mdl-dialog__content">
    <p>This is a simple dialog with MDL.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised" id="close-dialog">Close</button>
  </div>
</dialog>

<!-- MDL JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-button: ডায়ালগ ট্রিগার বাটনের জন্য ব্যবহৃত MDL ক্লাস।
• mdl-dialog: ডায়ালগ উইন্ডোর প্রধান কনটেইনার।
• mdl-dialog__title: ডায়ালগের টাইটেল।
• mdl-dialog__content: ডায়ালগের মেইন কনটেন্ট (টেক্সট বা অন্যান্য উপাদান)।
• mdl-dialog__actions: ডায়ালগের অ্যাকশন বাটনগুলি (যেমন ক্লোজ বাটন)।

২. ডায়ালগ কার্যকর করা (JavaScript)

ডায়ালগ বক্সটি JavaScript দিয়ে কার্যকর করতে হবে। যখন ব্যবহারকারী বাটনে ক্লিক করবেন, তখন ডায়ালগটি দেখানো হবে এবং ক্লোজ বাটনে ক্লিক করলে এটি বন্ধ হবে।

document.querySelector('#show-dialog').addEventListener('click', function() {
  document.querySelector('dialog').showModal();
});

document.querySelector('#close-dialog').addEventListener('click', function() {
  document.querySelector('dialog').close();
});

এখানে, showModal() এবং close() মেথডগুলি ডায়ালগকে খুলতে এবং বন্ধ করতে ব্যবহৃত হয়।

MDL পপ-আপ (Popup) তৈরি করা

পপ-আপ সাধারণত একটি ছোট মডাল উইন্ডো হয়, যা কোনও নির্দিষ্ট কাজ বা তথ্য প্রদান করার জন্য ব্যবহারকারী ইন্টারঅ্যাকশনের মাধ্যমে প্রদর্শিত হয়। MDL এ পপ-আপ তৈরি করার জন্য ডায়ালগ কম্পোনেন্ট ব্যবহার করা হয়, তবে এটি সাধারণত ছোট আকারে থাকে এবং তা দ্রুত দেখানোর জন্য ব্যবহৃত হয়।

১. পপ-আপ এর সাধারণ কাঠামো

<!-- পপ-আপ ট্রিগার বাটন -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="show-popup">
  Show Popup
</button>

<!-- পপ-আপ (ডায়ালগ) -->
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Popup Title</h4>
  <div class="mdl-dialog__content">
    <p>This is a simple popup with Material Design Lite.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised" id="close-popup">Close</button>
  </div>
</dialog>

<!-- MDL JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-button: পপ-আপ ট্রিগার বাটনের জন্য ব্যবহৃত ক্লাস।
• mdl-dialog: পপ-আপ উইন্ডোর প্রধান কনটেইনার।
• mdl-dialog__title: পপ-আপের শিরোনাম।
• mdl-dialog__content: পপ-আপের কনটেন্ট।
• mdl-dialog__actions: পপ-আপের অ্যাকশন বাটন (যেমন ক্লোজ বাটন)।

২. পপ-আপ কার্যকর করা (JavaScript)

পপ-আপটি দেখানোর জন্যও JavaScript প্রয়োজন হবে।

document.querySelector('#show-popup').addEventListener('click', function() {
  document.querySelector('dialog').showModal();
});

document.querySelector('#close-popup').addEventListener('click', function() {
  document.querySelector('dialog').close();
});

এখানে, পপ-আপটি ট্রিগার করা হচ্ছে এবং পপ-আপ বন্ধ করার জন্য ক্লোজ বাটন ব্যবহার করা হচ্ছে।

ডায়ালগ এবং পপ-আপ কাস্টমাইজেশন

MDL এর ডায়ালগ এবং পপ-আপ কাস্টমাইজ করা খুব সহজ। আপনি স্টাইল, আকার, কালার, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

উদাহরণ: ডায়ালগ কাস্টমাইজেশন

<style>
  .mdl-dialog {
    width: 50%;
    background-color: #f0f0f0;
    border-radius: 8px;
  }

  .mdl-dialog__title {
    color: #2196F3;
  }

  .mdl-dialog__content {
    font-size: 16px;
    color: #333;
  }

  .mdl-dialog__actions .mdl-button {
    background-color: #2196F3;
    color: white;
  }
</style>

এটি ডায়ালগের আকার, ব্যাকগ্রাউন্ড কালার, টাইটেলের রঙ এবং অ্যাকশন বাটনের রঙ কাস্টমাইজ করবে।

সারাংশ

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

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

এখানে আমরা MDL এর Dialog Component ব্যবহার করার পদ্ধতি এবং এর কাস্টমাইজেশন নিয়ে আলোচনা করব।

MDL এর Dialog Component এর ব্যবহার

MDL এর ডায়ালগ কম্পোনেন্টটি সাধারণত একটি মডাল উইন্ডো হিসাবে কাজ করে, যা ব্যবহারকারীকে কোনো ধরনের ইন্টারঅ্যাকশন বা তথ্য প্রদানের জন্য উন্মুক্ত করা হয়। MDL-এ ডায়ালগ ব্যবহার করতে কিছু নির্দিষ্ট HTML এবং JavaScript কোডের মাধ্যমে এর কার্যকারিতা যোগ করা হয়।

১. বেসিক ডায়ালগ কম্পোনেন্ট

MDL-এ একটি সাধারণ ডায়ালগ তৈরি করতে, প্রথমে HTML এর মধ্যে একটি ডায়ালগ কন্টেইনার এবং এর ভিতরে বিভিন্ন উপাদান (যেমন হেডিং, বাটন) রাখুন। তারপর, JavaScript ব্যবহার করে ডায়ালগটি ট্রিগার বা ওপেন করুন।

<!-- Dialog Trigger Button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="showDialog">
  Open Dialog
</button>

<!-- Dialog -->
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Dialog Title</h4>
  <div class="mdl-dialog__content">
    <p>This is a simple dialog box example using MDL.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="closeDialog">
      Close
    </button>
  </div>
</dialog>

<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

<script>
  // Get the dialog and buttons
  var dialog = document.querySelector('dialog');
  var showDialogButton = document.querySelector('#showDialog');
  var closeDialogButton = document.querySelector('#closeDialog');

  // Check if the dialog element is supported by the browser
  if (!dialog.showModal) {
    alert("The <dialog> API is not supported by your browser.");
  } else {
    // Show the dialog when the button is clicked
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });

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

এখানে:

• dialog: এটি MDL এর ডায়ালগ উইন্ডো।
• mdl-dialog__title: ডায়ালগের শিরোনাম।
• mdl-dialog__content: ডায়ালগের প্রধান বিষয়বস্তু।
• mdl-dialog__actions: ডায়ালগের অ্যাকশন বাটন, যেমন Close।

এই কোডের মাধ্যমে আপনি একটি বেসিক ডায়ালগ তৈরি করতে পারবেন, যা Open Dialog বাটনে ক্লিক করার পর পপ-আপ হবে এবং Close বাটনে ক্লিক করলে বন্ধ হয়ে যাবে।

MDL Dialog কাস্টমাইজেশন

MDL এর ডায়ালগ কম্পোনেন্টটি বিভিন্ন উপায়ে কাস্টমাইজ করা যায়, যেমন এর আকার, রঙ, শেডিং এবং অন্যান্য UI উপাদান। এখানে আমরা কিছু কাস্টমাইজেশন দেখব:

১. Dialog এর আকার কাস্টমাইজ করা

ডায়ালগের আকার কাস্টমাইজ করতে mdl-dialog--large বা mdl-dialog--small ক্লাস ব্যবহার করা হয়।

<dialog class="mdl-dialog mdl-dialog--large">
  <h4 class="mdl-dialog__title">Large Dialog</h4>
  <div class="mdl-dialog__content">
    <p>This is a large dialog box example.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="closeDialog">
      Close
    </button>
  </div>
</dialog>

এখানে mdl-dialog--large ক্লাস যোগ করা হয়েছে, যা ডায়ালগের আকার বড় করে দেবে।

২. Dialog এর শেডিং এবং ডিজাইন কাস্টমাইজ করা

MDL ডায়ালগের জন্য ডিফল্ট শেডিং রয়েছে, তবে আপনি এটি mdl-shadow--2dp বা mdl-shadow--4dp ক্লাস ব্যবহার করে কাস্টমাইজ করতে পারেন।

<dialog class="mdl-dialog mdl-shadow--2dp">
  <h4 class="mdl-dialog__title">Dialog with Shadow</h4>
  <div class="mdl-dialog__content">
    <p>This dialog has a shadow effect for better visibility.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="closeDialog">
      Close
    </button>
  </div>
</dialog>

এখানে, mdl-shadow--2dp ক্লাস ব্যবহার করা হয়েছে, যা ডায়ালগের চারপাশে একটি ছোট শেড তৈরি করবে।

৩. Dialog এর স্টাইল কাস্টমাইজ করা

ডায়ালগের ভিতরে থাকা উপাদানগুলি যেমন টেক্সট, বাটন ইত্যাদি কাস্টমাইজ করা সহজ। CSS ব্যবহার করে আপনি এগুলোর রঙ, আকার বা প্যাডিং পরিবর্তন করতে পারেন।

<style>
  .mdl-dialog__title {
    color: #2196F3;
    font-size: 24px;
  }

  .mdl-dialog__content {
    font-size: 16px;
    color: #757575;
  }

  .mdl-dialog__actions .mdl-button {
    background-color: #4CAF50;
    color: white;
  }
</style>

এখানে, ডায়ালগের title, content এবং action button এর জন্য কাস্টম স্টাইল প্রয়োগ করা হয়েছে।

MDL Dialog এর অন্যান্য বৈশিষ্ট্য

MDL Dialog এর কিছু অতিরিক্ত বৈশিষ্ট্য যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করতে সহায়তা করে:

১. Auto-focus on Dialog Open

MDL ডায়ালগের ভিতরে একটি উপাদান (যেমন বাটন বা ইনপুট ফিল্ড) স্বয়ংক্রিয়ভাবে ফোকাসে রাখা যেতে পারে।

<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Dialog with Auto-focus</h4>
  <div class="mdl-dialog__content">
    <input type="text" autofocus>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="closeDialog">
      Close
    </button>
  </div>
</dialog>

এখানে autofocus অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যাতে ডায়ালগ খোলার পর ইনপুট ফিল্ডে স্বয়ংক্রিয়ভাবে কার্সর চলে যায়।

২. Dialog with Confirmation

আপনি একটি ডায়ালগে নিশ্চিতকরণ (confirmation) বা আরও কাস্টম অ্যাকশন যুক্ত করতে পারেন।

<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Are you sure?</h4>
  <div class="mdl-dialog__content">
    <p>Do you really want to delete this item?</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised" id="cancelButton">
      Cancel
    </button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="confirmButton">
      Confirm
    </button>
  </div>
</dialog>

এখানে, Confirm এবং Cancel বাটন দুটি ব্যবহারকারীকে একটি নিশ্চিতকরণ প্রদান করতে ব্যবহৃত হবে।

সারাংশ

MDL Dialog Component ব্যবহারকারীর জন্য একটি সহজ, প্রাকৃতিক এবং ব্যবহারকারী-বান্ধব পপ-আপ উইন্ডো তৈরি করার উপায় প্রদান করে। MDL-এ ডায়ালগ ব্যবহার করে আপনি একটি মডাল উইন্ডো তৈরি করতে পারেন যা বিভিন্ন কাস্টমাইজেশন এবং বৈশিষ্ট্য প্রদান করে। আপনি dialog ট্যাগ ব্যবহার করে এর কন্টেন্ট, আকার, শেডিং এবং অন্যান্য স্টাইল সহজেই কাস্টমাইজ করতে পারেন। ডায়ালগের কার্যকারিতা JavaScript এর মাধ্যমে ট্রিগার করা হয়, যা পপ-আপ উইন্ডো তৈরি এবং বন্ধ করার জন্য ব্যবহৃত হয়।

Material Design Lite (MDL) ব্যবহার করে আপনি খুব সহজে Dialog এবং Modal Dialog তৈরি করতে পারেন। Dialog হল একটি পপ-আপ উইন্ডো যা ব্যবহারকারীর মনোযোগ আকর্ষণ করে এবং একটি নির্দিষ্ট কাজ বা সতর্কতা প্রদর্শন করে। MDL এ, Dialog কম্পোনেন্টটি সোজা এবং কাস্টমাইজযোগ্য, যা একটি সুন্দর এবং আধুনিক পপ-আপ উইন্ডো তৈরি করতে সহায়তা করে। এখানে, আমরা Simple Dialog এবং Modal Dialog তৈরি করার পদ্ধতি দেখব।

Simple Dialog তৈরি

MDL এর Simple Dialog ব্যবহারকারীকে একটি সহজ পপ-আপ উইন্ডো প্রদর্শন করতে সহায়তা করে। এটি একটি মেসেজ বা কনফার্মেশন পপ-আপ হতে পারে। MDL এ dialog কম্পোনেন্টটি mdl-dialog ক্লাস দিয়ে তৈরি করা হয়।

উদাহরণ: Simple Dialog

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Dialog</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
  <!-- Google Material Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

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

  <!-- Dialog box -->
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Dialog Title</h4>
    <div class="mdl-dialog__content">
      <p>This is a simple dialog with a message.</p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--accent" id="close-dialog">
        Close
      </button>
    </div>
  </dialog>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    var closeDialogButton = document.querySelector('#close-dialog');

    if (!dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }

    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });

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

</body>
</html>

এখানে:

• dialog: এটি MDL এর ডায়ালগ কম্পোনেন্ট।
• mdl-dialog__title: ডায়ালগের শিরোনাম।
• mdl-dialog__content: ডায়ালগের বিষয়বস্তু (এখানে মেসেজ)।
• mdl-dialog__actions: ডায়ালগের অ্যাকশন বাটন।

এই উদাহরণে, "Open Dialog" বাটনে ক্লিক করলে একটি সিম্পল ডায়ালগ উইন্ডো খুলবে এবং "Close" বাটনে ক্লিক করলে এটি বন্ধ হবে।

Modal Dialog তৈরি

MDL এ Modal Dialog একটি বিশেষ ধরনের পপ-আপ উইন্ডো, যা ব্যবহারকারীকে কিছু নির্দিষ্ট অ্যাকশন করতে বাধ্য করে এবং এর বাইরে কোনো ইন্টারঅ্যাকশন সম্ভব নয়। এটি সাধারণত ফর্ম সাবমিশন, সতর্কতা বা কনফার্মেশন ডায়ালগ হিসেবে ব্যবহৃত হয়। Modal Dialog তৈরি করতে আপনি mdl-dialog এবং mdl-dialog__actions ব্যবহার করবেন।

উদাহরণ: Modal Dialog

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Dialog</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
  <!-- Google Material Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

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

  <!-- Modal Dialog -->
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Modal Dialog Title</h4>
    <div class="mdl-dialog__content">
      <p>Click "Ok" to confirm or "Cancel" to dismiss the dialog.</p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--accent" id="cancel-modal">
        Cancel
      </button>
      <button type="button" class="mdl-button mdl-js-button mdl-button--colored" id="ok-modal">
        Ok
      </button>
    </div>
  </dialog>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-modal-dialog');
    var closeDialogButton = document.querySelector('#cancel-modal');
    var okDialogButton = document.querySelector('#ok-modal');

    if (!dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }

    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });

    closeDialogButton.addEventListener('click', function() {
      dialog.close();
    });

    okDialogButton.addEventListener('click', function() {
      alert('You clicked Ok!');
      dialog.close();
    });
  </script>

</body>
</html>

এখানে:

• dialog: MDL ডায়ালগ কম্পোনেন্ট যা Modal Dialog হিসেবে ব্যবহৃত।
• mdl-dialog__title: ডায়ালগের শিরোনাম।
• mdl-dialog__content: ডায়ালগের বিষয়বস্তু।
• mdl-dialog__actions: ডায়ালগে থাকা অ্যাকশন বাটন।

এই উদাহরণে, Modal Dialog ব্যবহারকারীর কাছে দুটি অপশন রাখে: Ok এবং Cancel। "Ok" বাটনে ক্লিক করলে একটি অ্যালার্ট শো হবে, আর "Cancel" বাটনে ক্লিক করলে ডায়ালগ বন্ধ হবে।

MDL Dialog কাস্টমাইজেশন

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

• ডায়ালগের আকার কাস্টমাইজ করা: ডায়ালগের আকার ছোট বা বড় করতে CSS ব্যবহার করতে পারেন।
• অ্যাকশন বাটন কাস্টমাইজ করা: বাটনের রঙ, আকার, বা টেক্সট পরিবর্তন করা সহজ।

.mdl-dialog {
  width: 50%; /* ডায়ালগের আকার ছোট করা */
}

.mdl-button {
  background-color: #00796b; /* বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
}

সারাংশ

MDL এর Simple Dialog এবং Modal Dialog ব্যবহার করে আপনি খুব সহজে ওয়েব পেজে পপ-আপ উইন্ডো তৈরি করতে পারেন। Simple Dialog সাধারণত একবারের জন্য ব্যবহারকারীকে কিছু তথ্য প্রদর্শন করে, যখন Modal Dialog ব্যবহারকারীর ইন্টারঅ্যাকশন বাধা দেয় এবং তাকে একটি নির্দিষ্ট অ্যাকশন নিতে বাধ্য করে। MDL ডায়ালগ কম্পোনেন্টের মাধ্যমে আপনি খুব সুন্দর, কার্যকরী এবং কাস্টমাইজযোগ্য পপ-আপ উইন্ডো তৈরি করতে পারবেন।

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

এই টিউটোরিয়ালে, আমরা MDL ডায়ালগে কন্টেন্ট এবং অ্যাকশন যোগ করার প্রক্রিয়া শিখব।

MDL ডায়ালগ কী?

MDL Dialog একটি মডাল উইন্ডো, যা ব্যবহারকারীকে ওয়েবসাইটের বা অ্যাপ্লিকেশনের অভ্যন্তরে কোনো গুরুত্বপূর্ণ তথ্য বা অ্যাকশন প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীকে কোনো নির্দিষ্ট কাজ সম্পন্ন করার জন্য একটি পপ-আপ উইন্ডো সরবরাহ করে।

MDL Dialog এর মৌলিক কাঠামো

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

<!-- Dialog Content -->
<dialog class="mdl-dialog" id="sample-dialog">
  <h4 class="mdl-dialog__title">Dialog Title</h4>
  <div class="mdl-dialog__content">
    <p>This is a sample dialog content. You can add more information here.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="close-dialog">
      Close
    </button>
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="save-dialog">
      Save
    </button>
  </div>
</dialog>

এখানে:

• mdl-dialog: এটি মূল ডায়ালগ কম্পোনেন্ট।
• mdl-dialog__title: ডায়ালগের শিরোনাম।
• mdl-dialog__content: ডায়ালগের কন্টেন্ট অংশ, যেখানে আপনি তথ্য বা ফর্ম রাখতে পারেন।
• mdl-dialog__actions: ডায়ালগের অ্যাকশন বাটনগুলি, যেমন Close এবং Save বাটন।

MDL ডায়ালগে কন্টেন্ট এবং অ্যাকশন যোগ করা

MDL ডায়ালগে কন্টেন্ট যোগ করতে আপনি mdl-dialog__content ক্লাস ব্যবহার করবেন। এটি সাধারণত টেক্সট, ছবি, ফর্ম ইত্যাদি রাখতে ব্যবহৃত হয়।

কন্টেন্ট যোগ করা

<dialog class="mdl-dialog" id="sample-dialog">
  <h4 class="mdl-dialog__title">Important Information</h4>
  <div class="mdl-dialog__content">
    <p>This is a critical message to inform users about the latest updates.</p>
    <img src="your-image.jpg" alt="Image description">
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="close-dialog">
      Close
    </button>
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="save-dialog">
      Save
    </button>
  </div>
</dialog>

এখানে, mdl-dialog__content এর মধ্যে একটি প্যারাগ্রাফ এবং একটি ইমেজ যোগ করা হয়েছে। আপনি এখানে অন্য যেকোনো HTML উপাদান ব্যবহার করতে পারেন, যেমন ফর্ম ইনপুট, লিস্ট, বা টেবিল।

অ্যাকশন যোগ করা

ডায়ালগের অ্যাকশন অংশে সাধারণত বাটন থাকে, যেগুলি ব্যবহারকারীকে নির্দিষ্ট অ্যাকশন সম্পন্ন করতে সহায়তা করে। উদাহরণস্বরূপ, Close এবং Save বাটন দুটি ডায়ালগে অ্যাকশন হিসেবে ব্যবহৃত হচ্ছে।

<div class="mdl-dialog__actions">
  <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="close-dialog">
    Close
  </button>
  <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="save-dialog">
    Save
  </button>
</div>

এই অংশে:

• Close বাটন ব্যবহারকারীকে ডায়ালগ বন্ধ করার জন্য সহায়তা করবে।
• Save বাটন ব্যবহারকারীকে কোনো ডেটা সেভ করার জন্য উৎসাহিত করবে।

MDL ডায়ালগ প্রদর্শন এবং বন্ধ করা

MDL ডায়ালগ প্রোগ্রাম্যাটিকভাবে প্রদর্শন এবং বন্ধ করা যেতে পারে। MDL dialog এলিমেন্টটি JavaScript এর মাধ্যমে কন্ট্রোল করা হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ডায়ালগটি একটি বাটন ক্লিকের মাধ্যমে প্রদর্শিত হবে এবং অন্য একটি বাটন ক্লিকের মাধ্যমে বন্ধ হবে।

JavaScript দিয়ে ডায়ালগ কন্ট্রোল

<script>
  // Get the dialog element
  var dialog = document.querySelector('#sample-dialog');

  // Get the button that opens the dialog
  var showDialogButton = document.querySelector('#show-dialog');

  // Get the button that closes the dialog
  var closeDialogButton = document.querySelector('#close-dialog');

  // Get the button that saves the data
  var saveDialogButton = document.querySelector('#save-dialog');

  // Show the dialog when the button is clicked
  showDialogButton.addEventListener('click', function() {
    dialog.showModal();
  });

  // Close the dialog when the close button is clicked
  closeDialogButton.addEventListener('click', function() {
    dialog.close();
  });

  // Save the data when the save button is clicked
  saveDialogButton.addEventListener('click', function() {
    alert('Data Saved!');
    dialog.close();
  });
</script>

এখানে:

• dialog.showModal(): এটি ডায়ালগ উইন্ডোটি প্রদর্শন করবে।
• dialog.close(): এটি ডায়ালগ উইন্ডোটি বন্ধ করবে।

MDL ডায়ালগে কাস্টম কন্টেন্ট এবং অ্যাকশন

MDL ডায়ালগে কাস্টম কন্টেন্ট যোগ করতে, আপনি সহজেই mdl-dialog__content ক্লাসে যেকোনো HTML উপাদান, যেমন টেক্সট, ফর্ম, চেকবক্স, স্লাইডার বা ড্রপডাউন যোগ করতে পারেন। এটি ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও ভালো করে তোলে।

<dialog class="mdl-dialog" id="custom-dialog">
  <h4 class="mdl-dialog__title">Enter Your Details</h4>
  <div class="mdl-dialog__content">
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
      <br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </form>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="cancel-dialog">
      Cancel
    </button>
    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="submit-dialog">
      Submit
    </button>
  </div>
</dialog>

এখানে, ডায়ালগের কন্টেন্টে একটি ফর্ম যোগ করা হয়েছে, যেখানে ব্যবহারকারী username এবং email ইনপুট করতে পারে। ডায়ালগের দুটি অ্যাকশন বাটন রয়েছে, Cancel এবং Submit।

সারাংশ

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

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 ডায়ালগ বক্সে কাস্টমাইজেশন, অ্যাকশন বাটন, এবং ইন্টারঅ্যাকটিভ ফিচার সরবরাহ করে, যা ডিজাইনকে আরো উন্নত এবং ইন্টারেক্টিভ করে তোলে।