Material Design Lite (MDL) একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি। MDL এর Snackbar এবং Toast Messages ব্যবহারকারীদের জন্য একটি সুন্দর এবং কার্যকরী উপায় যে কোনো কাজ বা কনফার্মেশন সম্পর্কে দ্রুত একটি ইনফরমেশন প্রদর্শন করার। এই টিউটোরিয়ালে আমরা Snackbar এবং Toast Messages তৈরি করার পদ্ধতি আলোচনা করব এবং কিভাবে এগুলো কার্যকরীভাবে ব্যবহৃত হয় তা দেখব।
Snackbar এবং Toast Message কি?
- Snackbar: এটি একটি ছোট বার যা পেজের নিচে প্রদর্শিত হয় এবং ব্যবহারকারীদের কোনো অ্যাকশন বা ইভেন্টের ফলাফল সম্পর্কে জানায়। সাধারণত এটি অল্প সময়ের জন্য প্রদর্শিত হয় এবং পরে স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যায়। এটি সাধারণত ব্যবহারকারীকে কোনো কনফার্মেশন বা ইনফরমেশন দেয়, যেমন "Item Added to Cart" বা "Message Sent".
- Toast Message: এটি একটি সহজ এবং ছোট বার, যা ব্যবহৃত হয় কোনো ছোট প্রক্রিয়ার সফলতা বা ব্যর্থতা প্রদর্শন করার জন্য। এটি সাধারণত Snackbar এর মতো কাজ করে, তবে এর উদ্দেশ্য এবং উপস্থাপনা হতে পারে ভিন্ন।
MDL এর Snackbar তৈরি করা
MDL Snackbar তৈরি করতে, MDL-এর mdl-snackbar কম্পোনেন্ট ব্যবহার করা হয়, যা ব্যবহারকারীকে কোনো অ্যাকশন সম্পর্কে জানাতে ব্যবহৃত হয়।
উদাহরণ: Snackbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Snackbar Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Snackbar -->
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text">Your message has been sent!</div>
<button class="mdl-snackbar__action" type="button">OK</button>
</div>
<!-- Button to trigger Snackbar -->
<button id="showSnackbar" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Show Snackbar
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
var snackbar = document.querySelector('#snackbar');
var showSnackbarButton = document.querySelector('#showSnackbar');
showSnackbarButton.addEventListener('click', function() {
snackbar.MaterialSnackbar.showSnackbar({
message: 'Your message has been sent!',
timeout: 5000
});
});
</script>
</body>
</html>
ব্যাখ্যা:
- mdl-snackbar: এটি Snackbar কম্পোনেন্টের মূল ক্লাস।
- mdl-snackbar__text: এটি Snackbar এর মেসেজের টেক্সট প্রদর্শন করে।
- mdl-snackbar__action: এটি Snackbar এর অ্যাকশন বাটন, যা ব্যবহারকারী ক্লিক করলেSnackbar বন্ধ হবে বা কোনো অ্যাকশন ঘটবে।
- MaterialSnackbar.showSnackbar(): এটি Snackbar দেখানোর জন্য ব্যবহৃত JavaScript ফাংশন। এতে message (বারের মেসেজ) এবং timeout (কত সময় পর এটি অদৃশ্য হবে) প্যারামিটার থাকে।
এটি একটি Snackbar তৈরি করবে, যা "Show Snackbar" বাটনে ক্লিক করলে "Your message has been sent!" বারটি ৫ সেকেন্ডের জন্য প্রদর্শিত হবে।
MDL Toast Message তৈরি করা
MDL-এ Toast Message তৈরি করা খুবই সহজ। এটি সাধারণত Snackbar এর মতোই, তবে এটি কমপ্যাক্ট এবং সাধারণত কোনো ইন্টারঅ্যাকশন ছাড়াই প্রদর্শিত হয়। MDL-এ Snackbar ব্যবহার করেই আপনি Toast Message তৈরি করতে পারেন।
উদাহরণ: Toast Message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Toast Message Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Toast Message -->
<div id="toast" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text">Item added to cart!</div>
</div>
<!-- Button to trigger Toast -->
<button id="showToast" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Show Toast
</button>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
var toast = document.querySelector('#toast');
var showToastButton = document.querySelector('#showToast');
showToastButton.addEventListener('click', function() {
toast.MaterialSnackbar.showSnackbar({
message: 'Item added to cart!',
timeout: 3000
});
});
</script>
</body>
</html>
ব্যাখ্যা:
- mdl-snackbar: এটি Toast Message তৈরি করতে ব্যবহৃত একই ক্লাস যা Snackbar এর জন্য ব্যবহৃত হয়। আপনি একে Toast হিসাবে ব্যবহার করছেন, তবে এটি কোনো অ্যাকশন বা ইন্টারঅ্যাকশন ছাড়াই দ্রুত প্রদর্শিত হয়।
- showSnackbar(): এই ফাংশনটি Snackbar বা Toast Message প্রদর্শন করে, যেখানে message প্যারামিটারটি মেসেজের টেক্সট হিসেবে ব্যবহৃত হয় এবং timeout সেট করে, এটি কত সময় ধরে প্রদর্শিত থাকবে।
এটি একটি Toast Message তৈরি করবে, যা "Show Toast" বাটনে ক্লিক করলে "Item added to cart!" বারটি ৩ সেকেন্ডের জন্য প্রদর্শিত হবে।
Snackbar এবং Toast Message কাস্টমাইজেশন
MDL-এর Snackbar এবং Toast Message খুব সহজে কাস্টমাইজ করা যায়। আপনি চাইলে এর রঙ, আকার, এবং টাইম আউট পরিবর্তন করতে পারেন।
১. Snackbar এর রঙ কাস্টমাইজ করা
.mdl-snackbar__text {
background-color: #4CAF50; /* Green background */
color: white;
}
এটি Snackbar এর ব্যাকগ্রাউন্ড এবং টেক্সট রঙ পরিবর্তন করবে।
২. Snackbar এর টাইম আউট কাস্টমাইজ করা
snackbar.MaterialSnackbar.showSnackbar({
message: 'Your message has been sent!',
timeout: 7000 // 7 seconds timeout
});
এটি Snackbar এর ডিসপ্লে টাইম ৭ সেকেন্ডে বাড়াবে।
সারাংশ
Material Design Lite (MDL) এর Snackbar এবং Toast Messages খুবই সহজ এবং কার্যকরী উপাদান যা ব্যবহারকারীদের দ্রুত ইনফরমেশন প্রদর্শন করতে সহায়তা করে। MDL-এ আপনি Snackbar এবং Toast Messages তৈরি করতে পারেন, যা message এবং timeout কাস্টমাইজেশন প্যারামিটার দিয়ে অত্যন্ত সহজে ব্যবহার করা যায়। MDL এর এই কম্পোনেন্টগুলো ওয়েব ডিজাইনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
