\Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Tabs এবং Tab Navigation তৈরি করতে সহায়ক। Tabs ব্যবহার করে আপনি আপনার ওয়েবসাইটে একাধিক কনটেন্ট সেকশনকে সুন্দরভাবে গ্রুপ এবং প্রদর্শন করতে পারেন। এটি একটি জনপ্রিয় ইন্টারফেস উপাদান, যা বিশেষ করে বিভিন্ন কনটেন্টকে একত্রিত করার জন্য এবং ওয়েবপেজের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।
এখানে Tabs এবং Tab Navigation তৈরি করার প্রক্রিয়া, এর কনফিগারেশন এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।
Materialize CSS এ Tabs তৈরি করা
Materialize CSS-এ Tabs তৈরি করার জন্য একটি নির্দিষ্ট HTML কাঠামো এবং JavaScript এর প্রয়োজন হয়। আপনি সহজেই কনটেন্ট ট্যাব তৈরি করতে পারেন এবং প্রতিটি ট্যাবের মধ্যে ভিন্ন ভিন্ন কনটেন্ট সন্নিবেশ করতে পারেন।
Basic Tabs Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Tabs Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tabs Structure -->
<div class="container">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Tab 1</a></li>
<li class="tab col s3"><a href="#test2">Tab 2</a></li>
<li class="tab col s3"><a href="#test3">Tab 3</a></li>
</ul>
<div id="test1" class="col s12">
<h5>Tab 1 Content</h5>
<p>This is the content of Tab 1.</p>
</div>
<div id="test2" class="col s12">
<h5>Tab 2 Content</h5>
<p>This is the content of Tab 2.</p>
</div>
<div id="test3" class="col s12">
<h5>Tab 3 Content</h5>
<p>This is the content of Tab 3.</p>
</div>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Tabs -->
<script>
$(document).ready(function(){
$('.tabs').tabs();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- ul.tabs: এটি Tabs এর মেনু তৈরি করে। এখানে, প্রতিটি
liট্যাবের একটি লিঙ্ক (anchor tag) ধারণ করে। - id="test1": প্রতিটি ট্যাবের জন্য একটি কনটেন্ট সেকশন তৈরি করা হয়েছে, যা
idদ্বারা নির্ধারিত হয়। - $('.tabs').tabs();: এটি Materialize CSS এর মাধ্যমে ট্যাব ফিচার ইনিশিয়ালাইজ করার জন্য ব্যবহৃত হয়।
Materialize CSS এর Tab Navigation
Tab Navigation একটি শক্তিশালী উপাদান যা সাইটের বিভিন্ন সেকশন দ্রুত নেভিগেট করতে সহায়ক। Materialize CSS এ Tab Navigation তৈরি করতে হলে আপনাকে একইভাবে Tabs তৈরি করতে হবে, তবে এর মধ্যে nav এবং tabs ক্লাসের ব্যবহারের মাধ্যমে নেভিগেশন সিস্টেম তৈরি করতে হয়।
Tab Navigation Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Tab Navigation</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tab Navigation Structure -->
<div class="container">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a href="#home">Home</a></li>
<li class="tab col s3"><a href="#about">About</a></li>
<li class="tab col s3"><a href="#services">Services</a></li>
<li class="tab col s3"><a href="#contact">Contact</a></li>
</ul>
<div id="home" class="col s12">
<h5>Home Tab</h5>
<p>Welcome to the Home tab.</p>
</div>
<div id="about" class="col s12">
<h5>About Tab</h5>
<p>Information about the company.</p>
</div>
<div id="services" class="col s12">
<h5>Services Tab</h5>
<p>Details of the services we offer.</p>
</div>
<div id="contact" class="col s12">
<h5>Contact Tab</h5>
<p>Get in touch with us.</p>
</div>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialize Tabs with swipeable feature -->
<script>
$(document).ready(function(){
$('#tabs-swipe-demo').tabs({
swipeable: true
});
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- id="tabs-swipe-demo": এটি Tab Navigation এর জন্য নির্দিষ্ট করা আইডি।
idঅ্যাট্রিবিউটের মাধ্যমে Tabs এর মধ্যেaট্যাগের মাধ্যমে প্রতিটি ট্যাবের নাম এবং কনটেন্ট সেকশন নির্ধারণ করা হয়েছে। - swipeable: যদি আপনি একটি মোবাইল-ফ্রেন্ডলি ট্যাব চান, তাহলে
swipeableঅপশন সক্রিয় করতে পারেন। এটি মোবাইল ডিভাইসে ট্যাবের মাধ্যমে স্ক্রল করার সুবিধা দেয়।
Tab Navigation কাস্টমাইজ করা
Materialize CSS এ Tab Navigation কাস্টমাইজ করতে আপনি কিছু স্টাইল প্রয়োগ করতে পারেন, যেমন ট্যাবগুলোর রঙ, আকৃতি বা তাদের সিলেকশন। উদাহরণস্বরূপ:
১. Tab Color Customization
<style>
.tabs .tab a {
color: #26a69a; /* Default Tab Color */
}
.tabs .tab a:hover {
color: #004d40; /* Hover Color */
}
.tabs .tab a.active {
color: #004d40; /* Active Tab Color */
}
</style>
এখানে:
- color: এটি ট্যাবের সাধারণ এবং হোভার স্টাইলের রঙ পরিবর্তন করতে ব্যবহৃত হয়েছে।
- active: এটি বর্তমানে নির্বাচিত (active) ট্যাবের রঙ কাস্টমাইজ করতে ব্যবহৃত হয়।
২. Adjust Tab Height
<style>
.tabs {
height: 50px;
}
.tabs .tab {
padding: 15px;
}
</style>
এখানে:
- height: Tabs এর উচ্চতা কাস্টমাইজ করা হয়েছে।
- padding: প্রতিটি ট্যাবের মধ্যে প্যাডিং যোগ করা হয়েছে।
উপসংহার
Materialize CSS এর Tabs এবং Tab Navigation ওয়েব ডিজাইনে একটি অত্যন্ত কার্যকরী উপাদান। এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করতে সহায়তা করে। আপনি সহজেই কাস্টমাইজ করতে পারেন, যেমন ট্যাবের রঙ, অবস্থান, সাইজ এবং সিলেকশন স্টাইল পরিবর্তন করে। Materialize CSS এর এই ট্যাব সিস্টেম ওয়েবসাইটের বিভিন্ন সেকশন সুন্দরভাবে গ্রুপ এবং প্রদর্শন করতে সক্ষম, যা একাধিক কনটেন্ট প্রদর্শন করার জন্য একটি আদর্শ সমাধান।
Read more
