Materialize এর টুলটিপ এবং টোস্টস

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েবসাইটে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব উপাদান যোগ করার জন্য বিভিন্ন ধরনের tooltips (টুলটিপ) এবং toasts (টোস্ট) প্রদান করে। এই দুটি উপাদান ওয়েবসাইটে তথ্য প্রদর্শন করার একটি কার্যকরী উপায় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

Tooltips in Materialize

Tooltips হল ছোট ছোট বার্তা যা ব্যবহারকারীদের ইন্টারঅ্যাকশন বা মাউস হোভার করার সময় প্রদর্শিত হয়। এটি মূলত ব্যবহারকারীদের জন্য একটি সহায়ক টিপস হিসেবে কাজ করে। Materialize CSS-এ টুলটিপ খুবই সহজ এবং দ্রুত ব্যবহারের জন্য প্রস্তুত করা হয়েছে।

Basic Tooltip Example

<a class="btn tooltipped" data-tooltip="I am a tooltip">Hover me</a>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems);
  });
</script>

এখানে:

• tooltipped: এটি টুলটিপের জন্য ক্লাস।
• data-tooltip: এই এট্রিবিউটটি টুলটিপের কন্টেন্ট সরবরাহ করে।
• M.Tooltip.init(elems): এটি টুলটিপ ইফেক্টটি কার্যকরী করতে ব্যবহৃত হয়।

Tooltip Customization

Materialize CSS-এ আপনি tooltip কাস্টমাইজ করতে পারবেন, যেমন ডেলেতে স্লো বা ফাস্ট অ্যানিমেশন, টুলটিপের পজিশন ইত্যাদি।

<a class="btn tooltipped" data-tooltip="This is a custom tooltip" data-position="top" data-delay="50" data-tooltip="Tooltip on top">Hover me</a>

এখানে:

• data-position="top": টুলটিপটি উপরে প্রদর্শিত হবে।
• data-delay="50": টুলটিপটি ৫০ মিলিসেকেন্ড পরে প্রদর্শিত হবে।

এছাড়া, left, right, bottom পজিশনও ব্যবহার করা যেতে পারে।

Toasts in Materialize

Toasts হল ছোট পপ-আপ বার্তা যা সাধারণত অস্থায়ীভাবে প্রদর্শিত হয় এবং ব্যবহারকারীর মনোযোগ আকর্ষণ করতে ব্যবহৃত হয়। এটি বেশিরভাগ ক্ষেত্রে সফলতার মেসেজ বা অ্যালার্ট প্রদর্শনের জন্য ব্যবহৃত হয়। Materialize CSS-এ টোস্ট খুব সহজেই ব্যবহৃত হতে পারে।

Basic Toast Example

<a class="waves-effect waves-light btn" onclick="M.toast({html: 'This is a toast!'})">Show Toast</a>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize toast on button click
  });
</script>

এখানে:

• M.toast({html: 'This is a toast!'}): এটি একটি সাধারণ টোস্ট মেসেজ দেখাবে।
• waves-effect waves-light btn: Materialize এর বাটন স্টাইল ক্লাস।

Toast Customization

Materialize CSS-এ আপনি টোস্ট কাস্টমাইজ করতে পারেন যেমন টেকস্টের অবস্থান, টেকস্টের পটভূমি রঙ এবং অন্যান্য বৈশিষ্ট্য।

<a class="waves-effect waves-light btn" onclick="M.toast({html: 'Toast message', classes: 'rounded'})">Show Toast</a>

এখানে:

• classes: 'rounded': এটি টোস্টটির কোণ গোলাকার করবে।
• position: আপনি টোস্টের অবস্থান পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, 'top-right' ব্যবহার করে টোস্টটি স্ক্রীনের উপরের ডানদিকে প্রদর্শিত হবে।

M.toast({html: 'This is a toast!', classes: 'rounded', displayLength: 3000, position: 'top-right'})

এখানে:

• displayLength: টোস্ট কত সময় ধরে প্রদর্শিত হবে, মিলিসেকেন্ডে। (এখানে ৩ সেকেন্ড)
• position: টোস্টের অবস্থান নির্ধারণ করে, যেমন 'top-left', 'top-right', 'bottom-left', 'bottom-right'।

উপসংহার

Materialize CSS এর tooltips এবং toasts ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে অত্যন্ত কার্যকরী উপাদান। Tooltips ব্যবহারকারীদের জন্য সোজাসাপ্টা সহায়তা প্রদান করে, যখন তারা মাউস হোভার বা কিপিংয়ের মাধ্যমে কোন একটি বাটন বা আইটেমের ওপর যেতে পারেন। আর toasts ব্যবহার করে আপনি অস্থায়ী বার্তা প্রদর্শন করতে পারেন, যা কোনও ত্রুটি বা সফলতার নির্দেশনা প্রদান করে।

Materialize CSS এর মাধ্যমে আপনি খুব সহজে এই উপাদানগুলো ব্যবহার করতে পারেন এবং আপনার ওয়েবসাইটে সেগুলোকে কাস্টমাইজও করতে পারবেন।

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Tooltip নামক একটি শক্তিশালী ইউজার ইন্টারফেস উপাদান প্রদান করে। Tooltip হল একটি ছোট পপ-আপ বক্স যা একটি আইটেম বা উপাদানের উপর হোভার করলে প্রদর্শিত হয় এবং এর মাধ্যমে আপনি আইটেমটির সম্পর্কে সংক্ষিপ্ত তথ্য প্রদান করতে পারেন। Materialize CSS এ Tooltip খুব সহজেই ব্যবহার করা যায় এবং এটি সম্পূর্ণরূপে কাস্টমাইজযোগ্য।

Tooltip কি?

Tooltip হলো একটি ছোট বক্স বা বুদবুদ যা সাধারণত ইউজার যখন কোনো উপাদানের উপর মাউস রাখে (hover), তখন প্রদর্শিত হয়। এটি সাধারণত প্রাসঙ্গিক তথ্য, নির্দেশনা বা হেল্প টেক্সট হিসেবে ব্যবহৃত হয়।

Materialize CSS এ Tooltip ব্যবহার

Materialize CSS এ Tooltip ব্যবহার করার জন্য কয়েকটি সহজ ধাপ অনুসরণ করতে হয়। এটি ব্যবহার করতে মূলত HTML, CSS, এবং JavaScript এর সমন্বয় প্রয়োজন।

১. Tooltip এর HTML স্ট্রাকচার:

Tooltip তৈরি করতে প্রথমে একটি সাধারণ উপাদান (যেমন একটি বাটন বা লিঙ্ক) নির্বাচন করতে হয় এবং সেই উপাদানের সাথে data-tooltip অ্যাট্রিবিউট যোগ করতে হয়।

<a class="btn tooltipped" data-tooltip="I am a tooltip">Hover me!</a>

এখানে:

• tooltipped ক্লাসটি ব্যবহারকারীকে Tooltip প্রদর্শন করতে সহায়ক।
• data-tooltip অ্যাট্রিবিউটের মাধ্যমে আপনি যে টেক্সটটি Tooltip হিসেবে দেখতে চান তা নির্দিষ্ট করবেন।

২. Tooltip সক্রিয় করা (JavaScript এর মাধ্যমে):

Materialize CSS এ Tooltip চালু করতে আপনাকে JavaScript ব্যবহার করতে হবে। আপনি M.Tooltip.init ফাংশন ব্যবহার করে Tooltip সক্রিয় করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems);
  });
</script>

এখানে, .tooltipped ক্লাসের মাধ্যমে সমস্ত Tooltip উপাদানটি নির্বাচন করা হচ্ছে এবং M.Tooltip.init ফাংশনের মাধ্যমে তা সক্রিয় করা হচ্ছে।

Tooltip কাস্টমাইজ করা

Materialize CSS এর Tooltip কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন অবস্থান, রঙ, সাইজ এবং এনিমেশন। আপনি আপনার প্রয়োজন অনুযায়ী এই বৈশিষ্ট্যগুলিকে পরিবর্তন করতে পারেন।

১. Tooltip এর অবস্থান পরিবর্তন:

Materialize CSS এ Tooltip এর অবস্থান top, right, bottom, অথবা left হতে পারে। আপনি data-position অ্যাট্রিবিউটের মাধ্যমে এই অবস্থান পরিবর্তন করতে পারবেন।

<a class="btn tooltipped" data-tooltip="I am a tooltip" data-position="top">Hover me!</a>

এখানে:

• data-position="top": এটি Tooltip এর অবস্থান শীর্ষে নির্ধারণ করে।

অন্য অবস্থানগুলির জন্য:

• data-position="right"
• data-position="bottom"
• data-position="left"

২. Tooltip এর ধীরগতির এনিমেশন:

Materialize CSS এ আপনি Tooltip এর অ্যানিমেশন স্পিড কাস্টমাইজ করতে পারেন। আপনি data-delay অ্যাট্রিবিউট ব্যবহার করে Tooltip প্রদর্শন হওয়ার আগে কতটুকু সময় দেরি হবে তা নির্ধারণ করতে পারেন।

<a class="btn tooltipped" data-tooltip="I am a tooltip" data-delay="50">Hover me!</a>

এখানে:

• data-delay="50": Tooltip প্রদর্শনের জন্য ৫০ মিলিসেকেন্ড দেরি করবে।

৩. Tooltip এর রঙ পরিবর্তন:

Materialize CSS এ Tooltip এর রঙ পরিবর্তন করা যায়। আপনি class এর মাধ্যমে এই কাস্টমাইজেশন করতে পারবেন। উদাহরণস্বরূপ:

<a class="btn tooltipped red-text" data-tooltip="I am a red tooltip">Hover me!</a>

এখানে:

• red-text: এটি Tooltip টেক্সটের রঙ লাল করবে।

এছাড়া, আপনি background-color এবং text-color এর মতো আরও CSS প্রোপার্টি ব্যবহার করে Tooltip এর স্টাইল কাস্টমাইজ করতে পারেন।

৪. Tooltip এর সাইজ কাস্টমাইজ করা:

Materialize CSS এ Tooltip এর সাইজ কাস্টমাইজ করার জন্য আপনাকে CSS ব্যবহার করতে হবে। আপনি font-size এবং padding প্রোপার্টি পরিবর্তন করে সাইজ বাড়াতে বা কমাতে পারেন।

<style>
  .tooltipped {
    font-size: 18px;
    padding: 10px;
  }
</style>

<a class="btn tooltipped" data-tooltip="I am a larger tooltip">Hover me!</a>

এখানে:

• font-size: Tooltip এর টেক্সট সাইজ বাড়ানো হয়েছে।
• padding: Tooltip এর চারপাশে প্যাডিং বাড়ানো হয়েছে।

Tooltip এর অতিরিক্ত কাস্টমাইজেশন

Materialize CSS এ Tooltip এর অন্যান্য কিছু অতিরিক্ত কাস্টমাইজেশনও করা যায়:

• Arrow Style: Tooltip এর তীরের স্টাইল পরিবর্তন করা যায়।
• Positioning: বিভিন্ন স্ক্রীন সাইজ অনুযায়ী Tooltip এর অবস্থান পরিবর্তন করা যায়।
• Hover/Click Trigger: আপনি Tooltip কে hover এর পরিবর্তে click এর মাধ্যমে trigger করতে পারেন।

<a class="btn tooltipped" data-tooltip="Click me to show tooltip" data-position="right" data-trigger="click">Click me!</a>

এখানে, data-trigger="click" অ্যাট্রিবিউট ব্যবহার করে Tooltip কে click ইভেন্টে trigger করা হয়েছে।

উপসংহার

Materialize CSS এর Tooltip ব্যবহার করে আপনি খুব সহজেই ওয়েবসাইট বা অ্যাপ্লিকেশনে অতিরিক্ত তথ্য, নির্দেশনা, বা সহায়িকা প্রদর্শন করতে পারেন। এটি একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে সাহায্য করে। Tooltip এর অবস্থান, সাইজ, রঙ এবং এনিমেশন সবকিছুর কাস্টমাইজেশন সহজেই করা যায়, যা আপনার ডিজাইনকে আরও প্রফেশনাল এবং ইন্টারঅ্যাকটিভ করে তোলে।

Materialize CSS এর Tooltip একটি জনপ্রিয় এবং কার্যকরী ইউজার ইন্টারফেস উপাদান যা ব্যবহারকারীদের জন্য সহজে কনটেন্ট বা নির্দেশনা প্রদর্শন করতে সাহায্য করে। Tooltip সাধারণত একটি ছোট পপ-আপ টেক্সট হিসেবে প্রদর্শিত হয় যা মূলত কোন বাটন, লিঙ্ক বা আইকনের সাথে সম্পর্কিত থাকে। Materialize CSS এর মাধ্যমে আপনি সহজে tooltip যোগ করতে পারবেন এবং এর animation এবং delay কনফিগার করে আরো কাস্টমাইজ করতে পারবেন।

Tooltip কি?

Tooltip একটি ছোট টেক্সট বক্স যা ইউজারের ইন্টারঅ্যাকশন অনুযায়ী প্রদর্শিত হয়, যেমন মাউস হোভার করা, ক্লিক করা ইত্যাদি। এটি সাধারণত একটি উপাদান বা আইটেমের উপর মাউস হোভার করলে প্রদর্শিত হয় এবং এর মাধ্যমে ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য বা গাইডেন্স প্রদান করা হয়।

Tooltip তৈরি করা

Materialize CSS এ Tooltip তৈরি করতে tooltip ক্লাস ব্যবহার করা হয়। নিচে একটি সাধারণ উদাহরণ দেখানো হলো:

<a class="btn tooltipped" data-tooltip="I am a tooltip" href="#">Hover me!</a>

এখানে:

• tooltipped: এই ক্লাসটি Tooltip এর জন্য প্রয়োজনীয়।
• data-tooltip: এখানে tooltip এর টেক্সট দেওয়া হয়েছে, যা মাউস হোভার করলে প্রদর্শিত হবে।

Tooltip এর জন্য Animation কনফিগার করা

Materialize CSS তে tooltip এর জন্য animation কাস্টমাইজ করা খুবই সহজ। আপনি animation-delay, fade in এবং fade out সহ বিভিন্ন অ্যানিমেশন স্টাইল প্রয়োগ করতে পারেন।

Tooltip Animation উদাহরণ:

<a class="btn tooltipped" data-tooltip="I am a tooltip" data-position="top" data-delay="50" href="#">Hover me!</a>

এখানে:

• data-position: Tooltip এর অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। এটি top, right, bottom, এবং left হতে পারে।
• data-delay: Tooltip প্রদর্শিত হওয়ার আগে সময়ের বিলম্ব (delay) নির্ধারণ করে। এর মান সাধারণত মিলিসেকেন্ডে দেওয়া হয়।

এছাড়া Tooltip এর অ্যানিমেশন এর জন্য CSS ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ:

.tooltip {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

এখানে:

• fadeIn: এটি একটি কাস্টম অ্যানিমেশন তৈরি করে যা টুলটিপের উপস্থিতি ধীরে ধীরে প্রদর্শন করবে।

Tooltip এর Delay কনফিগার করা

Tooltip delay সেট করার মাধ্যমে আপনি কত সময় পর tooltip দেখানো হবে সেটি কনফিগার করতে পারেন। Materialize CSS তে data-delay অ্যাট্রিবিউট ব্যবহার করে এই বিলম্ব সময় নির্ধারণ করা যায়।

Tooltip with Delay:

<a class="btn tooltipped" data-tooltip="This tooltip has a delay" data-delay="1000" href="#">Hover me!</a>

এখানে:

• data-delay="1000": Tooltip এর প্রদর্শন বিলম্ব ১ সেকেন্ড (1000 মিলিসেকেন্ড)।

Tooltip এর জন্য অন্যান্য কনফিগারেশন

Materialize CSS তে Tooltip এর জন্য কিছু অন্যান্য কনফিগারেশনও রয়েছে, যা আপনাকে Tooltip এর আচরণ কাস্টমাইজ করতে সহায়ক হতে পারে।

Tooltip Positioning:

<a class="btn tooltipped" data-tooltip="Tooltip at top" data-position="top" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at right" data-position="right" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at bottom" data-position="bottom" href="#">Hover me!</a>
<a class="btn tooltipped" data-tooltip="Tooltip at left" data-position="left" href="#">Hover me!</a>

এখানে:

• data-position: Tooltip এর অবস্থান পরিবর্তন করতে ব্যবহৃত হয়। এটি top, right, bottom, এবং left হতে পারে।

Tooltip Trigger Options:

Materialize CSS এর tooltip কে mouseenter বা click ইভেন্ট দ্বারা ট্রিগার করা যায়।

<a class="btn tooltipped" data-tooltip="Tooltip on click" data-position="bottom" data-trigger="click" href="#">Click me!</a>

এখানে:

• data-trigger="click": Tooltip টা শুধুমাত্র ক্লিক করার পর প্রদর্শিত হবে।

উপসংহার

Materialize CSS এর Tooltip ব্যবহার করা খুবই সহজ এবং এটি animation এবং delay এর মাধ্যমে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করা যায়। আপনি tooltip এর position, delay, এবং trigger কাস্টমাইজ করে আপনার ওয়েবসাইটে একটি ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় ইন্টারফেস তৈরি করতে পারেন। Tooltip এর মাধ্যমে আপনি অতিরিক্ত তথ্য বা গাইডেন্স প্রদর্শন করতে পারেন, যা ব্যবহারকারীদের জন্য আরো সুবিধাজনক।

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 দ্বারা কাস্টমাইজযোগ্য, যা আপনার প্রয়োজন অনুযায়ী টোস্ট নোটিফিকেশনটি কাস্টমাইজ করতে সাহায্য করে।

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 ব্যবহার করে আপনি ইউজার ইন্টারঅ্যাকশনের ওপর ভিত্তি করে কার্যকলাপ পরিচালনা করতে পারেন। এগুলো আপনাকে ইউজারের অভিজ্ঞতা উন্নত করতে এবং ওয়েবসাইটে প্রয়োজনীয় ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।