Material Design Lite (MDL) একটি অত্যন্ত কার্যকরী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ট্যাব কম্পোনেন্টের মাধ্যমে সহজেই কন্টেন্ট swapping বা পরিবর্তন করতে সহায়তা করে, যা একটি ইন্টারঅ্যাকটিভ ইউজার অভিজ্ঞতা তৈরি করে। ট্যাব ব্যবহারের মাধ্যমে আপনি একটি পৃষ্ঠার মধ্যে বিভিন্ন ধরনের কন্টেন্ট বা তথ্য উপস্থাপন করতে পারেন, যেখানে শুধুমাত্র প্রয়োজনীয় কন্টেন্ট দেখা যায়। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ট্যাব ব্যবহার করে কন্টেন্ট swapping করা যায়।
MDL ট্যাব কম্পোনেন্টের সাথে কন্টেন্ট Swapping
MDL ট্যাব কম্পোনেন্ট ব্যবহার করতে, আপনাকে mdl-tabs, mdl-tabs__tab, এবং mdl-tabs__panel ক্লাসগুলো ব্যবহার করতে হবে। এই ক্লাসগুলোর মাধ্যমে আপনি ট্যাব এবং তাদের সংশ্লিষ্ট কন্টেন্ট প্যানেল তৈরি করতে পারবেন। যখন ব্যবহারকারী ট্যাবে ক্লিক করবেন, তখন সেই ট্যাবের সাথে সম্পর্কিত কন্টেন্ট প্যানেলটি প্রদর্শিত হবে এবং অন্য প্যানেলগুলি লুকানো থাকবে।
ট্যাব এবং কন্টেন্ট swapping এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabs with Content Swapping</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Tabs Navigation -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-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>
<!-- Tab Content -->
<div class="mdl-tabs__panel is-active" id="tab1">
<h4>Content for Tab 1</h4>
<p>This is the content for the first tab. It could be text, images, or other types of content.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<h4>Content for Tab 2</h4>
<p>This is the content for the second tab. You can add anything here as needed.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<h4>Content for Tab 3</h4>
<p>This is the content for the third tab. It can contain various types of content just like the others.</p>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-tabs mdl-js-tabs mdl-js-ripple-effect: এটি ট্যাব কম্পোনেন্টের জন্য প্রধান ক্লাস।
- mdl-tabs__tab-bar: এটি ট্যাবগুলোর জন্য বার তৈরি করবে, যেখানে বিভিন্ন ট্যাবের লিঙ্ক থাকবে।
- mdl-tabs__tab: প্রতিটি ট্যাবের জন্য ব্যবহৃত ক্লাস।
- mdl-tabs__panel: এটি ট্যাবের কন্টেন্ট প্যানেল তৈরি করবে। প্রতিটি প্যানেল একটি নির্দিষ্ট ট্যাবের সাথে যুক্ত থাকবে।
- is-active: এই ক্লাসটি ট্যাব বা প্যানেলকে সক্রিয় (active) বানাতে ব্যবহৃত হয়। প্রথম ট্যাবটি এবং তার সংশ্লিষ্ট কন্টেন্ট প্যানেল সক্রিয় থাকে, এবং ব্যবহারকারী পরবর্তী ট্যাবে ক্লিক করলে সক্রিয় ট্যাব এবং প্যানেল পরিবর্তিত হবে।
ট্যাবের সাথে কন্টেন্ট Swapping এর কার্যকারিতা
- ট্যাব ক্লিক করা হলে কন্টেন্ট পরিবর্তন: যখন ব্যবহারকারী একটি ট্যাবে ক্লিক করেন, তখন তার সাথে সম্পর্কিত কন্টেন্ট প্যানেলটি প্রদর্শিত হবে এবং অন্যান্য প্যানেলগুলি গোপন থাকবে।
- একাধিক কন্টেন্ট ভিউ: ট্যাব ব্যবহারের মাধ্যমে একই পৃষ্ঠায় একাধিক কন্টেন্ট বা তথ্য প্রদর্শন করা সম্ভব হয়, যা ওয়েবসাইটের নেভিগেশনকে আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে।
- স্বচ্ছ অ্যানিমেশন: MDL এ ট্যাবের সাথে একটি স্মুথ অ্যানিমেশন এবং ট্রানজিশন থাকে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো সুন্দর এবং প্রাকৃতিক করে তোলে।
কাস্টমাইজেশন
MDL ট্যাবের কার্যকারিতা কাস্টমাইজ করা খুব সহজ। আপনি CSS বা MDL এর ক্লাস ব্যবহার করে ট্যাব এবং কন্টেন্টের ডিজাইন এবং কার্যকারিতা পরিবর্তন করতে পারেন। কিছু কাস্টমাইজেশন উদাহরণ নিচে দেওয়া হলো:
১. ট্যাবের রঙ কাস্টমাইজ করা
MDL ট্যাবের রঙ পরিবর্তন করতে CSS ব্যবহার করতে পারেন।
.mdl-tabs__tab.is-active {
background-color: #4caf50; /* Active tab color */
}
.mdl-tabs__tab {
background-color: #ffffff; /* Default tab color */
}
এটি ট্যাবগুলোর সক্রিয় অবস্থায় এবং সাধারণ অবস্থায় রঙ পরিবর্তন করবে।
২. ট্যাবের আকার কাস্টমাইজ করা
ট্যাবগুলোর আকার পরিবর্তন করতে, আপনি CSS এ padding, font-size এবং অন্যান্য প্রোপার্টি ব্যবহার করতে পারেন।
.mdl-tabs__tab {
padding: 15px 25px; /* Adjusting padding */
font-size: 18px; /* Increasing font size */
}
এটি ট্যাবের আকার ও স্টাইল পরিবর্তন করবে।
সারাংশ
Material Design Lite (MDL) এর ট্যাব কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কন্টেন্ট swapping বা কন্টেন্ট পরিবর্তন করতে পারেন, যা ওয়েব পেজে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা প্রদান করে। MDL ট্যাবগুলো সিম্পল এবং শক্তিশালী, এবং ব্যবহারকারীরা বিভিন্ন কন্টেন্টের মধ্যে সুইচ করতে সক্ষম হন। MDL ট্যাব কম্পোনেন্ট কাস্টমাইজেশন খুবই সহজ এবং এতে সুন্দর অ্যানিমেশন এবং ট্রানজিশন ফিচার রয়েছে।
Read more
