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 ডায়ালগ ব্যবহারের মাধ্যমে আপনার ওয়েব অ্যাপ্লিকেশনগুলির ইউজার এক্সপেরিয়েন্স উন্নত করা সম্ভব।
Read more
