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