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 নীতি ব্যবহারের মাধ্যমে, আপনি একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারবেন।
Read more
