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