Material Design Lite (MDL) এর Tab Component একটি জনপ্রিয় ইউজার ইন্টারফেস কম্পোনেন্ট যা ব্যবহারকারীদের বিভিন্ন কনটেন্টের মধ্যে দ্রুত নেভিগেট করতে সহায়তা করে। ট্যাবগুলি সাধারণত বিভিন্ন সেকশন বা পৃষ্ঠায় বিভক্ত কনটেন্টকে একত্রে প্রদর্শন করতে ব্যবহৃত হয়, যার ফলে ব্যবহারকারীরা কোন একটি নির্দিষ্ট সেকশনে সহজে চলে যেতে পারেন।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL এর Tab Component ব্যবহার করা হয় এবং এটি কিভাবে কার্যকরীভাবে ওয়েব পেজে ইন্টিগ্রেট করা যায়।
MDL এর Tab Component তৈরি
MDL-এর Tab Component তৈরি করার জন্য, আপনি mdl-tabs, mdl-tabs__tab, এবং mdl-tabs__panel ক্লাস ব্যবহার করতে পারবেন। এই কম্পোনেন্টের মধ্যে, প্রতিটি ট্যাব একটি প্যানেল বা কন্টেন্ট অঞ্চলকে রেফারেন্স করে, এবং যখন ব্যবহারকারী একটি ট্যাবে ক্লিক করেন, তখন সংশ্লিষ্ট প্যানেলটি প্রদর্শিত হয়।
উদাহরণ: MDL Tab Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Tabs Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Tab Structure -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<!-- Tabs -->
<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 Panels -->
<div class="mdl-tabs__panel is-active" id="tab1">
<h4>Tab 1 Content</h4>
<p>This is the content for the first tab.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<h4>Tab 2 Content</h4>
<p>This is the content for the second tab.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<h4>Tab 3 Content</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>
</body>
</html>
ব্যাখ্যা:
- mdl-tabs: এটি ট্যাব কম্পোনেন্টের জন্য মূল ক্লাস। এটি সমস্ত ট্যাব এবং তাদের প্যানেলগুলি ধারণ করে।
- mdl-tabs__tab-bar: এই ক্লাসটি ট্যাবগুলির জন্য ব্যবহার করা হয়, যা স্ক্রিনে ট্যাবের নাম বা ট্যাব আইটেমগুলিকে রেন্ডার করে।
- mdl-tabs__tab: প্রতিটি ট্যাবের জন্য ব্যবহৃত ক্লাস। এখানে is-active ক্লাসটি প্রথম ট্যাবটিকে সক্রিয় করে রাখে।
- mdl-tabs__panel: প্রতিটি ট্যাবের সাথে সম্পর্কিত কন্টেন্ট প্যানেল, যা ট্যাব নির্বাচন করা হলে প্রদর্শিত হয়। একসাথে শুধু একটি প্যানেলই সক্রিয় থাকবে, বাকিগুলি লুকানো থাকবে।
কীভাবে কাজ করে:
- Tabs: ট্যাবগুলির মধ্যে ক্লিক করার মাধ্যমে সংশ্লিষ্ট প্যানেল দেখা যাবে।
- Panels: প্রতিটি ট্যাবের নিচে একটি প্যানেল থাকে যা কন্টেন্ট ধারণ করে। যখন একটি ট্যাবে ক্লিক করা হয়, সেই ট্যাবের সাথে সম্পর্কিত প্যানেলটি প্রদর্শিত হয়।
MDL Tabs এর কাস্টমাইজেশন
MDL Tabs-এর ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করা অনেক সহজ। আপনি ট্যাবের স্টাইল, সাইজ, এবং প্যানেল কনটেন্ট কাস্টমাইজ করতে পারেন।
১. ট্যাবের সাইজ পরিবর্তন
MDL Tabs এর সাইজ পরিবর্তন করতে mdl-tabs--small অথবা mdl-tabs--large ক্লাস ব্যবহার করতে পারেন।
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect mdl-tabs--large">
<!-- Tabs here -->
</div>
এটি ট্যাবগুলির সাইজ বড় করে দেবে।
২. ট্যাবের রঙ পরিবর্তন
ট্যাবের রঙ কাস্টমাইজ করার জন্য mdl-tabs__tab ক্লাসে CSS ব্যবহার করা যেতে পারে:
.mdl-tabs__tab {
color: #2196F3; /* ট্যাবের রঙ পরিবর্তন করুন */
}
.mdl-tabs__tab.is-active {
color: #FF5722; /* অ্যাকটিভ ট্যাবের রঙ পরিবর্তন করুন */
}
৩. প্রথম ট্যাব সক্রিয় করা
প্রথম ট্যাবটি সক্রিয় করতে is-active ক্লাস প্রথম ট্যাবে অ্যাড করতে হবে, যেমন:
<a href="#tab1" class="mdl-tabs__tab is-active">Tab 1</a>
এটি প্রথম ট্যাবটি লোড হওয়ার সময় সক্রিয় করে দেবে।
MDL Tabs এর সুবিধা
- সোজাসাপ্টা ডিজাইন: MDL Tabs ব্যবহার করে আপনি খুব সহজে এবং দ্রুত একটি সিম্পল এবং আধুনিক ট্যাব তৈরি করতে পারবেন।
- রেসপন্সিভ ডিজাইন: MDL Tabs রেসপন্সিভ ডিজাইন সমর্থন করে, অর্থাৎ ট্যাবগুলি ডেস্কটপ, ট্যাবলেট এবং মোবাইল স্ক্রীনে সঠিকভাবে প্রদর্শিত হবে।
- সহজ কাস্টমাইজেশন: MDL Tabs-এর স্টাইল খুব সহজে কাস্টমাইজ করা যায়। CSS ব্যবহার করে আপনি ট্যাবের সাইজ, রঙ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারবেন।
- প্যানেল কন্টেন্ট: MDL Tabs প্যানেল কন্টেন্টের মাধ্যমে বিভিন্ন তথ্য বা ফিচারকে একত্রে প্রদর্শন করতে সহায়তা করে।
সারাংশ
MDL Tabs ওয়েব ডিজাইনে খুবই জনপ্রিয় একটি কম্পোনেন্ট, যা ব্যবহারকারীদের মধ্যে দ্রুত নেভিগেশন এবং বিভিন্ন কন্টেন্টের মধ্যে সুগমে চলাচল করতে সাহায্য করে। MDL Tabs ব্যবহারে আপনি সোজাসাপ্টা, আধুনিক এবং রেসপন্সিভ ট্যাব তৈরি করতে পারেন। MDL এর ট্যাব কম্পোনেন্টটি কাস্টমাইজ করা খুবই সহজ এবং এটি একাধিক ট্যাব এবং প্যানেল কন্টেন্ট দেখানোর জন্য ব্যবহার করা হয়।
Read more
