Custom Toasts এবং Event Handling

Materialize CSS ফ্রেমওয়ার্কটি toast এবং event handling এর জন্য শক্তিশালী ফিচার সরবরাহ করে যা ওয়েব ডেভেলপমেন্টে ইন্টারঅ্যাকটিভ উপাদান এবং ইউজার ইন্টারফেস ডিজাইনে সহায়ক। Toast হলো ছোট নোটিফিকেশন মেসেজ যা কোনো কার্যকলাপের পর প্রদর্শিত হয় এবং event handling ব্যবহার করে আপনি ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে কোনো কার্যকলাপ পরিচালনা করতে পারেন।

এখানে Materialize CSS এর Custom Toasts এবং Event Handling নিয়ে বিস্তারিত আলোচনা করা হলো।

Custom Toasts

Toasts হলো সিস্টেমের মেসেজ নোটিফিকেশন যা কোনো ব্যবহারকারীর জন্য গুরুত্বপূর্ণ তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS এ toasts ব্যবহার করে আপনি সহজেই ওয়েব পেজের মধ্যে ছোট, কাস্টমাইজড নোটিফিকেশন বার তৈরি করতে পারেন।

১. Basic Toast Example

<!-- Trigger Button -->
<a class="btn" onclick="M.toast({html: 'Hello, this is a toast!'});">Show Toast</a>

এখানে:

• M.toast() ফাংশন ব্যবহার করা হয়েছে যেটি Materialize এর Toast তৈরি করে।
• {html: 'Hello, this is a toast!'}: এখানে html এর মাধ্যমে আপনি টোস্টে প্রদর্শিত টেক্সট বা কনটেন্ট নির্ধারণ করতে পারেন।

২. Custom Toast Duration

আপনি টোস্টের duration (সময়কাল) কাস্টমাইজ করতে পারেন, অর্থাৎ কত সময়ের জন্য টোস্ট প্রদর্শিত হবে।

<a class="btn" onclick="M.toast({html: 'This is a toast with custom duration', displayLength: 3000});">Show Toast</a>

এখানে:

• displayLength: এখানে 3000 মিসেকন্ডের জন্য টোস্ট প্রদর্শিত হবে। এটি 5000 বা অন্য যেকোনো মান হতে পারে।

৩. Custom Toast Position

Materialize CSS এর টোস্টের অবস্থান কাস্টমাইজ করা যায়। আপনি টোস্টকে স্ক্রীনের উপরে, নীচে বা মাঝখানে প্রদর্শন করতে পারেন।

<a class="btn" onclick="M.toast({html: 'This toast is at the top!', classes: 'rounded', position: 'top'});">Show Toast Top</a>
<a class="btn" onclick="M.toast({html: 'This toast is at the bottom!', position: 'bottom'});">Show Toast Bottom</a>

এখানে:

• position: টোস্টটি স্ক্রীনের কোথায় প্রদর্শিত হবে তা নির্ধারণ করে। আপনি top, bottom, বা center ব্যবহার করতে পারেন।

৪. Toast with Icon

Materialize CSS টোস্টের সাথে আপনি icon যোগ করতে পারেন, যা টোস্টকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।

<a class="btn" onclick="M.toast({html: '<i class="material-icons left">check_circle</i> Action Completed', classes: 'green'});">Show Toast with Icon</a>

এখানে:

• <i class="material-icons left">check_circle</i> আইকন যোগ করা হয়েছে যা টোস্টের মধ্যে দেখাবে।
• classes: এই ক্লাসটি টোস্টের রঙ পরিবর্তন করে (যেমন green, red ইত্যাদি)।

Event Handling

Event Handling হল ইউজার ইন্টারঅ্যাকশনের উপর ভিত্তি করে কার্যকলাপ পরিচালনা করার প্রক্রিয়া। Materialize CSS এ বিভিন্ন ইভেন্ট হ্যান্ডলার সরবরাহ করা হয়, যেমন click, hover, focus ইত্যাদি, যা ওয়েবপেজে ইন্টারঅ্যাকটিভিটি তৈরি করতে সহায়তা করে।

১. Basic Event Handling Example

Materialize CSS এর event handling ব্যবহার করতে হলে আপনি JavaScript এর সাথে ইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন।

<button class="btn" id="btn">Click me</button>

<script>
  document.getElementById('btn').addEventListener('click', function() {
    M.toast({html: 'Button Clicked!'});
  });
</script>

এখানে:

• addEventListener: এটি ইউজারের ক্লিক ইভেন্ট ক্যাচ করে এবং নির্দিষ্ট কার্যকলাপ (এখানে টোস্ট দেখানো) সম্পাদন করে।
• M.toast(): এটি ক্লিকের পর একটি টোস্ট তৈরি করে।

২. Hover Event Example

Materialize CSS এ hover ইভেন্ট ব্যবহার করেও আপনি কোনো ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেমন:

<div class="card hoverable" id="hover-card">
  <div class="card-content">
    <p>Hover over me to see the effect!</p>
  </div>
</div>

<script>
  document.getElementById('hover-card').addEventListener('mouseenter', function() {
    M.toast({html: 'You hovered over the card!', position: 'top'});
  });
</script>

এখানে:

• mouseenter ইভেন্ট ব্যবহার করা হয়েছে যা যখন ইউজার কার্ডের উপর মাউস রাখবে, তখন টোস্ট দেখাবে।

৩. Focus Event Example

ফর্ম উপাদানগুলোর জন্য focus ইভেন্ট ব্যবহার করা যায়, যেমন টেক্সট ইনপুট ফিল্ডে ক্লিক করলে একটি টোস্ট প্রদর্শিত হবে।

<input type="text" id="username" placeholder="Enter username">

<script>
  document.getElementById('username').addEventListener('focus', function() {
    M.toast({html: 'Input field is focused!'});
  });
</script>

এখানে:

• focus ইভেন্টটি যখন ইনপুট ফিল্ডে ক্লিক করা হবে, তখন এটি টোস্ট প্রদর্শন করবে।

৪. Multiple Events with Delegation

আপনি একই ইভেন্টের জন্য একাধিক হ্যান্ডলার যোগ করতে পারেন এবং event delegation ব্যবহার করে এটি আরও কার্যকরী করতে পারেন। উদাহরণস্বরূপ:

<div class="card" id="card1">
  <div class="card-content">Card 1</div>
</div>
<div class="card" id="card2">
  <div class="card-content">Card 2</div>
</div>

<script>
  document.body.addEventListener('click', function(e) {
    if (e.target && e.target.matches('.card')) {
      M.toast({html: e.target.querySelector('.card-content').textContent + ' clicked!'});
    }
  });
</script>

এখানে:

• event delegation ব্যবহার করা হয়েছে যাতে card এলিমেন্টগুলিতে ক্লিক করার সাথে সাথে একটি টোস্ট প্রদর্শিত হয়, এবং কোডটি আরও সংক্ষিপ্ত এবং কার্যকরী হয়ে ওঠে।

উপসংহার

Materialize CSS এর Custom Toasts এবং Event Handling আপনাকে আপনার ওয়েবপেজে ইন্টারঅ্যাকটিভ এবং ডাইনামিক ফিচার যুক্ত করতে সহায়তা করে। Toasts ব্যবহার করে আপনি সহজেই ছোট নোটিফিকেশন বা মেসেজ প্রদর্শন করতে পারেন এবং event handling ব্যবহার করে আপনি ইউজার ইন্টারঅ্যাকশনের ওপর ভিত্তি করে কার্যকলাপ পরিচালনা করতে পারেন। এগুলো আপনাকে ইউজারের অভিজ্ঞতা উন্নত করতে এবং ওয়েবসাইটে প্রয়োজনীয় ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।