Material Design Lite (MDL) গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। MDL ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের ডিজাইনে সহজ এবং আধুনিক কম্পোনেন্ট যুক্ত করতে সহায়তা করে। এর মধ্যে ট্যাব (Tabs) এবং পেজ কন্টেন্ট (Page Content) ব্যবস্থাপনা খুবই গুরুত্বপূর্ণ। ট্যাব ব্যবস্থাপনা ব্যবহারকারীদের পেজের বিভিন্ন সেকশন বা কন্টেন্টের মধ্যে দ্রুত পরিবর্তন করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা MDL-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা কিভাবে করতে হয়, তা বিস্তারিতভাবে দেখব।
MDL-এ ট্যাব (Tabs) ব্যবস্থাপনা
ট্যাব হল এমন একটি উপাদান যা একটি পেজে বিভিন্ন সেকশন বা কন্টেন্টের মধ্যে সুগম নেভিগেশন প্রদান করে। MDL-এ ট্যাব ব্যবস্থাপনা খুবই সহজ এবং তা ওয়েব পেজের কন্টেন্টকে আরও সুশৃঙ্খলভাবে সাজাতে সাহায্য করে।
MDL-এ ট্যাব তৈরি
MDL-এ ট্যাব তৈরি করতে, আপনাকে mdl-tabs এবং mdl-tabs__tab ক্লাস ব্যবহার করতে হবে। ট্যাব ক্লিক করার মাধ্যমে ব্যবহারকারী বিভিন্ন কন্টেন্ট সেকশনে দ্রুত নেভিগেট করতে পারে।
উদাহরণ:
<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>
<div class="mdl-tabs__panel is-active" id="tab1">
<p>This is content for Tab 1.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>This is content for Tab 2.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>This is content for Tab 3.</p>
</div>
</div>
এখানে:
- mdl-tabs: এটি ট্যাবের বেসিক কাঠামো তৈরি করে।
- mdl-tabs__tab-bar: ট্যাবগুলোর বার তৈরি করে, যেখানে ব্যবহারকারী ট্যাব সিলেক্ট করতে পারেন।
- mdl-tabs__tab: ট্যাবের জন্য ব্যবহৃত ক্লাস। প্রতিটি ট্যাবের জন্য আলাদা লিঙ্ক ব্যবহার করা হয়।
- mdl-tabs__panel: ট্যাবের কন্টেন্ট প্যানেল তৈরি করে, যেখানে প্রতিটি ট্যাবের জন্য আলাদা কন্টেন্ট থাকবে।
এটি একটি সিম্পল ট্যাব সিস্টেম তৈরি করবে যেখানে তিনটি ট্যাব রয়েছে (Tab 1, Tab 2, Tab 3), এবং প্রতিটি ট্যাবের জন্য আলাদা কন্টেন্ট থাকবে।
MDL ট্যাব কাস্টমাইজেশন
MDL-এ ট্যাবগুলোর স্টাইল কাস্টমাইজ করতে, আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
.mdl-tabs__tab {
font-size: 16px;
padding: 10px 20px;
}
.mdl-tabs__panel {
padding: 20px;
background-color: #f1f1f1;
}
এটি ট্যাবগুলোর আকার এবং কন্টেন্ট প্যানেলের প্যাডিং কাস্টমাইজ করবে।
MDL-এ পেজ কন্টেন্ট (Page Content) ব্যবস্থাপনা
MDL-এ পেজ কন্টেন্ট ব্যবস্থাপনা করার জন্য আপনি সহজে ট্যাব এবং প্যানেল ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের জন্য বিভিন্ন কন্টেন্ট সেকশনে দ্রুত নেভিগেট করার সুবিধা প্রদান করে। পেজ কন্টেন্ট সেগমেন্টের মাধ্যমে আপনি আপনার পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে পারবেন।
MDL-এ কন্টেন্ট সেকশন তৈরি
MDL-এ একটি পেজের কন্টেন্টের বিভিন্ন সেকশন তৈরি করতে, আপনি mdl-grid এবং mdl-cell ক্লাস ব্যবহার করতে পারেন, যা আপনার কন্টেন্টকে গ্রিড সিস্টেমে সাজাতে সহায়তা করে।
উদাহরণ:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 1</h2>
</div>
<div class="mdl-card__supporting-text">
This is the first card content.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 2</h2>
</div>
<div class="mdl-card__supporting-text">
This is the second card content.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 3</h2>
</div>
<div class="mdl-card__supporting-text">
This is the third card content.
</div>
</div>
</div>
</div>
এখানে:
- mdl-grid: এটি একটি গ্রিড সিস্টেম তৈরি করে, যেখানে আপনি বিভিন্ন সেকশন বা কন্টেন্টকে সাজাতে পারবেন।
- mdl-cell mdl-cell--4-col: এই ক্লাসটি ব্যবহার করে, প্রতি কন্টেন্ট সেকশনকে ৪ কলাম বরাদ্দ করা হয়েছে।
এটি একটি রেসপন্সিভ গ্রিড তৈরি করবে যেখানে তিনটি কার্ড সেকশন থাকবে।
MDL-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনার সুবিধা
১. ব্যবহারকারী বান্ধব
MDL-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা খুবই ব্যবহারকারী বান্ধব। ট্যাব ব্যবহার করে ব্যবহারকারীরা সহজে পেজের বিভিন্ন সেকশন বা কন্টেন্টের মধ্যে নেভিগেট করতে পারেন।
২. রেসপন্সিভ ডিজাইন
MDL-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা রেসপন্সিভ ডিজাইন সমর্থন করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সব জায়গায় ভালোভাবে প্রদর্শিত হয়।
৩. সহজ কাস্টমাইজেশন
MDL-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা সহজেই কাস্টমাইজ করা যায়। CSS এর মাধ্যমে আপনি ট্যাবের আকার, রঙ, ফন্ট এবং অন্যান্য উপাদান পরিবর্তন করতে পারবেন।
৪. আধুনিক ডিজাইন
MDL-এর ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা খুবই আধুনিক এবং আকর্ষণীয়, যা ব্যবহারকারীদের একটি উন্নত ডিজাইন অভিজ্ঞতা প্রদান করে।
সারাংশ
Material Design Lite (MDL)-এ ট্যাব এবং পেজ কন্টেন্ট ব্যবস্থাপনা খুবই সহজ এবং কার্যকরী। MDL-এ আপনি বিভিন্ন ধরনের ট্যাব তৈরি করতে পারেন, যেগুলো ওয়েব পেজের কন্টেন্টকে সুশৃঙ্খলভাবে সাজাতে এবং ব্যবহারকারীকে দ্রুত নেভিগেট করতে সহায়তা করে। এছাড়া, MDL-এ কন্টেন্ট সেকশন তৈরির জন্য গ্রিড সিস্টেম ব্যবহার করে আপনি আপনার পেজের কন্টেন্টকে সহজে সাজাতে পারবেন। MDL-এ ট্যাব এবং কন্টেন্ট ব্যবস্থাপনা ব্যবহারের মাধ্যমে আপনি একটি আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী বান্ধব ওয়েবসাইট তৈরি করতে পারবেন।
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 এর ট্যাব কম্পোনেন্টটি কাস্টমাইজ করা খুবই সহজ এবং এটি একাধিক ট্যাব এবং প্যানেল কন্টেন্ট দেখানোর জন্য ব্যবহার করা হয়।
Material Design Lite (MDL) একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে, আপনি Dynamic Tabs এবং Nested Tabs খুব সহজেই তৈরি করতে পারেন। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ব্যবহার করে Dynamic Tabs এবং Nested Tabs তৈরি করা যায়।
Dynamic Tabs তৈরি করা
Dynamic Tabs এমন একটি ন্যাভিগেশন সিস্টেম, যেখানে প্রতিটি ট্যাব ক্লিক করলে সংশ্লিষ্ট কন্টেন্ট পরিবর্তিত হয়। MDL-এ Dynamic Tabs তৈরি করার জন্য আপনাকে mdl-tabs, mdl-tabs__tab, এবং mdl-tabs__panel ক্লাস ব্যবহার করতে হবে।
উদাহরণ: Dynamic Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Tabs</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>
<!-- Dynamic Tabs -->
<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>
<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>
</body>
</html>
ব্যাখ্যা:
- mdl-tabs: এটি ট্যাব কম্পোনেন্ট তৈরি করতে ব্যবহৃত ক্লাস।
- mdl-tabs__tab-bar: এটি ট্যাবের জন্য একটি বার তৈরি করে, যেখানে ট্যাবের লিঙ্ক থাকবে।
- mdl-tabs__tab: এই ক্লাসটি প্রতিটি ট্যাব লিঙ্কের জন্য ব্যবহৃত হয়। একটিতে is-active ক্লাস দেওয়া থাকে, যা বর্তমানে নির্বাচিত ট্যাব নির্দেশ করে।
- mdl-tabs__panel: এই ক্লাসটি প্রতিটি ট্যাবের কন্টেন্ট জন্য ব্যবহৃত হয়। একে একে কন্টেন্ট প্যানেল তৈরি করে, যা ট্যাবের সাথে সম্পর্কিত থাকে।
এটি একটি Dynamic Tab তৈরি করবে, যেখানে প্রথমে Tab 1 নির্বাচন করা থাকবে এবং কন্টেন্ট ট্যাব অনুসারে পরিবর্তিত হবে।
Nested Tabs তৈরি করা
Nested Tabs হল এমন একটি ট্যাব সিস্টেম, যেখানে একটি ট্যাবের মধ্যে আরো ট্যাব থাকতে পারে। MDL ব্যবহার করে Nested Tabs তৈরি করা খুবই সহজ। এটি মূলত একটি ট্যাব প্যানেল এ আরেকটি ট্যাব সিস্টেম অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়।
উদাহরণ: Nested Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Tabs</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>
<!-- Nested Tabs -->
<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>
</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>
<!-- Nested Tabs inside Tab 1 -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#nested1" class="mdl-tabs__tab is-active">Nested Tab 1</a>
<a href="#nested2" class="mdl-tabs__tab">Nested Tab 2</a>
</div>
<div class="mdl-tabs__panel is-active" id="nested1">
<h5>Content for Nested Tab 1</h5>
<p>This is content for the first nested tab inside Tab 1.</p>
</div>
<div class="mdl-tabs__panel" id="nested2">
<h5>Content for Nested Tab 2</h5>
<p>This is content for the second nested tab inside Tab 1.</p>
</div>
</div>
</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>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- Nested Tabs: প্রথম ট্যাবের মধ্যে আরেকটি ট্যাব সিস্টেম তৈরি করা হয়েছে, যা আপনাকে Tab 1 এর ভিতরে Nested Tab 1 এবং Nested Tab 2 এর কন্টেন্ট দেখতে সহায়তা করবে।
- mdl-tabs এবং mdl-tabs__tab-bar ক্লাস একইভাবে ব্যবহৃত হয়, কিন্তু এবার এটি Tab 1 এর ভিতরে অন্তর্ভুক্ত করা হয়েছে।
- mdl-tabs__panel: প্রতিটি নেস্টেড ট্যাবের জন্য আলাদা প্যানেল তৈরি করা হয়েছে।
এটি একটি Nested Tab তৈরি করবে, যেখানে Tab 1 এর ভিতরে আরও দুইটি Nested Tab থাকবে।
MDL ট্যাবের অন্যান্য বৈশিষ্ট্য
- is-active: এটি নির্বাচিত ট্যাব এবং প্যানেল নির্দেশ করার জন্য ব্যবহৃত হয়।
- mdl-js-ripple-effect: ট্যাবে ক্লিক করার সময় রিপল এফেক্ট প্রয়োগ করে, যা ব্যবহারকারী অভিজ্ঞতাকে আরো ইন্টারঅ্যাকটিভ করে তোলে।
- mdl-tabs__tab-bar: এটি ট্যাবের বার তৈরি করে, যেখানে ব্যবহারকারী বিভিন্ন ট্যাবে ক্লিক করতে পারে।
- mdl-tabs__panel: এটি প্রতিটি ট্যাবের কন্টেন্ট প্রদর্শন করে।
সারাংশ
Material Design Lite (MDL) ব্যবহার করে Dynamic Tabs এবং Nested Tabs তৈরি করা খুবই সহজ। MDL-এর ট্যাব সিস্টেম ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সংগঠিত কন্টেন্ট প্রদর্শন করে। Dynamic Tabs ব্যবহার করে আপনি সহজেই কন্টেন্ট পরিবর্তন করতে পারেন এবং Nested Tabs ব্যবহার করে একটি ট্যাবের মধ্যে আরও ট্যাব সিস্টেম তৈরি করতে পারেন। MDL-এর Ripple Effect, JavaScript কার্যকারিতা এবং Material Design নীতি ব্যবহারের মাধ্যমে, আপনি একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারবেন।
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 ট্যাব কম্পোনেন্ট কাস্টমাইজেশন খুবই সহজ এবং এতে সুন্দর অ্যানিমেশন এবং ট্রানজিশন ফিচার রয়েছে।
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
