Material Design Lite (MDL) একটি লাইটওয়েট এবং ইউজার-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি। MDL-এর কম্পোনেন্টগুলো সাধারণত CSS এবং HTML এর মাধ্যমে স্ট্যাটিকভাবে কাজ করে, তবে JavaScript ব্যবহার করে আপনি MDL এর কম্পোনেন্টগুলোকে dynamic (ইন্টারঅ্যাকটিভ) করতে পারেন। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে JavaScript ব্যবহার করে MDL কম্পোনেন্টগুলোকে ডায়নামিক করা যায়, যেমন ট্যাবস, মেনু, ডায়ালগ, এবং অন্যান্য কম্পোনেন্ট।
MDL কম্পোনেন্টগুলোর সাথে JavaScript ব্যবহার করা
১. MDL Tabs ডায়নামিকভাবে তৈরি করা
MDL-এ Tabs কম্পোনেন্ট ব্যবহার করে আপনি একটি UI তে কন্টেন্ট বিভিন্ন সেকশনে ভাগ করতে পারেন। JavaScript ব্যবহার করে আপনি Tabs এর মধ্যে কন্টেন্ট পরিবর্তন করতে পারেন।
উদাহরণ: MDL Tabs ডায়নামিকভাবে তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Tabs Dynamic</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- MDL Tabs -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar" id="tabs-bar">
<a href="#tab1" class="mdl-tabs__tab is-active">Tab 1</a>
<a href="#tab2" class="mdl-tabs__tab">Tab 2</a>
<a href="#tab3" class="mdl-tabs__tab">Tab 3</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<h4>Content for Tab 1</h4>
<p>This is the content for the first tab.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<h4>Content for Tab 2</h4>
<p>This is the content for the second tab.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<h4>Content for Tab 3</h4>
<p>This is the content for the third tab.</p>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Dynamically add a new tab and panel
var tabsBar = document.getElementById('tabs-bar');
var newTab = document.createElement('a');
newTab.classList.add('mdl-tabs__tab');
newTab.href = '#tab4';
newTab.innerText = 'Tab 4';
tabsBar.appendChild(newTab);
var newPanel = document.createElement('div');
newPanel.classList.add('mdl-tabs__panel');
newPanel.id = 'tab4';
newPanel.innerHTML = '<h4>Content for Tab 4</h4><p>This is the content for the fourth tab.</p>';
document.querySelector('.mdl-tabs').appendChild(newPanel);
// Initialize MDL components
componentHandler.upgradeDom();
</script>
</body>
</html>
ব্যাখ্যা:
- componentHandler.upgradeDom(): এটি MDL এর JavaScript কোডের মাধ্যমে নতুন কম্পোনেন্ট (যেমন ট্যাব) কে ডাইনামিকভাবে আপডেট করতে ব্যবহৃত হয়।
- document.createElement: এই ফাংশনটি HTML এ নতুন ট্যাব এবং প্যানেল তৈরি করতে ব্যবহৃত হয়।
এখানে JavaScript ব্যবহার করে একটি নতুন Tab এবং তার সম্পর্কিত Tab Panel যোগ করা হয়েছে।
২. MDL Dialog Dynamic Create করা
MDL-এ Dialog (ডায়ালগ) কম্পোনেন্ট ব্যবহার করে আপনি একটি পপ-আপ উইন্ডো তৈরি করতে পারেন, যা ব্যবহারকারীর ইনপুট গ্রহণ করে অথবা কোনো তথ্য প্রদর্শন করতে পারে। আপনি JavaScript ব্যবহার করে Dialog কে ডায়নামিকভাবে ট্রিগার বা কন্ট্রোল করতে পারেন।
উদাহরণ: MDL Dialog Dynamic Create করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Dialog Dynamic</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="showDialogButton">
Open Dialog
</button>
<!-- Dialog -->
<dialog class="mdl-dialog" id="myDialog">
<h4 class="mdl-dialog__title">Dialog Title</h4>
<div class="mdl-dialog__content">
<p>This is a dynamically created dialog.</p>
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="button" id="closeDialogButton">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.getElementById('myDialog');
var showDialogButton = document.getElementById('showDialogButton');
var closeDialogButton = document.getElementById('closeDialogButton');
showDialogButton.addEventListener('click', function() {
dialog.showModal(); // Show dialog
});
closeDialogButton.addEventListener('click', function() {
dialog.close(); // Close dialog
});
// Upgrade MDL components
componentHandler.upgradeDom();
</script>
</body>
</html>
ব্যাখ্যা:
- showModal(): ডায়ালগ উইন্ডো প্রদর্শন করতে ব্যবহৃত ফাংশন।
- close(): ডায়ালগ উইন্ডো বন্ধ করতে ব্যবহৃত ফাংশন।
- componentHandler.upgradeDom(): নতুন ডায়ালগ বা কোনো MDL কম্পোনেন্টের কার্যকারিতা সঠিকভাবে অ্যাক্টিভ করতে ব্যবহৃত হয়।
এখানে JavaScript ব্যবহার করে একটি dynamic dialog তৈরি এবং কন্ট্রোল করা হয়েছে।
৩. MDL Menu Dynamic তৈরি করা
MDL Menu কম্পোনেন্ট ব্যবহার করে আপনি ড্রপডাউন মেনু তৈরি করতে পারেন, যা বিভিন্ন অপশন প্রদর্শন করে। JavaScript ব্যবহার করে আপনি মেনু তৈরি, কাস্টমাইজ এবং ডায়নামিকভাবে কন্ট্রোল করতে পারেন।
উদাহরণ: MDL Menu Dynamic তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Menu Dynamic</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Menu Trigger Button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="menuButton">
Open Menu
</button>
<!-- Menu -->
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left" for="menuButton" id="dynamicMenu">
<li class="mdl-menu__item">Option 1</li>
<li class="mdl-menu__item">Option 2</li>
<li class="mdl-menu__item">Option 3</li>
</ul>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Dynamically create and append menu items
var menu = document.getElementById('dynamicMenu');
var newMenuItem = document.createElement('li');
newMenuItem.classList.add('mdl-menu__item');
newMenuItem.textContent = 'Option 4';
menu.appendChild(newMenuItem);
// Initialize MDL components
componentHandler.upgradeDom();
</script>
</body>
</html>
ব্যাখ্যা:
- mdl-menu: এটি MDL মেনু কম্পোনেন্টের জন্য ব্যবহৃত ক্লাস।
- componentHandler.upgradeDom(): MDL এর নতুন উপাদান এবং কম্পোনেন্টকে সক্রিয় করতে ব্যবহৃত হয়।
এটি JavaScript ব্যবহার করে dynamic menu তৈরি করার একটি উদাহরণ যেখানে নতুন মেনু আইটেম যোগ করা হয়েছে।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে dynamic components তৈরি করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ। JavaScript ব্যবহার করে আপনি MDL এর বিভিন্ন কম্পোনেন্ট যেমন Tabs, Dialogs, এবং Menus ডায়নামিকভাবে তৈরি এবং কাস্টমাইজ করতে পারেন। MDL এর componentHandler.upgradeDom() ব্যবহার করে নতুন কম্পোনেন্টগুলি সক্রিয় করা হয়, যা সিস্টেমের কার্যকারিতা বজায় রাখে। JavaScript এর মাধ্যমে MDL কম্পোনেন্টগুলোর কার্যকারিতা এবং লেআউট আরও উন্নত এবং ইন্টারঅ্যাকটিভ করা যায়, যা ব্যবহারকারীদের একটি উন্নত অভিজ্ঞতা প্রদান করে।
Read more
