MDL এর অ্যাডভান্সড Components

মেটেরিয়াল ডিজাইন লাইট (Material Design Lite) - Web Development

269

Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি হালকা ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। MDL মূলত ওয়েব পেজের ইউজার ইন্টারফেস ডিজাইন এবং ইন্টারঅ্যাকশনগুলির জন্য প্রস্তুত স্টাইলস এবং স্ক্রিপ্ট সরবরাহ করে। MDL-এ কিছু অ্যাডভান্সড কম্পোনেন্ট রয়েছে, যেগুলো ওয়েব ডিজাইন এবং ডেভেলপমেন্টে আরো বেশি ফাংশনালিটি এবং ইন্টারঅ্যাকশন যোগ করে।

এই টিউটোরিয়ালে, আমরা MDL এর কিছু অ্যাডভান্সড কম্পোনেন্ট যেমন Dialog, Snackbar, Floating Action Button (FAB), Tooltips, এবং Progress Indicators ব্যবহার করার পদ্ধতি এবং তাদের কাস্টমাইজেশন দেখব।

MDL Dialog

MDL এর Dialog কম্পোনেন্ট হল একটি মডাল উইন্ডো যা পপ-আপ হিসেবে ব্যবহারকারীর কাছে কোনো মেসেজ বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত পপ-আপ বার্তা, কনফার্মেশন পপ-আপ অথবা অন্য কোনো ইন্টারঅ্যাকশন দেখানোর জন্য ব্যবহার করা হয়।

উদাহরণ: MDL Dialog

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Dialog</title>
  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Trigger Button -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="showDialog">
    Show Dialog
  </button>

  <!-- Dialog Box -->
  <dialog class="mdl-dialog" id="myDialog">
    <h4 class="mdl-dialog__title">Dialog Title</h4>
    <div class="mdl-dialog__content">
      <p>This is a sample dialog box.</p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button mdl-js-button mdl-button--raised" id="closeDialog">Close</button>
    </div>
  </dialog>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    var dialog = document.querySelector('#myDialog');
    var showDialogButton = document.querySelector('#showDialog');
    var closeDialogButton = document.querySelector('#closeDialog');

    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });

    closeDialogButton.addEventListener('click', function() {
      dialog.close();
    });
  </script>

</body>
</html>

ব্যাখ্যা:

mdl-dialog: এটি MDL এর Dialog কম্পোনেন্ট। এটি একটি পপ-আপ উইন্ডো তৈরি করে।
showModal() এবং close(): এই JavaScript ফাংশনগুলো ডায়ালগ বক্স প্রদর্শন এবং বন্ধ করার জন্য ব্যবহৃত হয়।

এটি একটি সিম্পল ডায়ালগ বক্স তৈরি করবে, যা Show Dialog বাটনে ক্লিক করলে প্রদর্শিত হবে এবং Close বাটনে ক্লিক করলে বন্ধ হবে।

MDL Snackbar

MDL এর Snackbar কম্পোনেন্ট একটি ছোট বার্তা প্রদর্শন করতে ব্যবহৃত হয়, যা সাধারণত কোনো অ্যাকশন সম্পন্ন হওয়ার পরে ইনফরমেশন বা স্ট্যাটাস বার্তা প্রদান করে। এটি সাধারণত সাফল্য বা ত্রুটির বার্তা দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ: MDL 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</title>
  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Trigger Button -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="showSnackbar">
    Show Snackbar
  </button>

  <!-- Snackbar -->
  <div id="snackbar" class="mdl-snackbar">
    <span class="mdl-snackbar__text">This is a snackbar message!</span>
    <button class="mdl-snackbar__action" type="button">UNDO</button>
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    var snackbarContainer = document.querySelector('#snackbar');
    var showSnackbarButton = document.querySelector('#showSnackbar');

    showSnackbarButton.addEventListener('click', function() {
      snackbarContainer.MaterialSnackbar.showSnackbar({
        message: 'Snackbar message displayed!',
        timeout: 3000 // Automatically hide after 3 seconds
      });
    });
  </script>

</body>
</html>

ব্যাখ্যা:

mdl-snackbar: এটি MDL এর Snackbar কম্পোনেন্ট। এটি একটি ছোট বার্তা প্রদর্শন করে।
MaterialSnackbar.showSnackbar(): এটি Snackbar বার্তা প্রদর্শন করতে ব্যবহৃত MDL JavaScript ফাংশন।

এটি একটি স্ন্যাকবার তৈরি করবে যা Show Snackbar বাটনে ক্লিক করলে প্রদর্শিত হবে এবং 3 সেকেন্ড পরে স্বয়ংক্রিয়ভাবে লুকাবে।

MDL Floating Action Button (FAB)

Floating Action Button (FAB) হল একটি বৃত্তাকার বাটন যা সাধারণত একটি মূল অ্যাকশন প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত স্ক্রীনের নিচে ফ্লোটিং অবস্থায় থাকে এবং ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে সাহায্য করে।

উদাহরণ: MDL FAB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Floating Action Button</title>
  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Floating Action Button -->
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect" id="fab">
    <i class="material-icons">add</i>
  </button>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>

ব্যাখ্যা:

mdl-button--fab: এটি FAB বাটন তৈরি করার জন্য ব্যবহৃত ক্লাস।
mdl-button--colored: এটি FAB বাটনটির রঙ পরিবর্তন করতে ব্যবহৃত ক্লাস।
material-icons: এটি গুগলের Material Icons ব্যবহার করে আইকন যোগ করে।

এটি একটি Floating Action Button (FAB) তৈরি করবে যা স্ক্রীনের নিচে ফ্লোট করবে এবং ক্লিক করলে কোনো অ্যাকশন নিতে সাহায্য করবে।

MDL Tooltip

Tooltip একটি ছোট বার্তা যা সাধারণত উপাদানের উপর মাউস হোভার করলে প্রদর্শিত হয়। এটি ব্যবহারকারীদেরকে সঠিক নির্দেশনা বা তথ্য প্রদান করতে সাহায্য করে।

উদাহরণ: MDL Tooltip

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Tooltip</title>
  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Button with Tooltip -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-mdl-for="tooltip" id="showTooltip">
    Hover over me
  </button>

  <div class="mdl-tooltip" for="tooltip">
    This is a Tooltip!
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>

ব্যাখ্যা:

mdl-tooltip: এটি MDL এর Tooltip কম্পোনেন্ট। এটি একটি ছোট বার্তা প্রদর্শন করে যা একটি নির্দিষ্ট উপাদান (যেমন বাটন) এর উপর মাউস হোভার করলে প্রদর্শিত হয়।
data-mdl-for: এটি Tooltip কে নির্দিষ্ট উপাদানটির সাথে যুক্ত করে।

এটি একটি সিম্পল Tooltip তৈরি করবে, যা বাটনের উপর মাউস হোভার করলে দেখা যাবে।

MDL অ্যাডভান্সড কম্পোনেন্টস এর সুবিধা

ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ডিজাইন: MDL এর অ্যাডভান্সড কম্পোনেন্টগুলি ওয়েবসাইটের ইন্টারফেসকে আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
সহজ কাস্টমাইজেশন: MDL এর কম্পোনেন্টগুলোর স্টাইল সহজে কাস্টমাইজ করা যায় CSS বা JavaScript ব্যবহার করে।
রেসপন্সিভ: MDL কম্পোনেন্টগুলো রেসপন্সিভ ডিজাইন সমর্থন করে, অর্থাৎ মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়।
ফাংশনালিটি বৃদ্ধি: MDL এর অ্যাডভান্সড কম্পোনেন্টগুলি আপনার ওয়েবসাইটের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

সারাংশ

Material Design Lite (MDL) এর Advanced Components ব্যবহার করে আপনি সহজেই আপনার ওয়েব পেজে Dialog, Snackbar, Floating Action Button, Tooltip, এবং Progress Indicators যোগ করতে পারেন। এগুলি আপনার ওয়েব পেজে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী ফিচার যোগ করবে। MDL কম্পোনেন্টগুলো কাস্টমাইজ করা সহজ এবং সেগুলি আপনার ডিজাইনের সাথে মানানসই করে তৈরি করা যায়। MDL এর এই কম্পোনেন্টগুলো ব্যবহার করে আপনি একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Advanced Components (Tooltips, Snackbar, Slider) ব্যবহার

313

Material Design Lite (MDL) একটি হালকা এবং সহজ ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL বিভিন্ন ধরনের advanced components প্রদান করে যা আপনাকে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা MDL এর Tooltips, Snackbar, এবং Slider কম্পোনেন্টগুলোর ব্যবহার এবং কাস্টমাইজেশন দেখব।

Tooltips ব্যবহারের মাধ্যমে ইউজার এক্সপেরিয়েন্স উন্নত করা

Tooltips হল ছোট ধরনের টেক্সট বা নির্দেশনা যা ব্যবহারকারীদের সাহায্য করার জন্য একটি UI উপাদানে হোভার করলে প্রদর্শিত হয়। MDL-এ Tooltips ব্যবহার করে আপনি আপনার ওয়েব পেজে বিভিন্ন উপাদানের উপর সহায়ক টেক্সট প্রদান করতে পারেন।

Tooltips এর বেসিক ব্যবহার

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Tooltips</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Tooltip Example -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-mdl-for="tooltip1">
    Hover me
  </button>

  <!-- Tooltip -->
  <div class="mdl-tooltip" for="tooltip1">
    This is a Tooltip
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>

ব্যাখ্যা:

data-mdl-for="tooltip1": এটি বাটনের জন্য টুলটিপ সম্পর্কিত ক্লাস।
mdl-tooltip: এটি MDL এর টুলটিপ কম্পোনেন্ট।
for="tooltip1": এটি টুলটিপটি কোন উপাদানের জন্য (যেমন বাটন) প্রদর্শিত হবে তা নির্দেশ করে।

এটি একটি বাটনে হোভার করলে একটি টুলটিপ প্রদর্শিত হবে।

Tooltips কাস্টমাইজেশন

MDL-এ টুলটিপ কাস্টমাইজ করা খুবই সহজ। আপনি CSS ব্যবহার করে টুলটিপের রঙ, আকার, প্যাডিং, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।

.mdl-tooltip {
  background-color: #ff5722; /* টুলটিপের ব্যাকগ্রাউন্ড রঙ */
  color: white; /* টুলটিপের টেক্সট রঙ */
  border-radius: 4px; /* টুলটিপের কোণ গোলাকার */
}

এটি টুলটিপের ডিজাইন কাস্টমাইজ করবে এবং এটি আরো সুশৃঙ্খল এবং সুন্দর করে তুলবে।

Snackbar কম্পোনেন্ট: অস্থায়ী বার্তা প্রদর্শন

Snackbar হল একটি অস্থায়ী বার্তা প্রদর্শনকারী UI কম্পোনেন্ট, যা সাধারণত কিছু সময়ের জন্য প্রদর্শিত হয় এবং ব্যবহারকারীর কাছে কোনো বার্তা পৌঁছানোর জন্য ব্যবহৃত হয়। 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</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 Trigger -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="showSnackbar()">
    Show Snackbar
  </button>

  <!-- Snackbar -->
  <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
    <span class="mdl-snackbar__text">Message Sent!</span>
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    function showSnackbar() {
      var snackbar = document.querySelector('#snackbar');
      snackbar.MaterialSnackbar.showSnackbar({
        message: 'Your action was successful!',
        timeout: 2000
      });
    }
  </script>
</body>
</html>

ব্যাখ্যা:

mdl-snackbar: এটি MDL এর snackbar কম্পোনেন্ট।
mdl-js-snackbar: এটি snackbar ফাংশনালিটি সক্রিয় করে।
showSnackbar(): এটি JavaScript ফাংশন, যা snackbar প্রদর্শন করতে ব্যবহৃত হয়।

এটি একটি বাটনে ক্লিক করার পর snackbar বার্তা প্রদর্শন করবে এবং কিছু সময় পর অদৃশ্য হয়ে যাবে।

Snackbar কাস্টমাইজেশন

MDL এর Snackbar কাস্টমাইজ করা সহজ। আপনি CSS দিয়ে এর রঙ, সময়, ফন্ট সাইজ, এবং আকার পরিবর্তন করতে পারেন।

.mdl-snackbar {
  background-color: #2196F3; /* Snackbar এর ব্যাকগ্রাউন্ড রঙ */
  color: white; /* Snackbar এর টেক্সট রঙ */
}

এটি snackbar এর রঙ পরিবর্তন করবে এবং টেক্সট সাদা রঙে প্রদর্শিত হবে।

Slider কম্পোনেন্ট: ইন্টারঅ্যাকটিভ স্লাইডার তৈরি করা

Slider একটি ইন্টারঅ্যাকটিভ কম্পোনেন্ট, যা ব্যবহারকারীদের কোনো মান নির্বাচন করতে সহায়তা করে। MDL এর Slider কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজে একটি স্লাইডার তৈরি করতে পারেন।

Slider এর বেসিক ব্যবহার

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Slider</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Slider -->
  <div class="mdl-slider mdl-js-slider" id="slider" min="0" max="100" value="50"></div>
  <p>Selected Value: <span id="sliderValue">50</span></p>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    var slider = document.querySelector('#slider');
    var sliderValue = document.querySelector('#sliderValue');

    slider.addEventListener('input', function() {
      sliderValue.textContent = slider.value;
    });
  </script>
</body>
</html>

ব্যাখ্যা:

mdl-slider: এটি MDL এর স্লাইডার কম্পোনেন্ট। এটি ব্যবহারকারীকে একটি রেঞ্জ থেকে মান নির্বাচন করতে সহায়তা করে।
min, max, value: এই অ্যাট্রিবিউটগুলি স্লাইডারের জন্য মান নির্ধারণ করে।
input ইভেন্ট: যখন স্লাইডার পরিবর্তন হয়, তখন স্লাইডারের মান sliderValue এর মধ্যে দেখানো হবে।

এটি একটি স্লাইডার তৈরি করবে যেখানে ব্যবহারকারী স্লাইডারের মাধ্যমে মান নির্বাচন করতে পারবেন।

Slider কাস্টমাইজেশন

MDL স্লাইডার কম্পোনেন্ট কাস্টমাইজ করা যায় CSS ব্যবহার করে। আপনি স্লাইডারের রঙ, আকার, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারবেন।

.mdl-slider {
  width: 80%; /* স্লাইডারের প্রস্থ পরিবর্তন */
}

.mdl-slider__thumb {
  background-color: #ff5722; /* স্লাইডারের থাম্ব রঙ পরিবর্তন */
}

এটি স্লাইডারের আকার এবং থাম্বের রঙ পরিবর্তন করবে।

সারাংশ

MDL এর Tooltips, Snackbar, এবং Slider কম্পোনেন্টগুলি ব্যবহারকারীদের জন্য একটি উন্নত এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। Tooltips ব্যবহারকারীদের সহায়তা দেয়, Snackbar অস্থায়ী বার্তা প্রদর্শন করে, এবং Slider ব্যবহারকারীদের কোন মান নির্বাচন করতে সহায়তা করে। MDL এই কম্পোনেন্টগুলির জন্য সহজ কাস্টমাইজেশন অপশন প্রদান করে, যার মাধ্যমে আপনি আপনার ডিজাইন এবং ফাংশনালিটি প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।

Content added By

Rezwan Siddiki Tamim

Snackbar এবং Toast Message তৈরি করা

218

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 এর এই কম্পোনেন্টগুলো ওয়েব ডিজাইনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

Content added By

Rezwan Siddiki Tamim

MDL এর Slider Component ব্যবহার এবং কাস্টমাইজ করা

356

Material Design Lite (MDL) একটি সহজ, লাইটওয়েট ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এর Slider Component ব্যবহারকারীদের একটি স্লাইডারে ভ্যালু নির্বাচন করতে সহায়তা করে। এটি সাধারণত প্রোগ্রেস বার, ভলিউম কন্ট্রোল, বা স্কেলযোগ্য কন্টেন্টের জন্য ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL এর Slider Component ব্যবহার করা যায় এবং কাস্টমাইজ করা যায়।

MDL Slider Component কী?

MDL এর Slider Component একটি ইনপুট ফিল্ড যা ব্যবহারকারীদের একটি নির্দিষ্ট ভ্যালু নির্বাচন করতে দেয়। এটি সাধারণত স্লাইডার আকারে উপস্থাপন করা হয়, যেখানে ব্যবহারকারী একটি স্কেল বা প্রোগ্রেসবারের মাধ্যমে একটি মান নির্বাচন করতে পারেন।

MDL Slider Component প্রধানত mdl-slider ক্লাস ব্যবহার করে তৈরি করা হয়।

MDL Slider Component এর সাধারণ কাঠামো

<input type="range" id="slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">

ব্যাখ্যা:

type="range": এটি স্লাইডার ইনপুট টাইপ।
mdl-slider: MDL এর স্লাইডার ক্লাস।
mdl-js-slider: MDL এর স্লাইডার ফাংশনালিটি অ্যাক্টিভ করতে ব্যবহৃত ক্লাস।
min, max: স্লাইডারের সর্বনিম্ন এবং সর্বোচ্চ মান নির্ধারণ করে।
value: স্লাইডারের প্রাথমিক মান সেট করে।
step: স্লাইডারের মান কতটুকু বাড়বে বা কমবে তা নির্ধারণ করে।

MDL Slider Component কাস্টমাইজ করা

MDL এর Slider Component কাস্টমাইজ করা খুব সহজ। আপনি CSS এবং MDL এর ক্লাস ব্যবহার করে এর আকার, রঙ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।

১. Slider এর আকার কাস্টমাইজ করা

.mdl-slider {
  width: 80%; /* স্লাইডারের প্রস্থ বাড়ানো */
  margin: 20px; /* স্লাইডারের চারপাশে মার্জিন যোগ করা */
}

এটি স্লাইডারের প্রস্থ এবং মার্জিন কাস্টমাইজ করবে, যার ফলে এটি বড় বা ছোট হতে পারে এবং চারপাশে জায়গা বাড়ানো যাবে।

২. Slider এর রঙ কাস্টমাইজ করা

.mdl-slider {
  background: #f0f0f0; /* স্লাইডারের পেছনের রঙ পরিবর্তন */
}

.mdl-slider .mdl-slider__thumb {
  background: #4CAF50; /* স্লাইডারের থাম্ব বা হ্যান্ডেল এর রঙ */
}

এটি স্লাইডারের পেছনের রঙ এবং থাম্ব (হ্যান্ডেল) এর রঙ কাস্টমাইজ করবে।

৩. Slider এর স্লাইডিং রেঞ্জ পরিবর্তন

.mdl-slider {
  height: 8px; /* স্লাইডারের উচ্চতা পরিবর্তন */
}

.mdl-slider .mdl-slider__thumb {
  width: 20px;
  height: 20px;
}

এটি স্লাইডারের উচ্চতা এবং থাম্ব (হ্যান্ডেল) এর আকার পরিবর্তন করবে।

MDL Slider এর ব্যবহারকারী অভিজ্ঞতা উন্নত করা

MDL Slider ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে কিছু অতিরিক্ত বৈশিষ্ট্য যোগ করা যেতে পারে।

১. Slider এর ভ্যালু প্রদর্শন

একটি স্লাইডারের ভ্যালু প্রদর্শন করার জন্য, আপনি JavaScript ব্যবহার করতে পারেন, যাতে ব্যবহারকারী স্লাইডারটি সরানোর সময় ভ্যালু রিয়েল-টাইমে দেখানো যায়।

উদাহরণ: Slider Value Display

<input type="range" id="slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">
<span id="slider-value">50</span>

<script>
  var slider = document.getElementById('slider');
  var output = document.getElementById('slider-value');
  output.innerHTML = slider.value; // Display the default slider value

  slider.oninput = function() {
    output.innerHTML = this.value; // Display the slider value as it changes
  }
</script>

এখানে, স্লাইডারের ভ্যালু span এলিমেন্টে প্রদর্শিত হবে। যখন ব্যবহারকারী স্লাইডার সরাবে, তখন তা রিয়েল-টাইমে আপডেট হবে।

২. Slider Value Styling

#slider-value {
  font-size: 18px;
  font-weight: bold;
  color: #4CAF50; /* ভ্যালু টেক্সটের জন্য গা green ় রঙ */
  margin-left: 10px;
}

এটি স্লাইডারের ভ্যালু টেক্সটের স্টাইল কাস্টমাইজ করবে, যেমন ফন্ট সাইজ, ফন্ট ওয়েট, এবং রঙ।

MDL Slider ব্যবহার করে প্রগ্রেস বার তৈরি

MDL এর Slider কম্পোনেন্ট ব্যবহার করে আপনি একটি progress bar তৈরি করতে পারেন, যা ব্যবহারকারীর স্লাইডিং এর অগ্রগতি প্রদর্শন করে।

উদাহরণ: Slider সহ Progress Bar

<input type="range" id="progress-slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">
<div class="mdl-progress mdl-js-progress" id="progress-bar"></div>

<script>
  var progressSlider = document.getElementById('progress-slider');
  var progressBar = document.getElementById('progress-bar');

  progressSlider.oninput = function() {
    progressBar.value = this.value; // Update progress bar with slider value
  }
</script>

এটি একটি স্লাইডার তৈরি করবে যা প্রগ্রেস বারকে নিয়ন্ত্রণ করবে। স্লাইডারটি সরানোর সাথে সাথে প্রগ্রেস বারটি আপডেট হবে।

MDL Slider Component এর সুবিধা

রেসপন্সিভ ডিজাইন: MDL এর স্লাইডার কম্পোনেন্ট রেসপন্সিভ, তাই এটি বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শিত হবে।
সহজ কাস্টমাইজেশন: MDL এর স্লাইডার স্টাইল এবং ফাংশনালিটি সহজেই কাস্টমাইজ করা যায় CSS এবং JavaScript দিয়ে।
ব্যবহারকারী-বান্ধব: স্লাইডার ব্যবহারকারীকে সহজেই একটি মান নির্বাচন করতে দেয় এবং এটি অত্যন্ত ইন্টারঅ্যাকটিভ।
প্রগ্রেস বার তৈরি করা: স্লাইডার ব্যবহার করে প্রগ্রেস বার তৈরি করা যেতে পারে, যা ওয়েব পেজের বিভিন্ন কার্যক্রমের অগ্রগতি প্রদর্শন করে।

সারাংশ

Material Design Lite (MDL) এর Slider Component ব্যবহার করে আপনি ওয়েব পেজে স্লাইডার তৈরি করতে পারেন, যা ব্যবহারকারীকে একটি নির্দিষ্ট মান নির্বাচন করতে সহায়তা করে। MDL স্লাইডার কাস্টমাইজেশন খুব সহজ এবং আপনি CSS ব্যবহার করে স্লাইডারের আকার, রঙ এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। আপনি JavaScript ব্যবহার করে স্লাইডারের মান রিয়েল-টাইমে প্রদর্শনও করতে পারেন। MDL স্লাইডার কম্পোনেন্ট অত্যন্ত ইন্টারঅ্যাকটিভ এবং ব্যবহারে সহজ, যা আপনার ওয়েব পেজের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করে।

Content added By

Rezwan Siddiki Tamim

226

Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা সহজে কাস্টমাইজযোগ্য এবং ইন্টারঅ্যাকটিভ ডিজাইন উপাদান প্রদান করে। Tooltip একটি সাধারণ UI উপাদান যা ব্যবহারকারীকে কোনো আইটেমের উপর হোভার করলে একটি ছোট বার্তা প্রদর্শন করে। MDL-এ টুলটিপগুলি সহজে তৈরি এবং কাস্টমাইজ করা যায়। এই টিউটোরিয়ালে আমরা Advanced Tooltip Styling এবং Positioning নিয়ে আলোচনা করব এবং দেখব কিভাবে MDL এর টুলটিপ কম্পোনেন্টকে উন্নত করা যায়।

MDL Tooltip কী?

Tooltip হল একটি ছোট তথ্যবক্স যা কোনো ইন্টারঅ্যাকটিভ উপাদান (যেমন বাটন, লিঙ্ক বা আইকন) এর উপর মাউস হোভার করলে প্রদর্শিত হয়। এটি ব্যবহারকারীদের সেই উপাদানের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সহায়তা করে। MDL টুলটিপে ব্যবহারকারীকে তথ্য দেওয়ার জন্য এবং টুলটিপের অবস্থান কাস্টমাইজ করার জন্য কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য সরবরাহ করে।

MDL-এ টুলটিপ তৈরি করতে mdl-tooltip ক্লাস ব্যবহার করা হয়। এছাড়া, data-tooltip অ্যাট্রিবিউট ব্যবহার করে টুলটিপের কন্টেন্টও সেট করা যায়।

MDL-এ Basic Tooltip তৈরি করা

MDL ব্যবহার করে একটি সাধারণ টুলটিপ তৈরি করা খুবই সহজ। আপনি mdl-tooltip ক্লাস এবং data-tooltip অ্যাট্রিবিউট ব্যবহার করে এটিকে বাস্তবায়ন করতে পারেন।

উদাহরণ: Basic Tooltip

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-tooltip="Click me to take action">
  Click Me
</button>

<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

data-tooltip: এখানে টুলটিপের কন্টেন্ট নির্ধারণ করা হয়েছে, যা বাটনের উপর মাউস হোভার করার পর প্রদর্শিত হবে।
mdl-tooltip: MDL এর ক্লাস, যা টুলটিপের স্টাইল এবং ফাংশনালিটি নিয়ন্ত্রণ করে।

এটি একটি সাধারণ টুলটিপ তৈরি করবে, যেখানে Click Me বাটনের উপর মাউস হোভার করলে একটি টুলটিপ প্রদর্শিত হবে।

Advanced Tooltip Styling

MDL-এ টুলটিপ স্টাইলিংকে আরও কাস্টমাইজ করা যেতে পারে, যেমন টুলটিপের রঙ, ফন্ট, প্যাডিং, মার্জিন এবং আরও অনেক কিছু। আপনি CSS ব্যবহার করে টুলটিপের লুক এবং ফিল পরিবর্তন করতে পারবেন।

১. টুলটিপের রঙ এবং ব্যাকগ্রাউন্ড পরিবর্তন করা

.mdl-tooltip {
  background-color: #2196F3; /* টুলটিপের ব্যাকগ্রাউন্ড রঙ */
  color: white; /* টুলটিপের টেক্সট রঙ */
  font-size: 14px; /* টুলটিপের ফন্ট সাইজ */
  border-radius: 4px; /* কোণ গোল করা */
  padding: 10px; /* টুলটিপের প্যাডিং */
}

এখানে, আমরা টুলটিপের ব্যাকগ্রাউন্ড রঙ #2196F3 (নীল), টেক্সট রঙ সাদা এবং ফন্ট সাইজ ১৪px সেট করেছি।

২. টুলটিপের শ্যাডো এবং ট্রান্সফর্মেশন

.mdl-tooltip {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* শ্যাডো */
  transform: translateY(10px); /* টুলটিপের অবস্থান সামান্য নিচে করা */
}

এটি টুলটিপের জন্য shadow এবং transform ব্যবহার করে। শ্যাডো টুলটিপকে আরো উঁচু এবং আধুনিক দেখাবে, এবং transform দ্বারা আপনি টুলটিপের অবস্থান সামান্য নিচে সরাতে পারবেন।

৩. ফন্ট স্টাইল কাস্টমাইজ করা

.mdl-tooltip {
  font-family: 'Roboto', sans-serif; /* ফন্ট পরিবর্তন */
  font-weight: bold; /* ফন্টের মোটা স্টাইল */
}

এটি টুলটিপে Roboto ফন্ট এবং bold স্টাইল প্রয়োগ করবে।

Tooltip Positioning কাস্টমাইজেশন

MDL টুলটিপের অবস্থান কাস্টমাইজ করা খুবই সহজ। আপনি টুলটিপের অবস্থানকে top, bottom, left, বা right নির্ধারণ করতে পারেন। এছাড়া, আপনি টুলটিপের পজিশন আরও ভালভাবে কাস্টমাইজ করতে CSS এর positioning প্রোপার্টি ব্যবহার করতে পারেন।

১. টুলটিপের পজিশন পরিবর্তন করা

MDL টুলটিপে ডিফল্টভাবে top পজিশন থাকে, তবে আপনি সহজেই টুলটিপের অবস্থান পরিবর্তন করতে পারেন।

উদাহরণ: টুলটিপের পজিশন টপ থেকে বটমে পরিবর্তন করা

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-tooltip="Click me to take action" data-tooltip-position="bottom">
  Click Me
</button>

এখানে, data-tooltip-position="bottom" ব্যবহার করা হয়েছে, যাতে টুলটিপটি বাটনের নিচে প্রদর্শিত হয়।

২. টুলটিপের পজিশন কাস্টমাইজ করা (CSS ব্যবহার)

.mdl-tooltip {
  position: absolute;
  bottom: 10px; /* টুলটিপকে বাটনের নিচে ১০px অবস্থানে সরানো */
  left: 50%; /* টুলটিপকে বাটনের মধ্যভাগে সেন্টার করা */
  transform: translateX(-50%); /* সঠিকভাবে সেন্টার করার জন্য */
}

এখানে, position: absolute ব্যবহার করা হয়েছে, যাতে টুলটিপটি bottombar বা top থেকে কাস্টমাইজ করা যায়।

Tooltip Visibility Control

MDL টুলটিপ সাধারণত মাউস হোভার করার পরই প্রদর্শিত হয়, তবে আপনি চাইলে জাভাস্ক্রিপ্ট ব্যবহার করে টুলটিপের দৃশ্যমানতা (visibility) কন্ট্রোল করতে পারেন।

১. JavaScript দিয়ে Tooltip Visibility Control

document.querySelector('.mdl-button').addEventListener('mouseover', function() {
  const tooltip = document.querySelector('.mdl-tooltip');
  tooltip.classList.add('is-visible'); // টুলটিপ দেখানোর জন্য
});

document.querySelector('.mdl-button').addEventListener('mouseout', function() {
  const tooltip = document.querySelector('.mdl-tooltip');
  tooltip.classList.remove('is-visible'); // টুলটিপ লুকানোর জন্য
});

এখানে, mouseover এবং mouseout ইভেন্ট ব্যবহার করে টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করা হয়েছে।

সারাংশ

MDL-এ Tooltip একটি শক্তিশালী কম্পোনেন্ট, যা ব্যবহারকারীদের উপাদানের সঙ্গে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সাহায্য করে। MDL ব্যবহার করে আপনি টুলটিপের styling এবং positioning কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার, শ্যাডো, পজিশন, এবং আরও অনেক কিছু। এছাড়া, আপনি JavaScript দিয়ে টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। Tooltip positioning এবং advanced styling ব্যবহার করে আপনি টুলটিপকে আপনার ওয়েবসাইটের ডিজাইনের সাথে মানানসই করতে পারবেন এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Material Design Lite (MDL) পরিচিতি Material Design Lite সেটআপ এবং ইনস্টলেশন MDL এর গ্রিড সিস্টেম টিপোগ্রাফি (Typography) এবং রঙ (Color) ব্যবস্থাপনা MDL এর বাটন (Button) এবং আইকন (Icon) ব্যবস্থাপনা

MDL এর অ্যাডভান্সড Components

MDL Dialog

উদাহরণ: MDL Dialog

ব্যাখ্যা:

MDL Snackbar

উদাহরণ: MDL Snackbar

ব্যাখ্যা:

MDL Floating Action Button (FAB)

উদাহরণ: MDL FAB

ব্যাখ্যা:

MDL Tooltip

উদাহরণ: MDL Tooltip

ব্যাখ্যা:

MDL অ্যাডভান্সড কম্পোনেন্টস এর সুবিধা

সারাংশ

Advanced Components (Tooltips, Snackbar, Slider) ব্যবহার

Tooltips ব্যবহারের মাধ্যমে ইউজার এক্সপেরিয়েন্স উন্নত করা

Tooltips এর বেসিক ব্যবহার

ব্যাখ্যা:

Tooltips কাস্টমাইজেশন

Snackbar কম্পোনেন্ট: অস্থায়ী বার্তা প্রদর্শন

Snackbar এর বেসিক ব্যবহার

ব্যাখ্যা:

Snackbar কাস্টমাইজেশন

Slider কম্পোনেন্ট: ইন্টারঅ্যাকটিভ স্লাইডার তৈরি করা

Slider এর বেসিক ব্যবহার

ব্যাখ্যা:

Slider কাস্টমাইজেশন

সারাংশ

Snackbar এবং Toast Message তৈরি করা

Snackbar এবং Toast Message কি?

MDL এর Snackbar তৈরি করা

উদাহরণ: Snackbar

ব্যাখ্যা:

MDL Toast Message তৈরি করা

উদাহরণ: Toast Message

ব্যাখ্যা:

Snackbar এবং Toast Message কাস্টমাইজেশন

১. Snackbar এর রঙ কাস্টমাইজ করা

২. Snackbar এর টাইম আউট কাস্টমাইজ করা

সারাংশ

MDL এর Slider Component ব্যবহার এবং কাস্টমাইজ করা

MDL Slider Component কী?

MDL Slider Component এর সাধারণ কাঠামো

ব্যাখ্যা:

MDL Slider Component কাস্টমাইজ করা

১. Slider এর আকার কাস্টমাইজ করা

২. Slider এর রঙ কাস্টমাইজ করা

৩. Slider এর স্লাইডিং রেঞ্জ পরিবর্তন

MDL Slider এর ব্যবহারকারী অভিজ্ঞতা উন্নত করা

১. Slider এর ভ্যালু প্রদর্শন

উদাহরণ: Slider Value Display

২. Slider Value Styling

MDL Slider ব্যবহার করে প্রগ্রেস বার তৈরি

উদাহরণ: Slider সহ Progress Bar

MDL Slider Component এর সুবিধা

সারাংশ

Advanced Tooltip Styling এবং Positioning

MDL Tooltip কী?

MDL-এ Basic Tooltip তৈরি করা

উদাহরণ: Basic Tooltip

ব্যাখ্যা:

Advanced Tooltip Styling

১. টুলটিপের রঙ এবং ব্যাকগ্রাউন্ড পরিবর্তন করা

২. টুলটিপের শ্যাডো এবং ট্রান্সফর্মেশন

৩. ফন্ট স্টাইল কাস্টমাইজ করা

Tooltip Positioning কাস্টমাইজেশন

১. টুলটিপের পজিশন পরিবর্তন করা

উদাহরণ: টুলটিপের পজিশন টপ থেকে বটমে পরিবর্তন করা

২. টুলটিপের পজিশন কাস্টমাইজ করা (CSS ব্যবহার)

Tooltip Visibility Control

১. JavaScript দিয়ে Tooltip Visibility Control

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!