Material Design Lite (MDL) আপনাকে ওয়েবসাইটের নেভিগেশন তৈরি করার জন্য অনেক সুবিধা প্রদান করে। এর মধ্যে একটি জনপ্রিয় উপাদান হল Tab Navigation। Tab Navigation এমন একটি নেভিগেশন স্টাইল যা বিভিন্ন কন্টেন্টকে পৃথক ট্যাবের মধ্যে ভাগ করে। এটি খুবই কার্যকরী যখন আপনি একটি পেইজে একাধিক কন্টেন্ট সেকশন প্রদর্শন করতে চান এবং ব্যবহারকারীদের সহজে ঐ সেকশনগুলোতে নেভিগেট করতে সহায়তা করতে চান।
MDL এর মাধ্যমে Tab Navigation তৈরি করা সহজ এবং এটি খুবই responsive এবং customizable। এই টিউটোরিয়ালে, আমরা MDL এর Tab Navigation ব্যবস্থাপনা এবং কাস্টম স্টাইলিং কিভাবে করতে হয় তা দেখব।
MDL Tab Navigation: বেসিক কাঠামো
MDL-এ Tab Navigation তৈরি করতে, আপনি mdl-tabs এবং mdl-tabs__tab ক্লাস ব্যবহার করতে পারেন। ট্যাবগুলি সাধারণত একটি ট্যাব বার হিসেবে উপস্থাপিত হয় এবং এটি বিভিন্ন কন্টেন্ট সেকশনকে আলাদা করে।
উদাহরণ: বেসিক Tab Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Tab Navigation</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 Navigation -->
<div class="mdl-layout__content">
<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 content for Tab 1.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<h4>Tab 2 Content</h4>
<p>This is content for Tab 2.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<h4>Tab 3 Content</h4>
<p>This is content for Tab 3.</p>
</div>
</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: এটি Tab Navigation তৈরি করতে ব্যবহৃত মূল ক্লাস।
- mdl-tabs__tab-bar: এটি ট্যাব বার তৈরি করে, যেখানে প্রতিটি ট্যাব অবস্থান করে।
- mdl-tabs__tab: ট্যাবের জন্য ব্যবহৃত ক্লাস।
- mdl-tabs__panel: প্রতিটি ট্যাবের কন্টেন্ট প্যানেল।
এখানে, "Tab 1", "Tab 2", এবং "Tab 3" ক্লিক করলে সংশ্লিষ্ট কন্টেন্ট দেখানো হবে।
MDL Tab Navigation এর জন্য Custom Styles
MDL Tab Navigation কে কাস্টমাইজ করে আপনার প্রয়োজন অনুযায়ী ডিজাইন তৈরি করা সম্ভব। আপনি ট্যাবের ব্যাকগ্রাউন্ড রঙ, ফন্ট সাইজ, হোভার ইফেক্ট, ট্যাব অ্যাক্টিভ স্টেট, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারবেন।
উদাহরণ: Custom Styles for Tab Navigation
<style>
/* ট্যাব বার কাস্টমাইজেশন */
.mdl-tabs__tab-bar {
background-color: #2196F3; /* ট্যাব বার রঙ পরিবর্তন */
padding: 10px;
border-radius: 4px;
}
/* ট্যাব আইটেমের কাস্টম স্টাইল */
.mdl-tabs__tab {
font-size: 16px;
color: #fff;
padding: 12px;
text-transform: uppercase;
}
/* ট্যাব আইটেম হোভার ইফেক্ট */
.mdl-tabs__tab:hover {
background-color: #1976D2; /* হোভার করলে রঙ পরিবর্তন */
}
/* সক্রিয় ট্যাবের জন্য কাস্টম স্টাইল */
.mdl-tabs__tab.is-active {
background-color: #FF9800; /* সক্রিয় ট্যাবের জন্য ব্যাকগ্রাউন্ড রঙ */
color: #fff;
}
/* ট্যাব কন্টেন্ট প্যানেল কাস্টমাইজেশন */
.mdl-tabs__panel {
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}
</style>
ব্যাখ্যা:
- mdl-tabs__tab-bar: ট্যাব বারটির ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে এবং প্যাডিং ও বর্ডার রেডিয়াস যোগ করা হয়েছে।
- mdl-tabs__tab: প্রতিটি ট্যাবের ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
- mdl-tabs__tab.is-active: সক্রিয় ট্যাবের জন্য আলাদা রঙ নির্ধারণ করা হয়েছে, যা ট্যাবের সাথে সংযুক্ত কন্টেন্ট প্যানেলকে স্পষ্টভাবে চিহ্নিত করবে।
- mdl-tabs__panel: ট্যাব কন্টেন্ট প্যানেলের জন্য প্যাডিং এবং ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।
MDL Tab Navigation এর জন্য রেসপন্সিভ ডিজাইন
MDL Tab Navigation ব্যবহার করে আপনি একটি রেসপন্সিভ নেভিগেশন ব্যবস্থা তৈরি করতে পারেন যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে কাজ করবে।
উদাহরণ: রেসপন্সিভ Tab Navigation
<style>
/* ট্যাব এবং কন্টেন্টের জন্য রেসপন্সিভ ডিজাইন */
@media (max-width: 600px) {
.mdl-tabs__tab-bar {
display: block; /* ট্যাব বারকে ব্লক হিসেবে ডিসপ্লে করুন */
text-align: center;
}
.mdl-tabs__tab {
font-size: 14px;
padding: 10px;
}
.mdl-tabs__panel {
padding: 15px;
}
}
</style>
এখানে:
- @media কুয়েরি ব্যবহার করে আমরা ট্যাব নেভিগেশন এবং কন্টেন্ট প্যানেলের ডিজাইন মোবাইল ডিভাইসের জন্য কাস্টমাইজ করেছি।
- display: block এবং text-align: center ব্যবহার করে আমরা ট্যাব বারটি সেন্টারে রাখি, যাতে মোবাইল স্ক্রীনে সুন্দরভাবে প্রদর্শিত হয়।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে আপনি সহজেই Tab Navigation তৈরি করতে পারেন এবং কাস্টম স্টাইল প্রয়োগ করতে পারেন। MDL এর মাধ্যমে আপনি রেসপন্সিভ, কাস্টমাইজড এবং আকর্ষণীয় ট্যাব নেভিগেশন সিস্টেম তৈরি করতে পারবেন। আপনি ট্যাবের ব্যাকগ্রাউন্ড রঙ, হোভার ইফেক্ট, ফন্ট সাইজ, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারবেন। এর সাথে, media queries ব্যবহার করে আপনি ট্যাব নেভিগেশনকে মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য রেসপন্সিভ করতে পারবেন। MDL-এ Tab Navigation এর জন্য কাস্টম স্টাইলিং আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও সুন্দর এবং কার্যকরী করে তোলে।
Read more
