Toast notifications হল সিস্টেম বা ওয়েব অ্যাপ্লিকেশনে ছোট, স্বতন্ত্র এবং অস্থায়ী বার্তা যা ব্যবহারকারীকে কোনো গুরুত্বপূর্ণ তথ্য জানানোর জন্য প্রদর্শিত হয়। এটি সাধারণত ব্যবহারকারীর স্ক্রীনে পপ-আপ আকারে প্রদর্শিত হয় এবং কিছু সময় পর নিজে থেকে অদৃশ্য হয়ে যায়। Materialize CSS এ আপনি খুব সহজেই Toast notifications তৈরি করতে পারেন।
এখানে Materialize CSS এর মাধ্যমে Toast notifications তৈরি এবং কনফিগার করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Materialize Toast Notification তৈরি করা
Materialize CSS-এ Toast notification তৈরি করা খুবই সহজ। এটি ব্যবহার করার জন্য আপনাকে কিছু HTML এবং JavaScript কোড ব্যবহার করতে হবে।
১. Toast Notification এর HTML স্ট্রাকচার
Materialize CSS এর মাধ্যমে Toast ব্যবহার করার জন্য একটি বাটন দিয়ে ট্রিগার করতে হবে, যেটি ব্যবহারকারী ক্লিক করলে টোস্ট নোটিফিকেশনটি প্রদর্শিত হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Toast Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Toast Trigger Button -->
<button id="toast-btn" class="btn waves-effect waves-light">Show Toast</button>
<script>
// Initialize Toast
$(document).ready(function() {
$('#toast-btn').click(function() {
M.toast({html: 'This is a Toast notification!'});
});
});
</script>
</body>
</html>
এখানে:
- M.toast({html: 'Message'}): এটি Toast notification ট্রিগার করার জন্য Materialize CSS এর জাভাস্ক্রিপ্ট ফাংশন। এখানে
htmlএর মাধ্যমে প্রদর্শিত বার্তা দেয়া হয়। - #toast-btn: এটি একটি বাটন, যার মাধ্যমে টোস্টটি ট্রিগার হবে।
Toast Notification এর কনফিগারেশন অপশন
Materialize CSS-এ Toast notifications এর কিছু কনফিগারেশন অপশন রয়েছে, যা আপনি ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে কাস্টমাইজ করতে পারেন।
১. Duration (সময়কাল):
duration অপশন ব্যবহার করে আপনি টোস্টের প্রদর্শিত হওয়া সময় নির্ধারণ করতে পারেন। এটি মিলিসেকেন্ডে নির্ধারণ করা হয়। ডিফল্ট সময়কাল ৪০০০ মিলিসেকেন্ড (৪ সেকেন্ড)।
M.toast({html: 'This is a Toast notification!', duration: 5000}); // 5 সেকেন্ড
২. In-Position (পজিশন):
inDuration এবং outDuration অপশন দিয়ে আপনি টোস্টের প্রদর্শনের সময় এবং অদৃশ্য হওয়া সময় নিয়ন্ত্রণ করতে পারেন।
M.toast({
html: 'This is a Toast notification!',
inDuration: 300, // 0.3 সেকেন্ডে টোস্ট প্রদর্শিত হবে
outDuration: 375, // 0.375 সেকেন্ডে টোস্ট অদৃশ্য হবে
});
৩. Position (পজিশন):
toast এর পজিশন কাস্টমাইজ করার জন্য position অপশন ব্যবহার করতে পারেন। এটি আপনাকে টোস্টের অবস্থান পরিবর্তন করার সুযোগ দেয়।
bottom: স্ক্রীনের নিচেtop: স্ক্রীনের উপরেmiddle: স্ক্রীনের মাঝখানে
M.toast({
html: 'This is a Toast notification!',
position: 'top' // টোস্ট উপরে দেখাবে
});
৪. Classes:
classes অপশন ব্যবহার করে আপনি টোস্টে নিজস্ব CSS ক্লাস অ্যাড করতে পারেন, যা টোস্টের ডিজাইন কাস্টমাইজ করতে সাহায্য করে।
M.toast({
html: 'Custom Toast message!',
classes: 'rounded red darken-2' // টোস্টটি রেড কালার এবং রাউন্ডেড হবে
});
৫. Displaying Multiple Toasts:
একাধিক Toast notifications একসাথে দেখানোর জন্য আপনি একাধিক টোস্ট একে একে ট্রিগার করতে পারেন।
M.toast({html: 'First Toast!'});
M.toast({html: 'Second Toast!'});
M.toast({html: 'Third Toast!'});
উপসংহার
Materialize CSS এর মাধ্যমে Toast notifications তৈরি করা খুবই সহজ এবং কার্যকরী। এর মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে ব্যবহারকারীদের জন্য একটি সুন্দর, স্বতন্ত্র এবং অস্থায়ী বার্তা প্রদর্শন করতে পারেন। এটি বিভিন্ন কনফিগারেশন অপশন যেমন duration, position, inDuration, outDuration, এবং classes দ্বারা কাস্টমাইজযোগ্য, যা আপনার প্রয়োজন অনুযায়ী টোস্ট নোটিফিকেশনটি কাস্টমাইজ করতে সাহায্য করে।
Read more
