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 ডায়ালগ কম্পোনেন্টের মাধ্যমে আপনি খুব সুন্দর, কার্যকরী এবং কাস্টমাইজযোগ্য পপ-আপ উইন্ডো তৈরি করতে পারবেন।
Read more
